/* Inter Tight at weight 800 with overlapping contours merged (fontTools instancer + removeOverlaps,
   Latin subset), so text-stroke outlines draw only the outer shape of each letter. */
@font-face {
  font-family: "Inter Tight Display";
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/InterTight-800.woff2") format("woff2");
}

:root {
  --bg: #0a0a0b;
  --bg-2: #111113;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f2ef;
  --muted: #8b8b90;
  --dim: #4a4a4f;
  --gold: #d4af5a;
  --gold-hi: #f3d68a;
  --gold-glow: rgba(212, 175, 90, 0.35);

  --sans: "Inter Tight", system-ui, sans-serif;
  --display: "Inter Tight Display", "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  /* Content uses the left column; the jet owns the right. */
  --content-w: 56%;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fine grid that fades out toward the edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }

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

/* ---------- Jet ---------- */

/* The bank clip, drawn full-screen behind the clouds and content. Its frames have their black
   removed (tools/export_clip.py --to-black), so with screen blending only the jet shows. */
.jet-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--gutter);
  z-index: 10;
  background: linear-gradient(var(--bg), transparent);
}
.nav__mark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}
.nav__links { display: flex; gap: clamp(16px, 3vw, 40px); }
.nav__links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--gold); }

/* ---------- Shared type ---------- */

main { position: relative; z-index: 2; }

.eyebrow,
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.num { color: var(--gold); margin-right: 10px; }

h2 {
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 20px 0 28px;
}
h2 em { font-style: normal; color: var(--gold); }

.lead { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; }

/* ---------- Launch (pinned takeoff sequence) ---------- */

.launch { position: relative; height: 400vh; }
.launch__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: transparent;
  /* main.js sets --cut just inside the clouds' solid band: below it the stage is transparent. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--cut, 200vh) - 60px), transparent var(--cut, 200vh));
  mask-image: linear-gradient(to bottom, #000 calc(var(--cut, 200vh) - 60px), transparent var(--cut, 200vh));
}
.launch__hangar,
.launch__shade,
.launch__frame { position: absolute; inset: 0; }
.launch__hangar {
  will-change: transform, opacity, filter;
  /* Soft top edge: the scene sinks as the camera rises, so its top must never read as a hard line. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%);
}
.launch__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.launch__shade {
  background:
    linear-gradient(to bottom, rgba(10, 10, 11, 0.55), transparent 22%, transparent 55%, rgba(10, 10, 11, 0.92) 88%),
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(10, 10, 11, 0.6) 100%);
}
.launch__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.launch__intro {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 6vh;
  text-align: center;
  will-change: transform, opacity;
}
.launch__name {
  margin: 14px 0 16px;
  font-size: clamp(44px, 9vw, 150px);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: uppercase;
}
.outline { color: transparent; -webkit-text-stroke: 1px rgba(242, 242, 239, 0.7); }

/* The name lights up as the crane shot starts (main.js sets --lit 0..1 in step with the clip's
   orange rim light): warm letters, a gold outline and a bloom around them. */
.launch__name {
  color: color-mix(in srgb, #ffe6bd calc(var(--lit, 0) * 100%), var(--text));
  text-shadow:
    0 0 calc(var(--lit, 0) * 18px) rgba(255, 176, 84, calc(var(--lit, 0) * 0.55)),
    0 0 calc(var(--lit, 0) * 60px) rgba(255, 150, 60, calc(var(--lit, 0) * 0.35));
}
.launch__name .outline {
  -webkit-text-stroke-color: color-mix(in srgb, var(--gold-hi) calc(var(--lit, 0) * 100%), rgba(242, 242, 239, 0.7));
}
/* ...and the warm pool it casts: on the floor around the name, spilling up toward the jet. Screen
   blending over the hangar canvas so it only ever adds light. Same box as .launch__intro. */
.launch__light {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 6vh;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.launch__light::before {
  content: "";
  position: absolute;
  inset: -120% -6% -30%;
  background:
    radial-gradient(ellipse 46% 26% at 50% 66%, rgba(255, 168, 80, 0.34), rgba(255, 140, 50, 0.12) 55%, transparent 100%),
    radial-gradient(ellipse 30% 55% at 50% 52%, rgba(255, 150, 60, 0.14), transparent 100%);
}
.launch__tag { color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll span:first-child { writing-mode: vertical-rl; }
.hero__line {
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--gold), transparent);
  animation: drop 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes drop {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Clouds ---------- */

/* Scrolls up over the pinned hangar (main.js sets its height and overlap from the screen size). */
.clouds {
  position: relative;
  z-index: 2;
  pointer-events: none;
  /* The layers are wider than the screen on tall phones; clip them sideways so the page doesn't
     widen (mobile browsers would zoom out to fit); top and bottom are left unclipped. */
  overflow-x: clip;
  --cloud-w: max(240vw, 360vh);
}
.clouds__mass {
  position: absolute;
  left: 50%;
  width: var(--cloud-w);
  will-change: transform;
}
.clouds__mass { top: 0; transform: translateX(-50%); }

/* ---------- Mist ---------- */

/* Fixed full-screen, above the pinned hangar (and the jet canvas behind <main>), below the clouds
   (z-index 2) and the sections (3). mist.js draws it at half resolution; the browser scales it up. */
.mist {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Sections ---------- */

/* Any content works here: everything sits in the left column, clear of the jet on the right. */
.section {
  position: relative;
  z-index: 3;
  min-height: 110vh;
  display: grid;
  grid-template-columns: minmax(0, var(--content-w)) 1fr;
  align-items: center;
  padding: 120px var(--gutter);
}
/* The first section follows the takeoff directly, so its content sits high instead of centred. */
.section--lead { min-height: 100vh; align-items: start; padding-top: 14vh; }
.section__body { grid-column: 1; max-width: 640px; }

.stats {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.stats dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  order: 2;
}
.stats div { display: flex; flex-direction: column-reverse; gap: 6px; }
.stats dd { font-size: clamp(32px, 3.4vw, 48px); font-weight: 300; letter-spacing: -0.03em; }

.projects { list-style: none; border-top: 1px solid var(--line); }
.projects a {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s, border-color 0.3s;
}
.projects__idx { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.projects__title { font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; }
.projects__title small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-top: 4px;
}
.projects__year { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.projects a:hover { padding-left: 12px; border-color: var(--gold); }
.projects a:hover .projects__idx,
.projects a:hover .projects__year { color: var(--gold); }

.timeline { list-style: none; position: relative; padding-left: 28px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--gold), var(--line));
}
.timeline li { position: relative; display: grid; gap: 4px; padding-bottom: 36px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 7px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  background: var(--bg);
  transform: rotate(45deg);
}
.timeline li:first-child::before { background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
.timeline__when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.timeline strong { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.timeline span:last-child { color: var(--muted); }

/* ---------- Contact ---------- */

.section--contact { min-height: 90vh; }
.contact__title {
  font-size: clamp(56px, 8vw, 140px);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.06em;
  margin: 16px 0 32px;
}
.contact__mail { display: inline-block; }
.contact__mail {
  font-size: clamp(18px, 2vw, 26px);
  padding: 14px 28px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.contact__mail:hover { background: var(--gold); color: var(--bg); box-shadow: 0 0 40px var(--gold-glow); }

.footer {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin: 0 var(--gutter);
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .nav__links { display: none; }
  .launch__name span { display: block; }
  .section { grid-template-columns: 1fr; }
  .stats { flex-wrap: wrap; }
  .footer { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__line { animation: none; }
}

/* ---------- v2: line-art transition (v2.html, main-v2.js) ---------- */

/* The page grid stays hidden until the line-art floor hands over to it, and then sits exactly
   on the floor's last lines (main-v2.js sets --grid, --gx and --gy on the root). */
.v2 body::before {
  opacity: var(--grid, 0);
  background-position: var(--gx, 50%) var(--gy, 50%);
}
.v2 .launch__grid,
.v2 .launch__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The floor seams get the page grid's edge fade as they become it (--m: 1 none, 0 the page's). */
.v2 .launch__grid {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 calc(20% + var(--m, 1) * 100%), transparent calc(75% + var(--m, 1) * 100%));
  mask-image: radial-gradient(ellipse at center, #000 calc(20% + var(--m, 1) * 100%), transparent calc(75% + var(--m, 1) * 100%));
}
/* The bank frame is the jet on black: screen-blended, only the jet shows over the grid. */
.v2 .launch__lines { mix-blend-mode: screen; }