@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/instrument-serif-italic.woff2?v=4") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-latin.woff2?v=4") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  font-family: "Manrope", sans-serif;
  color: #f5faff;
  background: #020409;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --blue: #329cff;
  --muted: #b8c9e3;
  --design-scale: 1;
  --footer-top: 840px;
}

* { box-sizing: border-box; }
html { background: #020409; scroll-behavior: auto; }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.river-story { height: 650vh; background: #020409; }
.scroll-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: #020409;
}

.design-viewport {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 30% 5%, rgba(44, 80, 143, .25), transparent 34%),
    linear-gradient(115deg, #020409 0%, #07101f 52%, #02040a 100%);
}

.river-viewport {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 190vw;
  pointer-events: none;
}

.river-strip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.river-segment {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.segment-hero { z-index: 1; top: 0; height: 46.15%; }
.segment-mid {
  z-index: 2;
  top: 42.69%;
  height: 34.61%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.segment-bottom { z-index: 1; top: 73.84%; height: 26.16%; }

.left-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 72% 110% at 15% 44%, rgba(1,2,5,.86) 0%, rgba(2,5,11,.56) 45%, rgba(4,8,19,.14) 72%, transparent 100%),
    linear-gradient(90deg, rgba(1,2,5,.22), transparent 72%);
  pointer-events: none;
  will-change: opacity;
}

.site-chrome {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(46px * var(--design-scale)) calc(64px * var(--design-scale)) 0;
  color: #d5e5fb;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .075em;
}

.wordmark { color: #eef6ff; font-weight: 600; }
.site-chrome nav { display: flex; gap: 2.2rem; align-items: center; }
.site-chrome .apply { margin-left: 2.4rem; }
.site-chrome a { transition: color .25s ease; }
.site-chrome a:hover { color: #53adff; }

.hero-copy {
  position: absolute;
  z-index: 5;
  left: calc(145px * var(--design-scale));
  top: calc(208px * var(--design-scale));
  width: calc(690px * var(--design-scale));
}

.eyebrow, .chapter, .scroll-cue {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .105em;
}

.hero-copy .eyebrow { font-size: calc(24px * var(--design-scale)); }
.hero-copy h1, .first-mark h2, .after-story h2 {
  margin: 1.2rem 0 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.015em;
}
.hero-copy h1 { font-size: calc(80px * var(--design-scale)); line-height: .975; }
.dek {
  margin: calc(38px * var(--design-scale)) 0 0 calc(5px * var(--design-scale));
  color: var(--muted);
  font-size: calc(17px * var(--design-scale));
  line-height: 1.58;
}
.scroll-cue { margin: calc(62px * var(--design-scale)) 0 0 calc(5px * var(--design-scale)); font-size: calc(12px * var(--design-scale)); }
.scroll-cue span { display: inline-block; margin-left: .55rem; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(6px); } }

.first-mark {
  position: absolute;
  z-index: 6;
  left: calc(896px * var(--design-scale));
  top: calc(500px * var(--design-scale));
  width: calc(420px * var(--design-scale));
  padding: 0;
  background: none;
  backdrop-filter: none;
}
.first-mark h2 { margin-top: calc(12px * var(--design-scale)); font-size: calc(58px * var(--design-scale)); line-height: 1; }
.first-mark > p:last-child { color: rgba(178, 199, 227, .82); font-size: calc(15px * var(--design-scale)); line-height: 1.6; }

.ipad-scene {
  position: absolute;
  z-index: 7;
  left: calc(26px * var(--design-scale));
  top: 0;
  width: calc(980px * var(--design-scale));
  height: auto;
  filter: drop-shadow(0 36px 54px rgba(0, 19, 72, .55));
  will-change: transform, opacity;
}

.canvas-stage {
  position: absolute;
  z-index: 8;
  left: calc(130px * var(--design-scale));
  top: 0;
  width: calc(1180px * var(--design-scale));
  height: calc(680px * var(--design-scale));
  aspect-ratio: 1180 / 680;
  overflow: hidden;
  border: 1px solid rgba(87, 145, 231, .58);
  border-radius: 1.8rem;
  background: #060b17;
  box-shadow: 0 2.5rem 5rem rgba(0, 25, 88, .5), inset 0 1px 0 rgba(255,255,255,.04);
  will-change: transform, opacity;
}
.canvas-stage > img { width: 100%; height: 100%; object-fit: fill; display: block; }
.canvas-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,6,14,.32), transparent 34%, transparent 68%, rgba(1,4,10,.2));
  pointer-events: none;
}
.canvas-toolbar {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: .55rem;
  align-items: center;
  width: 29rem;
  max-width: 46%;
  height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid rgba(82,138,224,.45);
  border-radius: 2rem;
  background: rgba(5,9,18,.84);
  backdrop-filter: blur(16px);
}
.canvas-toolbar span { width: .45rem; height: .45rem; border-radius: 50%; background: #3a8fff; opacity: .6; }
.canvas-toolbar i { height: 1px; flex: 1; margin-left: .55rem; background: linear-gradient(90deg, rgba(91,151,240,.65), transparent); }

.focus-marker {
  position: absolute;
  z-index: 6;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(101, 177, 255, .92);
  border-radius: 50%;
  color: white;
  background: rgba(8, 43, 91, .7);
  box-shadow: 0 0 24px rgba(52, 145, 255, .6);
}
.focus-marker b { font-size: 1rem; font-weight: 400; }
.marker-identity { left: 34%; top: 35%; }
.marker-light { left: 54%; top: 27%; }

.direction-message {
  position: absolute;
  z-index: 8;
  right: 5.5%;
  padding: .9rem 1.15rem;
  border: 1px solid rgba(64,148,255,.55);
  border-radius: 1.05rem;
  color: #e0edff;
  background: rgba(6,11,22,.94);
  box-shadow: 0 1.15rem 2.4rem rgba(0,20,77,.42);
  font-size: .86rem;
  line-height: 1.5;
  backdrop-filter: blur(14px);
  will-change: transform, opacity;
}
.direction-message span { display: block; margin-bottom: .35rem; color: var(--blue); font-size: .62rem; letter-spacing: .14em; }
.message-identity { top: 18%; }
.message-light { top: 68%; }

.identity-map {
  position: absolute;
  z-index: 5;
  left: 17%;
  top: 22%;
  width: 29%;
  height: 54%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,113,220,.17), transparent 68%);
  will-change: transform, opacity;
}
.mapping-ring { position: absolute; inset: 10%; border: 1px solid rgba(62,155,255,.43); border-radius: 50%; box-shadow: inset 0 0 40px rgba(36,116,230,.12); }
.point { position: absolute; width: .48rem; height: .48rem; border-radius: 50%; background: #72c2ff; box-shadow: 0 0 16px #3a9fff; }
.p1 { left: 28%; top: 34%; } .p2 { left: 57%; top: 27%; } .p3 { left: 68%; top: 54%; } .p4 { left: 39%; top: 68%; }
.mapping-line { position: absolute; left: 30%; top: 36%; width: 31%; height: 1px; transform-origin: left; background: linear-gradient(90deg, #5eb7ff, rgba(94,183,255,.1)); }
.l1 { transform: rotate(-13deg); } .l2 { top: 38%; transform: rotate(43deg); width: 44%; }

.hero-footer {
  position: absolute;
  z-index: 12;
  left: calc(64px * var(--design-scale));
  right: calc(64px * var(--design-scale));
  top: var(--footer-top);
  display: flex;
  justify-content: space-between;
  color: #91a8ca;
  font-size: .62rem;
  letter-spacing: .035em;
}

.progress-rail {
  position: absolute;
  z-index: 20;
  right: 1.4rem;
  top: 50%;
  width: 1px;
  height: 22vh;
  transform: translateY(-50%);
  background: rgba(136,174,225,.16);
}
.progress-rail span { display: block; width: 1px; height: 28%; background: rgba(66,158,255,.82); }

.after-story {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #10254a, #020409 62%);
}
.after-story p { color: var(--blue); font-size: .7rem; letter-spacing: .16em; }
.after-story h2 { font-size: clamp(4rem, 8vw, 8rem); }

@media (max-width: 900px) {
  .site-chrome nav a:not(.apply) { display: none; }
  .site-chrome .apply { margin-left: 0; }
  .left-scrim { width: 100%; }
}

@media (max-width: 700px) {
  .site-chrome { font-size: 10px; padding: 22px 16px 0; }
  .hero-copy { left: 16px; top: 14svh; width: calc(100vw - 32px); text-align: left; }
  .hero-copy .eyebrow { font-size: 14px; }
  .hero-copy h1 { margin-top: 18px; font-size: clamp(52px, 15vw, 70px); line-height: .96; }
  .dek { margin: 28px 0 0; font-size: 16px; line-height: 1.5; }
  .scroll-cue { margin: 32px 0 0; font-size: 11px; }
  .first-mark { left: 24px; top: 56svh; width: calc(100vw - 48px); padding: 0; text-align: left; }
  .chapter { font-size: 11px; }
  .first-mark h2 { font-size: 54px; }
  .first-mark > p:last-child { font-size: 16px; line-height: 1.55; }
  .ipad-scene { left: -20vw; top: 55svh; width: 130vw; }
  .canvas-stage { left: 5vw; top: 18svh; width: 90vw; height: auto; }
  .direction-message { font-size: 12px; padding: 10px 12px; border-radius: 12px; }
  .direction-message span { font-size: 9px; }
  .focus-marker { width: 34px; height: 34px; }
  .hero-footer { display: none; }
  .progress-rail { display: none; }
}

@media (max-aspect-ratio: 4 / 5) {
  .river-viewport {
    inset: 0;
    width: 100%;
    height: 100svh;
    transform: none;
    overflow: hidden;
  }

  .river-strip {
    top: 340px;
    left: 50%;
    width: 900px;
    height: 1710px;
    margin-left: -450px;
  }

  .left-scrim {
    background:
      linear-gradient(180deg, rgba(2,4,9,.46) 0%, rgba(2,4,9,.12) 42%, rgba(2,4,9,.78) 66%, #020409 84%, #020409 100%),
      radial-gradient(ellipse 110% 70% at 50% 22%, rgba(2,4,9,.18), rgba(2,4,9,.7) 78%, #020409 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
  .river-story { height: 100vh; }
  .first-mark, .ipad-scene, .canvas-stage { display: none; }
}