@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #141412;
  --paper: #efeee8;
  --acid: #dfff63;
  --muted: #8b8b84;
  --rule: rgba(20, 20, 18, 0.22);
  --pad: clamp(1.25rem, 3vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link { position: fixed; z-index: 20; left: 1rem; top: -4rem; padding: .75rem 1rem; color: var(--ink); background: var(--acid); font: 500 .72rem/1 "DM Mono", monospace; text-transform: uppercase; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.55rem var(--pad); color: var(--paper); transition: background .25s, padding .25s, color .25s; }
.site-header.is-scrolled { padding-top: 1rem; padding-bottom: 1rem; background: rgba(20,20,18,.9); backdrop-filter: blur(12px); }
.brand { width: clamp(7.4rem, 10vw, 10.5rem); }
.brand img { width: 100%; }
.header-link, .text-link { text-decoration: none; font: 500 .7rem/1 "DM Mono", monospace; letter-spacing: .03em; text-transform: uppercase; }
.header-link span, .text-link span, .email span { display: inline-block; margin-left: .45em; transition: transform .2s; }
a:hover span { transform: translate(.2rem, .15rem); }

.eyebrow { font: 500 clamp(.6rem, .8vw, .7rem)/1.45 "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding: clamp(7rem, 16vh, 10rem) var(--pad) 2rem; color: var(--paper); background: var(--ink); isolation: isolate; overflow: hidden; }
.hero-grid { position: absolute; z-index: -2; inset: 0; opacity: .36; background-image: linear-gradient(rgba(239,238,232,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(239,238,232,.12) 1px, transparent 1px); background-size: clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 6rem); mask-image: linear-gradient(to bottom, black 0%, transparent 85%); }
.hero::after { position: absolute; z-index: -1; right: -19vw; bottom: -28vw; width: min(73vw, 65rem); aspect-ratio: 1; border: 1px solid rgba(223,255,99,.5); border-radius: 50%; content: ""; box-shadow: 0 0 0 7vw rgba(223,255,99,.05), 0 0 0 14vw rgba(223,255,99,.025); }
.hero-orbit { position: absolute; z-index: -1; top: 23%; right: 17%; width: min(22vw, 16rem); aspect-ratio: 1; border: 1px solid rgba(239,238,232,.6); border-radius: 50%; animation: orbit 12s linear infinite; }
.hero-orbit span { position: absolute; top: -4px; left: 49%; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); }
.hero-orbit i { position: absolute; top: 50%; left: -19%; width: 138%; border-top: 1px dashed rgba(239,238,232,.4); transform: rotate(-28deg); }
.hero-orbit b { position: absolute; right: 9%; bottom: 4%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); }
.hero-meta, .section-label, .perspective-note { display: flex; justify-content: space-between; gap: 1rem; }
.hero-content { max-width: 98rem; margin: auto 0; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 600; letter-spacing: -.075em; }
h1 { max-width: 13ch; font-size: clamp(4.25rem, 11vw, 11.5rem); line-height: .86; }
em { color: var(--acid); font-style: normal; }
.hero-content p { max-width: 33rem; margin: clamp(2rem, 4vw, 4rem) 0 0 max(0px, 33vw); font-size: clamp(1rem, 1.4vw, 1.32rem); line-height: 1.45; letter-spacing: -.025em; }
.scroll-prompt { display: flex; align-items: center; gap: .8rem; width: fit-content; color: var(--paper); text-decoration: none; }
.scroll-prompt i { width: 4rem; border-top: 1px solid var(--paper); }

.statement, .contact { padding: clamp(6rem, 13vw, 12rem) var(--pad) clamp(3rem, 5vw, 5rem); }
.section-label { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); color: #52524c; }
.statement-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 4rem; padding: clamp(4rem, 9vw, 8rem) 0; }
h2 { max-width: 11ch; font-size: clamp(3.2rem, 7.2vw, 8rem); line-height: .92; }
.statement h2 em { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acid); text-decoration-thickness: .07em; text-underline-offset: .08em; }
.statement-copy { align-self: end; max-width: 29rem; }
.statement-copy p, .contact-details > p { font-size: clamp(1rem, 1.3vw, 1.22rem); line-height: 1.5; letter-spacing: -.02em; }
.text-link { display: inline-block; margin-top: 2.5rem; padding-bottom: .55rem; border-bottom: 1px solid var(--ink); }
.disciplines { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.disciplines article { min-height: 18rem; padding: 1.25rem 2rem 1.25rem 0; border-right: 1px solid var(--rule); }
.disciplines article + article { padding-left: 2rem; }
.disciplines article:last-child { border-right: 0; }
.index { font: .7rem/1 "DM Mono", monospace; }
h3 { margin-top: 4.7rem; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.05; letter-spacing: -.055em; }
.disciplines p { max-width: 16rem; margin-top: 1.25rem; color: #5c5c57; font-size: .84rem; line-height: 1.5; }

.perspective { position: relative; min-height: 100svh; padding: clamp(5rem, 9vw, 8rem) var(--pad) 3rem; color: var(--paper); background: var(--ink); overflow: hidden; }
.perspective .section-label { position: relative; z-index: 1; color: rgba(239,238,232,.65); border-color: rgba(239,238,232,.25); }
.perspective-field { position: absolute; right: -7%; bottom: -16%; width: min(75vw, 67rem); aspect-ratio: 1; border: 1px solid rgba(223,255,99,.72); transform: rotate(-29deg); }
.field-line { position: absolute; display: block; inset: 20%; border: 1px solid rgba(239,238,232,.35); }
.line-two { inset: 35%; border-color: rgba(223,255,99,.6); }
.field-dot { position: absolute; top: 19%; right: 19%; width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 1rem rgba(223,255,99,.15), 0 0 0 5rem rgba(223,255,99,.05); }
.perspective-content { position: relative; z-index: 1; max-width: 74rem; padding-top: clamp(6rem, 17vw, 14rem); }
.kicker { margin-bottom: 2rem; color: var(--acid); font: 500 .7rem/1.55 "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.perspective h2 { max-width: 13ch; }
.perspective-copy { max-width: 31rem; margin: 3rem 0 0 max(0px, 38%); font-size: clamp(1rem, 1.35vw, 1.24rem); line-height: 1.5; letter-spacing: -.025em; }
.perspective-note { position: absolute; right: var(--pad); bottom: 2rem; left: var(--pad); color: rgba(239,238,232,.6); }

.contact { min-height: 88svh; background: var(--acid); }
.contact .section-label { border-color: rgba(20,20,18,.35); }
.contact-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; padding: clamp(5rem, 11vw, 10rem) 0; }
.contact h2 { font-size: clamp(4rem, 9vw, 9.5rem); }
.contact-details { align-self: end; max-width: 29rem; }
.email { display: inline-block; margin-top: 2.2rem; font-size: clamp(1.25rem, 2.15vw, 2rem); font-weight: 600; letter-spacing: -.05em; text-decoration: none; border-bottom: 2px solid var(--ink); }
.location { margin-top: 4rem; line-height: 1.6; }
footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(20,20,18,.35); }
footer img { width: clamp(6rem, 9vw, 9rem); }
footer a { text-decoration: none; }

:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.contact :focus-visible { outline-color: var(--ink); }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .hero { min-height: 46rem; }
  .hero-meta span:nth-child(2) { display: none; }
  .hero-content p { margin-left: 0; }
  .hero-orbit { top: 14%; right: 10%; width: 10rem; }
  .statement-layout, .contact-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .disciplines { grid-template-columns: 1fr; }
  .disciplines article, .disciplines article + article { min-height: auto; padding: 1.4rem 0 2rem; border-right: 0; border-bottom: 1px solid var(--rule); }
  h3 { margin-top: 2.8rem; }
  .perspective-copy { margin-left: 0; }
  .perspective { min-height: 45rem; }
  .perspective-field { right: -48%; bottom: -5%; width: 39rem; }
  footer { align-items: flex-start; flex-wrap: wrap; }
  footer p { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-orbit { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}