/* ============================================================
   Tyler Malone — Cosmic
   Display: Cormorant Garamond · Body: Hanken Grotesk · Mono: IBM Plex Mono
   ============================================================ */

:root {
  /* deep space palette */
  --void:      #000000;
  --void-2:    #050608;
  --ink:       #0b0f20;
  --nebula-indigo: #160f3a;
  --nebula-violet: #2a1a52;
  --nebula-rose:   #7a2f57;
  --nebula-teal:   #16384a;

  --star:      #f4f1ff;
  --text:      #d9dcef;
  --text-dim:  #9498bf;
  --text-mute: #61658c;

  --gold:      #e9c987;   /* star-gold accent */
  --gold-soft: #d8b873;
  --cyan:      #7fd6e8;    /* ion blue */
  --rose:      #e08aa8;

  --line:      rgba(160,168,220,0.14);
  --line-soft: rgba(160,168,220,0.08);

  --maxw: 1240px;
  --gut: clamp(1.4rem, 5vw, 5rem);

  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #000; }
html.flying { scroll-behavior: auto; }

body {
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--text);
  background: #000;        /* the void behind every scenic layer */
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: #1a1205; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- atmosphere layers ---------- */
.hero__stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.grain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .nav, .foot { position: relative; z-index: 2; }

/* scroll progress — thin filament across the top */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--rose) 55%, var(--cyan));
  box-shadow: 0 0 12px rgba(233,201,135,0.55);
  will-change: transform;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gut);
  z-index: 50;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7,10,22,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: .6rem; }
.nav__sigil { color: var(--gold); font-size: 1rem; transition: transform .6s var(--ease); }
.nav__brand:hover .nav__sigil { transform: rotate(180deg); }
.nav__name {
  font-family: var(--f-display);
  font-size: 1.35rem; font-weight: 500; letter-spacing: .02em;
  color: var(--star);
}
.nav__links { display: flex; gap: 1.65rem; }
.nav__links a {
  font-size: .78rem; letter-spacing: .04em; color: var(--text-dim);
  position: relative; padding: .2rem 0; transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--star); }
.nav__links a:hover::after { width: 100%; }
.nav__cta {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(233,201,135,0.35); border-radius: 100px;
  padding: .5rem .95rem; white-space: nowrap;
  transition: background .3s, border-color .3s, color .3s;
}
.nav__cta:hover { background: var(--gold); color: #1a1205; border-color: var(--gold); }

.nav__actions { display: flex; align-items: center; gap: .7rem; }

/* fly toggle button */
.nav__fly {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cyan);
  background: transparent; cursor: pointer;
  border: 1px solid rgba(127,214,232,0.35); border-radius: 50%;
  width: 2.2rem; height: 2.2rem; padding: 0;
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.nav__fly-ico { font-size: 1rem; line-height: 1; transition: transform .4s var(--ease); }
.nav__fly:hover { background: rgba(127,214,232,0.1); border-color: var(--cyan); color: var(--star); }
.nav__fly:hover .nav__fly-ico { transform: translateY(-2px) rotate(-12deg); }
.nav__fly[aria-pressed="true"] {
  background: var(--cyan); color: #062028; border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(127,214,232,0.5);
}
.nav__fly[aria-pressed="true"] .nav__fly-ico { transform: rotate(-35deg); }

/* ============================================================
   FLIGHT MODE — drive a rocket to scroll the page
   ============================================================ */
.rocket {
  position: fixed; left: 0; top: 0;
  width: 48px; height: 84px;
  margin-left: -24px; margin-top: -42px;   /* center on the (px,py) origin */
  z-index: 65; pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) drop-shadow(0 0 14px rgba(127,214,232,0.45));
}
.rocket[hidden] { display: none; }
.rocket__svg { display: block; overflow: visible; }

/* afterburner — Shift held */
.rocket.is-boosting {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 22px rgba(127,214,232,0.85));
}
.rocket.is-boosting .rocket__flame {
  background: linear-gradient(180deg, #ffffff 0%, #fff0c0 22%, var(--cyan) 55%, rgba(127,214,232,0) 100%);
  filter: blur(0.4px) drop-shadow(0 0 14px rgba(127,214,232,0.9));
}

/* exhaust flame — height driven by --thrust (0..1) from JS */
.rocket__flame {
  --thrust: 0;
  position: absolute; left: 50%; top: 76px;
  width: calc(11px + 7px * var(--thrust));
  height: calc(6px + 30px * var(--thrust));
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 22% 22% 78% 78%;
  background: linear-gradient(180deg, #fff6d8 0%, var(--gold) 26%, var(--rose) 62%, rgba(224,138,168,0) 100%);
  opacity: calc(0.25 + 0.75 * var(--thrust));
  filter: blur(0.4px) drop-shadow(0 0 8px rgba(233,201,135,0.7));
  transform-origin: 50% 0%;
  animation: flameFlicker .09s steps(2) infinite;
}
@keyframes flameFlicker {
  0%   { transform: translateX(-50%) scaleY(1) scaleX(1); }
  100% { transform: translateX(-52%) scaleY(0.86) scaleX(1.12); }
}

/* on-screen d-pad (touch) */
.dpad {
  position: fixed; right: 1.1rem; bottom: 1.4rem; z-index: 66;
  display: none;
  grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px);
  gap: 6px; touch-action: none;
}
.dpad[hidden] { display: none !important; }
.dpad__btn {
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--star); cursor: pointer;
  background: rgba(7,10,22,0.7); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 12px;
  -webkit-user-select: none; user-select: none;
}
.dpad__btn:active { background: rgba(127,214,232,0.25); border-color: var(--cyan); }
.dpad__up    { grid-column: 2; grid-row: 1; }
.dpad__left  { grid-column: 1; grid-row: 2; }
.dpad__right { grid-column: 3; grid-row: 2; }
.dpad__down  { grid-column: 2; grid-row: 3; }
@media (hover: none) and (pointer: coarse) {
  .dpad.is-on { display: grid; }
}

/* ============================================================
   GAME — combat layer, HUD, achievements, game over
   ============================================================ */
.game-layer {
  position: fixed; inset: 0; z-index: 64; pointer-events: none;
}
.game-layer[hidden] { display: none !important; }

/* red vignette when the hull takes a hit */
.hit-flash {
  position: fixed; inset: 0; z-index: 118; pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(circle at 50% 50%, rgba(224,40,80,0) 32%, rgba(224,40,80,0.55) 100%);
}

/* HUD — hull bar + run stats */
.hud {
  position: fixed; top: 4.4rem; left: 50%; transform: translateX(-50%);
  z-index: 70; pointer-events: none;
}
.hud[hidden] { display: none !important; }
.hud__bar {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  background: rgba(7,10,22,0.6); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 26px rgba(0,0,0,0.4);
}
.hud__health {
  width: min(46vw, 260px); height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
}
.hud__health-fill {
  display: block; height: 100%; width: 100%; border-radius: 6px;
  transition: width .12s linear, background .3s;
  background: linear-gradient(90deg, #7fd6e8, #9af0c0);
  box-shadow: 0 0 12px rgba(127,214,232,0.6);
}
.hud__health-fill[data-lvl="warn"] {
  background: linear-gradient(90deg, #e9c987, #f0b86a);
  box-shadow: 0 0 12px rgba(233,201,135,0.6);
}
.hud__health-fill[data-lvl="low"] {
  background: linear-gradient(90deg, #e08aa8, #e0405a);
  box-shadow: 0 0 14px rgba(224,64,90,0.7);
  animation: hpPulse .6s ease-in-out infinite;
}
@keyframes hpPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.hud__stats {
  display: flex; gap: 1.1rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .03em;
  color: var(--text-dim); text-transform: uppercase;
}
.hud__stats b { color: var(--star); font-weight: 600; }

/* achievement toasts */
.toasts {
  position: fixed; right: 1.1rem; top: 5rem; z-index: 120;
  display: flex; flex-direction: column; gap: .55rem;
  pointer-events: none; max-width: min(82vw, 320px);
}
.toast {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: 12px;
  background: rgba(10,14,28,0.82); backdrop-filter: blur(12px);
  border: 1px solid rgba(233,201,135,0.4);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  transform: translateX(120%); opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.toast.in { transform: translateX(0); opacity: 1; }
.toast__ico { font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(233,201,135,0.6)); }
.toast__txt { display: flex; flex-direction: column; line-height: 1.25; }
.toast__txt b { color: var(--gold); font-size: .86rem; }
.toast__txt span { color: var(--text-dim); font-size: .74rem; }

/* game-over overlay */
.gameover {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1.4rem;
  background: rgba(2,3,8,0.72); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s ease; pointer-events: auto;
}
.gameover[hidden] { display: none !important; }
.gameover.in { opacity: 1; }
.gameover__panel {
  width: min(92vw, 460px); padding: 1.8rem 1.6rem; text-align: center;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22,15,58,0.9), rgba(11,15,32,0.92));
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: translateY(12px) scale(.98); transition: transform .45s var(--ease);
}
.gameover.in .gameover__panel { transform: none; }
.gameover__title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2rem, 7vw, 3rem); color: var(--star); line-height: 1; margin-bottom: .3rem;
}
.gameover__sub { color: var(--text-dim); font-style: italic; margin-bottom: 1.2rem; }
.gameover__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.1rem; }
.gostat {
  padding: .7rem; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
}
.gostat b { display: block; font-family: var(--f-mono); font-size: 1.3rem; color: var(--star); }
.gostat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); }
.gostat.is-best { border-color: rgba(233,201,135,0.5); box-shadow: 0 0 18px rgba(233,201,135,0.18); }
.gostat em { display: block; color: var(--gold); font-style: normal; font-size: .58rem; margin-top: .15rem; letter-spacing: .08em; }
.gameover__ach { margin-bottom: 1.3rem; }
.gameover__ach-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-mute); margin-bottom: .5rem;
}
.gameover__chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.chip {
  font-size: .72rem; padding: .3rem .55rem; border-radius: 999px;
  background: rgba(233,201,135,0.12); border: 1px solid rgba(233,201,135,0.3); color: var(--gold);
}
.gameover__actions { display: flex; gap: .7rem; justify-content: center; }
.gameover__btn {
  font-family: var(--f-body); font-size: .86rem; padding: .6rem 1.2rem;
  border-radius: 999px; cursor: pointer; color: var(--text);
  background: transparent; border: 1px solid var(--line);
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.gameover__btn:hover { border-color: var(--cyan); color: var(--star); }
.gameover__btn--go { background: var(--cyan); color: #062028; border-color: var(--cyan); font-weight: 600; }
.gameover__btn--go:hover { background: #9be4f2; color: #062028; box-shadow: 0 0 18px rgba(127,214,232,0.5); }

@media (prefers-reduced-motion: reduce) {
  .toast, .gameover, .gameover__panel { transition: none; }
  .hud__health-fill[data-lvl="low"] { animation: none; }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem var(--gut) 6rem;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__img {
  position: absolute; top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover; object-position: center 35%;
  opacity: 0.55;
  filter: saturate(1.05) contrast(1.02);
  will-change: transform;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 60%, transparent 0%, rgba(4,5,12,0.55) 70%, var(--void) 100%),
    linear-gradient(180deg, rgba(4,5,12,0.55) 0%, transparent 22%, transparent 55%, var(--void) 100%);
}
.hero__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 1.6rem;
}
.eyebrow .coord { color: var(--cyan); }
.eyebrow__sep { color: var(--text-mute); }

.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(4.2rem, 17vw, 15rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--star);
  margin-bottom: 1.8rem;
}
.hero__title span { display: block; }
.hero__title-em {
  font-style: italic; font-weight: 300;
  background: linear-gradient(92deg, var(--gold) 0%, var(--rose) 55%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .08em;
}
.hero__lede {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 300; line-height: 1.4;
  color: var(--text); max-width: 30ch;
  margin-bottom: 3rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
  max-width: 980px;
}
.stat dt {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: .5rem;
}
.stat dd { font-size: .95rem; color: var(--text-dim); line-height: 1.5; }
@media (max-width: 760px) { .hero__stats { grid-template-columns: 1fr; gap: 1.3rem; } }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--text-mute);
}
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); }
.hero__scroll-line::after {
  content: ""; display: block; width: 1px; height: 14px; background: var(--gold);
  animation: drop 2.2s var(--ease) infinite;
}
@keyframes drop { 0% { transform: translateY(-14px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 9rem) var(--gut);
}
.section__head {
  display: flex; align-items: baseline; gap: 1.3rem;
  margin-bottom: 3.5rem;
}
.section__idx {
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .1em;
  color: var(--gold); padding-top: .4rem;
}
.section__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1;
  letter-spacing: -0.01em; color: var(--star);
}
.section__rule { flex: 1; height: 1px; background: var(--line); align-self: center; margin-left: .5rem; }

/* ============================================================
   ATMOSPHERIC LAYER BACKGROUNDS (the descent)
   ============================================================ */
.section--layer { position: relative; isolation: isolate; }
.section--layer > *:not(.section__bg) { position: relative; z-index: 1; }
.section__bg {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 100%; z-index: 0; overflow: hidden;
}
.section__bg img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; will-change: transform;
}
.section__veil { position: absolute; inset: 0; }

/* base legibility blend — scenes emerge from / dissolve into pure black */
.section--layer .section__veil::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #000 0%, rgba(0,0,0,0.5) 24%,
    rgba(0,0,0,0.48) 76%, #000 100%);
}

/* exosphere — edge of space, deep blue */
.section--exo .section__bg img { opacity: .48; }
.section--exo .section__veil { background: radial-gradient(90% 80% at 72% 26%, rgba(46,86,150,0.22), transparent 70%); }

/* thermosphere — aurora / airglow, teal-green */
.section--thermo .section__bg img { opacity: .46; }
.section--thermo .section__veil { background: radial-gradient(95% 85% at 35% 70%, rgba(40,150,128,0.22), transparent 72%); }

/* mesosphere — noctilucent twilight, indigo */
.section--meso .section__bg img { opacity: .50; }
.section--meso .section__veil { background: radial-gradient(95% 85% at 60% 60%, rgba(70,90,190,0.20), transparent 72%); }

/* stratosphere — high cloud deck, steel blue */
.section--strato .section__bg img { opacity: .40; }
.section--strato .section__veil { background: radial-gradient(95% 85% at 50% 40%, rgba(70,120,180,0.20), transparent 72%); }

/* troposphere — daylight clouds, sky blue (brighter) */
.section--tropo .section__bg img { opacity: .34; }
.section--tropo .section__veil::before { background: linear-gradient(180deg,
  #000 0%, rgba(2,6,12,0.58) 26%, rgba(2,6,12,0.56) 74%, #000 100%); }
.section--tropo .section__veil { background: radial-gradient(95% 90% at 50% 35%, rgba(96,150,200,0.20), transparent 72%); }

/* rolling hills — golden / olive */
.section--hills .section__bg img { opacity: .40; }
.section--hills .section__veil::before { background: linear-gradient(180deg,
  #000 0%, rgba(6,5,2,0.56) 26%, rgba(6,5,2,0.54) 74%, #000 100%); }
.section--hills .section__veil { background: radial-gradient(95% 90% at 45% 62%, rgba(168,138,58,0.18), transparent 70%); }

/* forest — deep green */
.section--forest .section__bg img { opacity: .42; }
.section--forest .section__veil::before { background: linear-gradient(180deg,
  #000 0%, rgba(2,6,4,0.54) 26%, rgba(2,6,4,0.54) 74%, #000 100%); }
.section--forest .section__veil { background: radial-gradient(95% 90% at 50% 55%, rgba(48,120,86,0.20), transparent 72%); }

/* lakeshore — warm mist */
.section--lake .section__bg img { opacity: .38; }
.section--lake .section__veil::before { background: linear-gradient(180deg,
  #000 0%, rgba(8,4,6,0.54) 26%, rgba(8,4,6,0.54) 74%, #000 100%); }
.section--lake .section__veil { background: radial-gradient(95% 90% at 50% 55%, rgba(168,104,118,0.16), transparent 72%); }

/* coast — sunset warm into water */
.section--coast .section__bg img { opacity: .46; }
.section--coast .section__veil::before { background: linear-gradient(180deg,
  #000 0%, rgba(12,6,4,0.5) 26%, rgba(10,6,8,0.5) 72%, #000 100%); }
.section--coast .section__veil { background: radial-gradient(95% 90% at 52% 42%, rgba(216,124,70,0.22), transparent 70%); }

/* ============================================================
   EXPERIENCE — per-job scene backgrounds (the descent)
   ============================================================ */
.entry { isolation: isolate; }
.entry > *:not(.entry__bg) { position: relative; z-index: 1; }
.entry::before { z-index: 1; }
.entry__bg {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 100%; z-index: 0; overflow: hidden;
}
.entry__bg img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; opacity: .36; will-change: transform;
}
.entry__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #000 0%, rgba(0,0,0,0.6) 20%,
    rgba(0,0,0,0.6) 80%, #000 100%);
}
/* ============================================================
   ABOUT
   ============================================================ */
.about__body { max-width: 74ch; }
.about__body p { font-size: 1.06rem; color: var(--text-dim); margin-bottom: 1.5rem; }
.about__body .lead {
  font-family: var(--f-display); font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 300; line-height: 1.45; color: var(--text);
}
.about__body .lead::first-letter {
  font-size: 3.4em; float: left; line-height: .8; padding: .06em .12em .02em 0;
  color: var(--gold); font-weight: 500;
}
.about__figure { position: relative; perspective: 1000px; }
.planet {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(233,201,135,0.18),
    0 0 60px rgba(127,214,232,0.18),
    inset -30px -20px 80px rgba(4,5,12,0.85),
    0 40px 90px rgba(0,0,0,0.55);
  transition: transform .5s var(--ease);
}
.planet img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.about__figure:hover .planet { transform: rotateY(-6deg) rotateX(3deg); }
.about__figure figcaption {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute);
  text-align: center; margin-top: 1.1rem;
}
@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__figure { max-width: 340px; margin: 1rem auto 0; }
}

/* ============================================================
   EXPERIENCE / TIMELINE
   ============================================================ */
.timeline { list-style: none; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
@media (max-width: 820px) { .timeline::before { display: none; } }

.entry {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 2.8rem 0 2.8rem 2.2rem;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.entry::before {
  content: ""; position: absolute; left: -4px; top: 3.4rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 12px var(--gold);
}
.entry:last-child { border-bottom: none; }

.entry__meta { padding-top: .25rem; }
.entry__no {
  font-family: var(--f-display); font-size: 2.6rem; font-weight: 300;
  font-style: italic; color: var(--text-mute); display: block; line-height: 1;
  margin-bottom: .6rem;
}
.entry__date {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .06em;
  color: var(--cyan);
}
.entry__org {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08;
  color: var(--star); margin-bottom: .35rem;
}
.entry__role {
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .03em;
  color: var(--gold-soft); margin-bottom: 1.5rem;
}
.entry__text p { color: var(--text-dim); margin-bottom: 1.1rem; font-size: 1.01rem; }
.entry__text p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  .entry { grid-template-columns: 1fr; gap: .9rem; padding-left: 0; }
  .entry::before { display: none; }
  .entry__meta { display: flex; align-items: baseline; gap: 1rem; }
  .entry__no { font-size: 1.8rem; margin-bottom: 0; }
}

/* ---------- chips ---------- */
.chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.6rem;
}
.chips li {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em;
  color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .32rem .8rem; background: rgba(160,168,220,0.03);
  transition: border-color .25s, color .25s, background .25s;
}
.chips li:hover { border-color: rgba(233,201,135,0.4); color: var(--gold); background: rgba(233,201,135,0.06); }

/* ============================================================
   EDUCATION
   ============================================================ */
.edu-card {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(150deg, rgba(12,17,30,0.62), rgba(6,9,18,0.7));
  backdrop-filter: blur(7px) saturate(120%);
  position: relative; overflow: hidden;
}
.edu-card::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 50%; height: 180%;
  background: radial-gradient(closest-side, rgba(127,214,232,0.16), transparent);
  pointer-events: none;
}
.edu-card__org { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.8rem,3.4vw,2.6rem); color: var(--star); line-height: 1.05; }
.edu-card__deg { font-size: 1.05rem; color: var(--text); margin-top: .5rem; }
.edu-card__date { font-family: var(--f-mono); font-size: .8rem; color: var(--cyan); margin-top: .4rem; }
.gpa { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.1rem; }
.gpa__num {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1;
  background: linear-gradient(92deg, var(--gold), var(--rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gpa__den { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; color: var(--text-mute); text-transform: uppercase; }
.edu-card__note { color: var(--text-dim); font-size: 1rem; line-height: 1.6; }
@media (max-width: 720px) { .edu-card { grid-template-columns: 1fr; } }

/* ============================================================
   PROJECTS
   ============================================================ */
.proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 820px) { .proj-grid { grid-template-columns: 1fr; } }

.proj {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: rgba(8,12,24,0.62);
  backdrop-filter: blur(7px) saturate(120%);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.proj:hover {
  transform: translateY(-6px);
  border-color: rgba(233,201,135,0.35);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 50px rgba(127,214,232,0.08);
}
.proj__media { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.proj__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,15,32,0.85) 100%);
}
.proj__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease); opacity: .85;
}
.proj:hover .proj__media img { transform: scale(1.06); opacity: 1; }
.proj__body { padding: 1.7rem clamp(1.4rem, 3vw, 2rem) 2rem; display: flex; flex-direction: column; flex: 1; }
.proj__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.proj__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--star); line-height: 1.05; }
.proj__arrow { font-size: 1.3rem; color: var(--gold); transition: transform .4s var(--ease); }
.proj:hover .proj__arrow { transform: translate(4px, -4px); }
.proj__date { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .03em; color: var(--cyan); margin: .5rem 0 1rem; }
.proj__desc { color: var(--text-dim); font-size: 1rem; }
.proj .chips { margin-top: auto; padding-top: 1.5rem; }

/* ============================================================
   SKILLS
   ============================================================ */
.skills-grid { border-top: 1px solid var(--line); }
.skillrow {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 1.5rem; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line-soft);
  transition: background .3s;
}
.skillrow:hover { background: rgba(160,168,220,0.025); }
.skillrow dt {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.45rem; color: var(--gold-soft);
}
.skillrow dd { font-size: 1.02rem; color: var(--text-dim); letter-spacing: .01em; }
@media (max-width: 720px) {
  .skillrow { grid-template-columns: 1fr; gap: .4rem; }
  .skillrow dt { font-size: 1.3rem; }
}

/* ============================================================
   SERVICE RECORD
   ============================================================ */
.service__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 920px) { .service__grid { grid-template-columns: 1fr; } }

.medal-group {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 1.8rem clamp(1.4rem, 2.5vw, 1.9rem) 2rem;
  background: linear-gradient(165deg, rgba(12,17,30,0.58), rgba(6,9,18,0.66));
  backdrop-filter: blur(7px) saturate(120%);
  height: 100%;
}
.medal-group__title {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  padding-bottom: 1rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.record-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.record-list > li { position: relative; padding-left: 1.4rem; color: var(--text); }
.record-list > li::before {
  content: "✦"; position: absolute; left: 0; top: .05rem;
  color: var(--gold-soft); font-size: .7rem;
}
.record-list--desc > li { display: flex; flex-direction: column; gap: .35rem; }
.record__name { font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; color: var(--star); line-height: 1.2; }
.record__desc { font-size: .9rem; color: var(--text-mute); line-height: 1.55; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  position: relative; max-width: none; margin: 0;
  padding: clamp(6rem, 14vw, 11rem) var(--gut);
  overflow: hidden; isolation: isolate;
}
.contact__media { position: absolute; inset: 0; z-index: -1; }
.contact__media img {
  width: 100%; height: 120%; object-fit: cover; object-position: center;
  opacity: .46; will-change: transform;
}
.contact__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(95% 85% at 35% 35%, rgba(22,96,118,0.28), transparent 65%),
    linear-gradient(180deg, #000 0%, rgba(6,30,42,0.5) 26%, rgba(5,22,32,0.7) 68%, #000 100%);
}
.contact__inner { max-width: var(--maxw); margin: 0 auto; }
.section__idx--light { display: inline-block; margin-bottom: 1rem; }
.contact__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3rem, 10vw, 8rem); line-height: 0.95; letter-spacing: -0.02em;
  color: var(--star); margin-bottom: 1.8rem;
}
.contact__title em {
  font-style: italic; font-weight: 300;
  background: linear-gradient(92deg, var(--gold), var(--rose) 60%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact__lede {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem); line-height: 1.45;
  color: var(--text); max-width: 48ch; margin-bottom: 3.5rem;
}
.contact__links { list-style: none; display: grid; gap: 0; max-width: 760px; border-top: 1px solid var(--line); }
.contact__links li {
  display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 1rem;
  padding: 1.3rem 0; border-bottom: 1px solid var(--line-soft);
}
.contact__label {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-soft);
}
.contact__links a {
  font-family: var(--f-display); font-size: clamp(1.3rem, 3vw, 2rem); color: var(--text);
  position: relative; width: fit-content; transition: color .3s;
}
.contact__links a::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 0; background: var(--gold);
  transition: width .35s var(--ease);
}
.contact__links a:hover { color: var(--gold); }
.contact__links a:hover::after { width: 100%; }
@media (max-width: 600px) {
  .contact__links li { grid-template-columns: 1fr; gap: .2rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 2.5rem var(--gut);
  border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--text-mute);
}
.foot__name { color: var(--text-dim); }
.foot__top { transition: color .25s; }
.foot__top:hover { color: var(--gold); }

/* ============================================================
   404 — lost in the void
   ============================================================ */
.error {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 8rem var(--gut) 6rem;
  overflow: hidden;
}
.error__media { position: absolute; inset: 0; z-index: -1; }
.error__media img {
  position: absolute; top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover; object-position: center 40%;
  opacity: 0.5;
  filter: saturate(1.05) contrast(1.02);
}
.error__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 0%, rgba(4,5,12,0.6) 68%, var(--void) 100%),
    linear-gradient(180deg, rgba(4,5,12,0.6) 0%, transparent 30%, transparent 60%, var(--void) 100%);
}
.error__inner { max-width: 60ch; position: relative; z-index: 1; }
.error__eyebrow {
  display: inline-flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  justify-content: center;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 1.6rem;
}
.error__eyebrow .coord { color: var(--cyan); }
.error__eyebrow__sep { color: var(--text-mute); }
.error__code {
  font-family: var(--f-display);
  font-weight: 300; font-style: italic;
  font-size: clamp(6rem, 26vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  background: linear-gradient(92deg, var(--gold) 0%, var(--rose) 55%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1rem;
}
.error__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05;
  color: var(--star); margin-bottom: 1.2rem;
}
.error__lede {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 300; line-height: 1.5;
  color: var(--text-dim); margin: 0 auto 2.6rem; max-width: 42ch;
}
.error__home {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(233,201,135,0.35); border-radius: 100px;
  padding: .75rem 1.4rem;
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.error__home:hover {
  background: var(--gold); color: #1a1205; border-color: var(--gold);
  transform: translateY(-2px);
}
.error__home .arrow { transition: transform .4s var(--ease); }
.error__home:hover .arrow { transform: translateX(-4px); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(7px); }
.reveal.in { opacity: 1; transform: none; filter: blur(0);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal[data-d="1"].in { transition-delay: .05s; }
.reveal[data-d="2"].in { transition-delay: .18s; }
.reveal[data-d="3"].in { transition-delay: .30s; }
.reveal[data-d="4"].in { transition-delay: .46s; }
.reveal[data-d="5"].in { transition-delay: .60s; }
.reveal[data-d="6"].in { transition-delay: .76s; }

.reveal-up { opacity: 0; transform: translateY(34px); filter: blur(7px); }
.reveal-up.in { opacity: 1; transform: none; filter: blur(0);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal, .reveal-up { opacity: 1 !important; transform: none !important; filter: none !important; }
  .scroll-progress { display: none; }
  .hero__scroll-line::after { animation: none; }
  [data-parallax] { transform: none !important; }
}