:root {
  --ink: #151515;
  --paper: #f1f0ec;
  --accent: #ff5c35;
  --muted: #72716c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 24px 32px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.brand { font-size: 24px; font-weight: 600; letter-spacing: -0.08em; }
.brand-dot, .accent { color: var(--accent); }

nav { display: flex; gap: clamp(18px, 3vw, 46px); }
nav a { font-size: 14px; transition: opacity 180ms ease; }
nav a:hover { opacity: 0.55; }

.hero-scroll { height: 400vh; }

.hero-sticky {
  align-items: center;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(21,21,21,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(21,21,21,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  display: flex;
  height: 100svh;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.hero-copy { position: relative; text-align: center; z-index: 2; }

.eyebrow {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: center;
  letter-spacing: .14em;
  margin: 0 0 28px;
  text-transform: uppercase;
}

.eyebrow span { background: var(--accent); border-radius: 50%; height: 7px; width: 7px; }

h1 {
  font-size: clamp(4rem, 10vw, 9.5rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .88;
  margin: 0;
}

.intro {
  color: var(--muted);
  font-size: clamp(1.35rem, 3vw, 2.7rem);
  letter-spacing: -.04em;
  margin: clamp(24px, 4vh, 42px) 0 4px;
}

.word-stage {
  height: clamp(4.8rem, 10vw, 9.5rem);
  perspective: 900px;
  position: relative;
  width: min(92vw, 1100px);
}

.word {
  backface-visibility: hidden;
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  font-weight: 500;
  left: 0;
  letter-spacing: -.075em;
  line-height: 1;
  position: absolute;
  right: 0;
  transform-origin: center center -40px;
  will-change: transform, opacity;
}

.ambient {
  border-radius: 50%;
  filter: blur(1px);
  opacity: .9;
  position: absolute;
}

.journey-orb {
  background: var(--accent);
  border-radius: 50%;
  height: 200px;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate3d(0, 0, 0);
  width: 200px;
  will-change: width, height, transform, background-color, box-shadow, opacity;
  z-index: 1;
}

.ambient-two {
  border: 1px solid rgba(21,21,21,.22);
  bottom: -150px;
  height: 300px;
  left: -80px;
  width: 300px;
}

.scroll-cue {
  align-items: center;
  bottom: 28px;
  display: flex;
  font-size: 11px;
  gap: 12px;
  left: 32px;
  letter-spacing: .1em;
  position: absolute;
  text-transform: uppercase;
}

.scroll-line { background: rgba(21,21,21,.15); height: 1px; overflow: hidden; width: 72px; }
.scroll-line i { background: var(--ink); display: block; height: 100%; transform: scaleX(.15); transform-origin: left; width: 100%; }

.counter { bottom: 24px; font-size: 12px; margin: 0; position: absolute; right: 32px; }
#current-count { font-size: 20px; font-weight: 500; }

.portal-scroll {
  height: 680vh;
  margin-top: -1px;
  position: relative;
}

.portal-sticky {
  background: var(--paper);
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.portal-copy {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  will-change: opacity, transform;
  z-index: 2;
}

.portal-copy p {
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  letter-spacing: -.045em;
  margin: 0;
}

.portal-copy span {
  bottom: 28px;
  font-size: 11px;
  left: 50%;
  letter-spacing: .12em;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.black-hole {
  height: min(44vw, 540px);
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(.05);
  width: min(44vw, 540px);
  z-index: 4;
}

.singularity {
  background: #000;
  border-radius: 50%;
  box-shadow: 0 0 45px 12px rgba(255, 92, 53, .4), 0 0 0 0 #030303;
  inset: 21%;
  position: absolute;
}

.orbit {
  border: 2px solid transparent;
  border-radius: 50%;
  inset: 8%;
  position: absolute;
}

.orbit-one {
  border-top-color: #fff;
  box-shadow: 0 -4px 20px rgba(255,255,255,.7), inset 0 5px 14px rgba(255,92,53,.8);
  transform: rotate(-12deg) scaleY(.28);
}

.orbit-two {
  border-bottom-color: var(--accent);
  filter: blur(1px);
  inset: 3%;
  transform: rotate(7deg) scaleY(.2);
}

.orbit-three {
  border-left-color: rgba(255,255,255,.55);
  filter: blur(3px);
  inset: 0;
  transform: rotate(-3deg) scaleY(.34);
}

.project-universe {
  background: #030303;
  color: #f1f0ec;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

#project-canvas { display: block; height: 100%; width: 100%; }

.universe-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  inset: 0;
  mix-blend-mode: screen;
  opacity: .14;
  pointer-events: none;
  position: absolute;
}

.universe-ui {
  align-items: flex-end;
  display: flex;
  inset: 0;
  justify-content: space-between;
  padding: 28px 32px;
  pointer-events: none;
  position: absolute;
}

.universe-ui > div { align-self: flex-start; margin-top: 72px; }
.universe-kicker { align-items: center; display: flex; font-size: 11px; gap: 8px; letter-spacing: .13em; margin: 0 0 10px; text-transform: uppercase; }
.universe-kicker span { background: var(--accent); border-radius: 50%; height: 6px; width: 6px; }
.universe-ui h2 { font-size: clamp(1.4rem, 3vw, 2.8rem); font-weight: 400; letter-spacing: -.04em; margin: 0; }
.universe-help { color: #aaa; font-size: 11px; letter-spacing: .09em; margin: 0; text-transform: uppercase; }

.soundless-badge {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: #aaa;
  font: inherit;
  font-size: 10px;
  padding: 8px 12px;
  position: absolute;
  right: 32px;
  top: 26px;
}

.project-hover-label {
  background: #f1f0ec;
  border-radius: 999px;
  color: #151515;
  font-size: 11px;
  left: 0;
  letter-spacing: .04em;
  opacity: 0;
  padding: 10px 14px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(16px, 16px) scale(.88);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
  z-index: 7;
}

.project-hover-label.is-visible {
  opacity: 1;
  transform: translate(16px, 16px) scale(1);
}

.universe-exit {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 8;
}

.exit-light {
  background: #fffdf6;
  border-radius: 50%;
  box-shadow: 0 0 35px 12px rgba(255,255,240,.75), 0 0 110px 35px rgba(255,166,94,.35);
  height: 110px;
  position: absolute;
  transform: scale(.04);
  width: 110px;
  will-change: transform, box-shadow;
  z-index: 2;
}

.tunnel-ring {
  border: 1px solid rgba(255,232,202,.48);
  border-radius: 50%;
  height: 22vmin;
  opacity: 0;
  position: absolute;
  width: 22vmin;
  will-change: transform, opacity;
}

.ring-one { border-width: 2px; box-shadow: 0 0 20px rgba(255,92,53,.22); }
.ring-two { border-color: rgba(255,255,255,.28); }
.ring-three { border-color: rgba(255,92,53,.3); }
.ring-four { border-color: rgba(255,255,255,.16); }

.exit-message {
  bottom: 12vh;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  letter-spacing: .18em;
  margin: 0;
  opacity: 0;
  position: absolute;
  text-transform: uppercase;
}

.scene-fallback {
  display: grid;
  gap: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 560px);
}

.scene-fallback button {
  background: #111;
  border: 1px solid #333;
  color: #f1f0ec;
  cursor: pointer;
  font: inherit;
  padding: 22px;
  text-align: left;
}

.scene-ready .scene-fallback { display: none; }

.project-dialog {
  background: #efeee9;
  border: 0;
  color: var(--ink);
  margin: auto 0 0 auto;
  max-width: 560px;
  min-height: 55vh;
  padding: clamp(30px, 6vw, 72px);
  width: min(92vw, 560px);
}

.project-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.project-dialog[open] { animation: dialog-in 420ms cubic-bezier(.16,1,.3,1); }
.dialog-close { background: transparent; border: 0; cursor: pointer; font-size: 32px; position: absolute; right: 24px; top: 18px; }
.dialog-index { color: var(--accent); font-size: 11px; letter-spacing: .13em; margin: 0 0 50px; text-transform: uppercase; }
.project-dialog h2 { font-size: clamp(3rem, 6vw, 5rem); font-weight: 500; letter-spacing: -.065em; line-height: .9; margin: 0 0 14px; }
.dialog-category { color: #777; font-size: 13px; margin: 0 0 50px; }
.dialog-description { font-size: 17px; line-height: 1.55; max-width: 40ch; }
.project-dialog a { border-bottom: 1px solid #aaa; display: inline-flex; gap: 50px; margin-top: 38px; padding-bottom: 10px; }
.project-dialog a.is-disabled { color: #8b8982; cursor: default; pointer-events: none; }

@keyframes dialog-in { from { opacity: 0; transform: translateY(30px); } }

.about-section {
  background: #fffdf6;
  color: var(--ink);
  min-height: 125svh;
  overflow: hidden;
  padding: clamp(100px, 11vw, 180px) clamp(24px, 8vw, 140px) 70px;
  position: relative;
}

.about-heading { position: relative; z-index: 2; }
.section-label { align-items: center; color: #77756e; display: flex; font-size: 11px; gap: 18px; letter-spacing: .14em; margin: 0 0 clamp(45px, 7vw, 90px); text-transform: uppercase; }
.section-label span { color: var(--accent); }
.about-section h2 { font-size: clamp(3.2rem, 7.7vw, 8rem); font-weight: 400; letter-spacing: -.07em; line-height: .94; margin: 0; max-width: 12ch; }
.contact-dot { color: var(--accent); display: inline-block; opacity: 0; }

.about-photo { align-self: start; margin: 0; position: relative; z-index: 2; }
.about-photo > div { aspect-ratio: 3 / 4; background: #e8e6df; overflow: hidden; }
.about-photo img { display: block; height: 100%; object-fit: cover; object-position: center center; width: 100%; }
.about-photo figcaption { border-bottom: 1px solid rgba(21,21,21,.18); color: #77756e; display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .11em; padding: 13px 0; text-transform: uppercase; }
.about-photo figcaption span:last-child { color: var(--ink); }

.about-content {
  display: grid;
  gap: clamp(55px, 8vw, 130px);
  grid-template-columns: minmax(280px, .76fr) minmax(380px, 1.24fr);
  margin: clamp(100px, 15vw, 220px) 0 120px;
  position: relative;
  z-index: 2;
}

.about-copy { min-width: 0; padding-top: clamp(0px, 2vw, 28px); }
.about-intro { max-width: 590px; min-width: 0; }
.about-intro p { font-size: clamp(1.35rem, 2.4vw, 2.15rem); letter-spacing: -.04em; line-height: 1.23; margin: 0; }
.about-intro p + p { color: #77756e; margin-top: 1.2em; }
.about-principles { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(70px, 9vw, 130px); }

.about-principles article { border: 1px solid rgba(21,21,21,.18); display: flex; flex-direction: column; min-height: 270px; padding: 22px; }
.about-principles article > span { color: var(--accent); font-size: 10px; }
.about-principles article > div { margin-top: auto; min-height: 118px; }
.about-principles h3 { font-size: 18px; font-weight: 500; letter-spacing: -.025em; margin: 0 0 8px; }
.about-principles p { color: #77756e; font-size: 14px; line-height: 1.55; margin: 0; max-width: 44ch; }

.about-rings { height: min(58vw, 820px); opacity: .55; pointer-events: none; position: absolute; right: max(-30vw, -430px); top: 4%; width: min(58vw, 820px); }
.about-rings i { border: 1px solid rgba(21,21,21,.09); border-radius: 50%; inset: 0; position: absolute; }
.about-rings i:nth-child(2) { inset: 16%; }
.about-rings i:nth-child(3) { border-color: rgba(255,92,53,.24); inset: 34%; }

.contact-section {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(100px, 15vw, 220px) clamp(24px, 8vw, 140px);
  position: relative;
}

.contact-heading { position: relative; z-index: 1; }
.contact-location { align-items: center; color: #aaa9a4; display: flex; font-size: 11px; gap: 10px; letter-spacing: .12em; margin: 0 0 40px; text-transform: uppercase; }
.contact-location span { background: var(--accent); border-radius: 50%; height: 7px; width: 7px; }
.contact-section h2 { font-size: clamp(3.2rem, 8vw, 8rem); font-weight: 400; letter-spacing: -.065em; line-height: .95; margin: 0 0 clamp(80px, 11vw, 150px); }

.contact-email { align-items: center; border-bottom: 1px solid #565550; border-top: 1px solid #565550; display: flex; font-size: clamp(1.55rem, 4.6vw, 4.8rem); justify-content: space-between; letter-spacing: -.045em; padding: clamp(24px, 3vw, 42px) 0; position: relative; z-index: 1; }
.contact-email span:first-child { overflow-wrap: anywhere; }
.contact-email span:last-child { color: var(--accent); font-size: .55em; margin-left: 24px; }

.contact-links { display: grid; grid-template-columns: repeat(2, 1fr); position: relative; z-index: 1; }
.contact-links a { align-items: center; border-bottom: 1px solid #565550; display: flex; font-size: 15px; justify-content: space-between; padding: 24px 0; }
.contact-links a:first-child { border-right: 1px solid #565550; padding-right: 28px; }
.contact-links a:last-child { padding-left: 28px; }
.contact-links a span:last-child { color: #8f8e88; transition: color 180ms ease, transform 180ms ease; }
.contact-links a:hover span:last-child { color: var(--accent); transform: translate(3px, -3px); }

.contact-footer { color: #777670; display: grid; font-size: 10px; gap: 30px; grid-template-columns: 1fr 1fr auto; letter-spacing: .1em; margin-top: auto; padding-top: clamp(100px, 12vw, 170px); text-transform: uppercase; }
.contact-footer a { color: var(--paper); }

@media (max-width: 900px) {
  .about-content { gap: 80px; grid-template-columns: 1fr; }
  .about-photo { max-width: 480px; }
  .about-copy { padding-top: 0; }
}

@media (max-width: 600px) {
  .site-header { padding: 20px; }
  nav a:first-child { display: none; }
  .hero-sticky { background-size: 32px 32px; }
  .hero-copy { transform: translateY(-2vh); }
  h1 { font-size: clamp(3.6rem, 18vw, 5.8rem); line-height: .92; }
  .intro { font-size: 1.3rem; margin-top: 28px; }
  .word-stage { height: 5rem; width: 96vw; }
  .word { font-size: clamp(3rem, 15.5vw, 5rem); }
  .eyebrow { margin-bottom: 22px; }
  .ambient-two { bottom: -210px; left: -170px; }
  .scroll-cue { bottom: 22px; left: 20px; }
  .scroll-cue span { display: none; }
  .counter { bottom: 18px; right: 20px; }
  .black-hole { height: 76vw; width: 76vw; }
  .portal-copy p { max-width: 12ch; text-align: center; }
  .universe-ui { padding: 20px; }
  .universe-ui > div { margin-top: 55px; }
  .universe-help { font-size: 9px; max-width: 130px; text-align: right; }
  .soundless-badge { display: none; }
  .project-dialog { min-height: 64vh; }
  .about-section { min-height: 100svh; padding: 90px 20px 50px; width: 100%; }
  .about-section h2 { font-size: clamp(3.1rem, 14vw, 5rem); }
  .about-content { gap: 64px; grid-template-columns: minmax(0, 1fr); margin: 90px 0 70px; min-width: 0; width: 100%; }
  .about-photo { margin: 0 auto; max-width: 340px; width: 100%; }
  .about-photo figcaption { align-items: flex-start; flex-direction: column; gap: 6px; }
  .about-intro { max-width: 100%; width: 100%; }
  .about-intro p { font-size: 1.28rem; overflow-wrap: break-word; }
  .about-principles { gap: 10px; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); margin: 70px 0 0; overflow: visible; padding: 0; width: 100%; }
  .about-principles article { min-height: 230px; width: 100%; }
  .about-principles article > div { min-height: 118px; }
  .about-rings { height: 110vw; right: -62vw; top: 5%; width: 110vw; }
  .contact-section { min-height: 100svh; }
  .contact-section h2 { margin-bottom: 80px; }
  .contact-links { grid-template-columns: 1fr; }
  .contact-links a:first-child { border-right: 0; padding-right: 0; }
  .contact-links a:last-child { padding-left: 0; }
  .contact-footer { gap: 16px; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .word { transition: none; }
  .project-dialog[open] { animation: none; }
}