:root {
  --ink: #080a09;
  --paper: #f2f1e9;
  --lime: #b8ef00;
  --soft-lime: #d9ff62;
  --line: rgba(242, 241, 233, 0.18);
  --muted: rgba(242, 241, 233, 0.62);
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Avenir Next", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: 0.04;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

a { color: inherit; }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: var(--lime);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 4rem);
  transition: background 180ms ease, backdrop-filter 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(8, 10, 9, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }

nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); }

nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-contact { padding: 0.62rem 1rem; color: var(--ink); background: var(--lime); border-radius: 2rem; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  min-height: 100svh;
  padding: 8rem clamp(1.25rem, 7vw, 8rem) 4rem;
  overflow: hidden;
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 74% 45%, rgba(184, 239, 0, 0.12), transparent 23%),
    radial-gradient(circle at 14% 13%, rgba(255, 255, 255, 0.04), transparent 24%);
}

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

.eyebrow, .section-meta, .kicker, .project-info > p, footer {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow { color: var(--muted); }

.signal {
  display: inline-block;
  width: 0.52rem;
  height: 0.52rem;
  margin-right: 0.55rem;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(184, 239, 0, 0.1);
  animation: pulse 2s ease-in-out infinite;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2 {
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.065em;
}

h1 { max-width: 10ch; font-size: clamp(4rem, 9vw, 9rem); }
h2 { font-size: clamp(4rem, 8vw, 8rem); }

em { color: var(--lime); font-family: Georgia, serif; font-weight: 400; }

.hero-intro {
  max-width: 35rem;
  margin-bottom: 2.1rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.text-link {
  display: inline-flex;
  gap: 1rem;
  padding-bottom: 0.35rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--lime);
}

.hero-mark { position: relative; z-index: 1; display: grid; place-items: center; }

.hero-mark img {
  width: min(40vw, 580px);
  filter: drop-shadow(0 0 80px rgba(184, 239, 0, 0.12));
  animation: float 7s ease-in-out infinite;
}

.hero-orbit {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(184, 239, 0, 0.25);
  border-radius: 50%;
  transform: rotate(-24deg);
}

.hero-orbit::after {
  position: absolute;
  top: 48%;
  left: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  content: "";
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--lime);
}

.orbit-one { top: 17%; right: 4%; width: 49vw; height: 34vw; }
.orbit-two { top: 22%; right: -7%; width: 62vw; height: 44vw; opacity: 0.35; }

.scroll-note {
  position: absolute;
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: 2rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.section-pad { padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 7vw, 8rem); }

.feature {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  color: var(--ink);
  background: var(--paper);
}

.feature-visual {
  position: relative;
  height: min(70vw, calc(100svh - 4rem), 750px);
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(155deg, #ced6d0 0%, #98a9a0 36%, #393f3d 72%, #151716 100%);
  isolation: isolate;
}

.feature-visual::after {
  position: absolute;
  inset: 0;
  z-index: 10;
  content: "";
  background: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.08) 50%);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}

.feature-visual > p {
  position: absolute;
  z-index: 12;
  bottom: 1rem;
  left: 1.2rem;
  margin: 0;
  color: rgba(255,255,255,.68);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sun {
  position: absolute;
  top: 14%;
  right: 12%;
  width: 32%;
  aspect-ratio: 1;
  background: #d7f17b;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: 0 0 90px rgba(215, 241, 123, .38);
}

.cloud { position: absolute; z-index: 3; height: 7%; background: rgba(229, 235, 227, .23); filter: blur(15px); border-radius: 50%; }
.cloud-a { top: 25%; left: 4%; width: 54%; transform: rotate(-7deg); }
.cloud-b { top: 39%; right: -8%; width: 68%; transform: rotate(4deg); }
.ridge { position: absolute; right: -12%; left: -12%; bottom: -12%; height: 62%; clip-path: polygon(0 60%, 15% 35%, 29% 54%, 47% 10%, 67% 50%, 82% 31%, 100% 55%, 100% 100%, 0 100%); }
.ridge-back { z-index: 4; bottom: 8%; background: #53615c; filter: blur(2px); }
.ridge-front { z-index: 5; background: #171c19; clip-path: polygon(0 68%, 18% 48%, 35% 62%, 55% 31%, 72% 54%, 87% 43%, 100% 60%, 100% 100%, 0 100%); }

.section-meta { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid currentColor; opacity: 0.67; }

.status { color: #527900; }
.status i { display: inline-block; width: .42rem; height: .42rem; margin-right: .35rem; background: currentColor; border-radius: 50%; }
.kicker { margin: 4rem 0 1.25rem; color: #587600; }
.feature-copy h2 { font-size: clamp(4rem, 7vw, 7.5rem); }
.feature-copy > p:not(.kicker):not(.copy-feedback) { max-width: 30rem; color: rgba(8,10,9,.63); font-size: 1.05rem; }

.quiet-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 3rem;
  padding: 1.1rem 0;
  color: var(--ink);
  background: transparent;
  font: 500 .73rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
}

.copy-feedback { min-height: 1.2rem; margin-top: .7rem; font: .65rem var(--mono); text-transform: uppercase; }

.work { background: #101311; }
.work-heading { display: grid; grid-template-columns: 1fr 1.5fr .75fr; gap: 2rem; align-items: end; margin-bottom: 6rem; }
.work-heading .section-meta { align-self: start; }
.work-heading h2 { margin: 0; font-size: clamp(3.2rem, 7vw, 7rem); }
.work-heading > p { margin: 0; color: var(--muted); font-size: .9rem; }

.project-list { border-top: 1px solid var(--line); }

.project {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  padding: 2rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.project-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transition: transform 320ms ease;
}

.project-art::before, .project-art::after { position: absolute; content: ""; transition: transform 550ms ease; }
.project-art.has-upload::before, .project-art.has-upload::after { display: none; }
.project:hover .project-art { transform: scale(.985); }
.project:hover .project-art::before { transform: rotate(7deg) scale(1.08); }

.project-resolution .project-art { background: #ed5c36; }
.project-resolution .project-art::before {
  inset: -34% 17%;
  background: repeating-conic-gradient(from 8deg, #f5d95f 0 8deg, #ef6d45 8deg 17deg, #5f3f91 17deg 25deg, #2194a8 25deg 33deg);
  border-radius: 50%;
  filter: saturate(1.1);
}
.project-resolution .project-art::after {
  top: 20%;
  left: 37%;
  width: 26%;
  height: 60%;
  background: #f7efe3;
  clip-path: polygon(48% 0, 63% 36%, 100% 48%, 63% 60%, 50% 100%, 37% 61%, 0 48%, 37% 36%);
  box-shadow: 0 0 54px rgba(247,239,227,.64);
}

.project-soda .project-art { background: #b1ddeb; }
.project-soda .project-art::before { inset: 21% 24%; background: #ff735f; border-radius: 50% 44% 53% 42%; box-shadow: -90px 42px 0 #ffe370, 104px 38px 0 #65a9cc; }
.project-soda .project-art::after { right: -5%; bottom: -30%; width: 70%; height: 70%; background: #4983b4; border-radius: 50%; }

.project-namoo .project-art { background: #f1b574; }
.project-namoo .project-art::before { bottom: -10%; left: 42%; width: 18%; height: 88%; background: #672f28; clip-path: polygon(38% 0, 65% 0, 59% 70%, 100% 100%, 0 100%, 42% 70%); }
.project-namoo .project-art::after { top: 9%; left: 31%; width: 40%; height: 45%; background: #cb5842; border-radius: 43% 57% 48% 52%; box-shadow: -52px 22px 0 #dc734a, 58px 25px 0 #bb493c; }

.project-nyssa .project-art { background: #32243f; }
.project-nyssa .project-art::before { inset: 14% 30%; background: #e675b5; border-radius: 50%; filter: blur(12px); box-shadow: 0 0 55px #9c58d4; }
.project-nyssa .project-art::after { top: 15%; left: 43%; width: 14%; height: 70%; background: #f3cddb; clip-path: polygon(50% 0, 72% 32%, 60% 65%, 100% 100%, 0 100%, 40% 65%, 28% 32%); }

.project-personal .project-art { background: #9ed4a4; }
.project-personal .project-art::before { top: 17%; left: 24%; width: 52%; height: 66%; background: #283c68; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.project-personal .project-art::after { top: 32%; left: 37%; width: 26%; height: 36%; background: #eff7b7; border-radius: 50%; box-shadow: 0 0 40px rgba(239,247,183,.7); }

.project-info > p { color: var(--muted); }
.project h3 { margin-bottom: .8rem; font-size: clamp(2rem, 4.5vw, 5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.project-info > span { display: flex; justify-content: space-between; color: var(--muted); font-size: .82rem; }
.project-info b { color: var(--lime); font-size: 1.1rem; }

.contact { text-align: center; background: var(--lime); color: var(--ink); }
.contact img { width: 88px; height: 88px; margin-bottom: 2rem; border-radius: 50%; }
.contact .eyebrow { color: rgba(8,10,9,.6); }
.contact h2 { max-width: 11ch; margin: 2rem auto 3rem; }
.contact h2 em { color: var(--ink); }
.contact > a { display: inline-block; padding: 1rem 1.2rem; font: .8rem var(--mono); letter-spacing: .05em; text-decoration: none; text-transform: uppercase; border: 1px solid var(--ink); }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 1.5rem; padding: 2rem clamp(1.25rem, 4vw, 4rem); color: var(--muted); }
footer p { margin: 0; }
footer a { text-decoration: none; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes pulse { 50% { opacity: .45; transform: scale(.82); } }
@keyframes float { 50% { transform: translateY(-16px) rotate(1deg); } }

@media (max-width: 850px) {
  nav a:not(.nav-contact) { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(9rem, 36vw); align-content: center; gap: 1.25rem 1rem; padding-top: 7.5rem; padding-bottom: 3rem; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .hero-copy h1 { grid-column: 1; grid-row: 2; align-self: center; max-width: none; margin: 0; font-size: clamp(2.8rem, 8vw, 4.5rem); }
  .hero-intro { grid-column: 1 / -1; grid-row: 3; max-width: 34rem; margin: 0; }
  .hero-copy .text-link { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
  .hero-mark { position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 2; align-self: center; opacity: 1; }
  .hero-mark img { width: 100%; max-width: 15rem; }
  .orbit-one { top: 30%; right: -28%; width: 82vw; height: 62vw; }
  .orbit-two { display: none; }
  .feature { grid-template-columns: 1fr; }
  .feature-visual { height: min(105vw, calc(100svh - 3rem)); min-height: 0; }
  .work-heading { grid-template-columns: 1fr; }
  .work-heading .section-meta { margin-bottom: 2rem; }
  .project { grid-template-columns: 1fr; gap: 1.4rem; }
  footer { flex-direction: column; }
}

@media (max-width: 520px) {
  .brand span { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(8rem, 40vw); }
  .hero-copy h1 { font-size: clamp(2.65rem, 12.5vw, 3.35rem); }
  .hero-intro { max-width: 100%; }
  .feature-copy .section-meta { gap: 1rem; }
  .contact h2 { font-size: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

.feature-visual.has-upload { padding: 0; }
.uploaded-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.reveal { opacity: 1; transform: none; }