:root {
  color-scheme: light;
  --paper: #efeee8;
  --paper-deep: #e4e1d8;
  --ink: #11120f;
  --muted: #666760;
  --rule: rgba(17, 18, 15, 0.22);
  --lime: #52680b;
  --night: #10110f;
  --night-ink: #f1f0ea;
  --night-muted: #aaa9a3;
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); }
body { min-width: 320px; }
a { color: inherit; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.skip-link {
  position: fixed; z-index: 20; top: .75rem; left: .75rem; display: inline-flex; min-height: 2.75rem;
  align-items: center; padding: .75rem 1rem; background: var(--ink); color: white; transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
main { width: 100%; }

.hero {
  position: relative; min-height: max(680px, 100svh); overflow: hidden; padding: var(--pad); isolation: isolate;
}
.maker-mark {
  position: absolute; z-index: 3; top: var(--pad); left: var(--pad); color: var(--lime);
  font-size: 1rem; font-weight: 800; letter-spacing: -.06em;
}
.arrival-mark {
  position: absolute; z-index: -1; top: 9%; right: -.08em; color: rgba(17, 18, 15, .035);
  font-size: clamp(18rem, 43vw, 43rem); font-weight: 800; letter-spacing: -.17em; line-height: .65;
  pointer-events: none; transform-origin: right center; animation: mark-arrival 900ms cubic-bezier(.22, 1, .36, 1) both;
}
.hero-name { position: absolute; z-index: 1; top: 12%; right: var(--pad); left: var(--pad); }
.hero-name h1 {
  width: min-content; margin: 0; font-size: clamp(11rem, 27vw, 27rem); font-weight: 650;
  letter-spacing: -.115em; line-height: .57; animation: name-arrival 700ms 100ms cubic-bezier(.22, 1, .36, 1) both;
}
.hero-name h1 span { display: block; }
.name-forms {
  position: absolute; z-index: 2; top: 1.2rem; right: 0; display: flex; align-items: baseline;
  gap: clamp(1.2rem, 3vw, 3.5rem); margin: 0;
}
.name-forms span:first-child { font-size: clamp(2rem, 4vw, 4.25rem); font-weight: 570; letter-spacing: -.06em; }
.name-forms span:last-child {
  color: var(--muted); font: 650 .72rem/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .13em; text-transform: uppercase;
}
.hero-statement {
  position: absolute; z-index: 2; right: var(--pad); bottom: clamp(4rem, 8vh, 7rem); width: min(45rem, 50vw);
}
.hero-identity {
  margin: 0; font-size: clamp(2.4rem, 5vw, 5.2rem); font-weight: 520; letter-spacing: -.065em; line-height: .94;
}
.hero-role {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; font-size: .78rem; font-weight: 720;
  letter-spacing: .08em; line-height: 1.5; text-transform: uppercase;
}
.hero-note { max-width: 31rem; margin: .85rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.down-link {
  position: absolute; z-index: 3; bottom: var(--pad); left: var(--pad); display: inline-flex; min-height: 2.75rem;
  align-items: center; gap: 1rem; border-bottom: 1px solid var(--ink); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-decoration: none; text-transform: uppercase;
}

.eyebrow, .subhead, .case-index, .end-note {
  font: 650 .66rem/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.case-study { background: var(--night); padding: clamp(6rem, 11vw, 11rem) var(--pad); color: var(--night-ink); }
.case-intro {
  display: grid; grid-template-columns: minmax(7rem, .22fr) minmax(28rem, 1.28fr) minmax(18rem, .5fr);
  align-items: end; gap: clamp(2rem, 6vw, 7rem);
}
.eyebrow { margin: 0; color: #a6c929; }
.case-intro h2 {
  max-width: 60rem; margin: 0; font-size: clamp(5.5rem, 12vw, 12rem); font-weight: 600;
  letter-spacing: -.1em; line-height: .76;
}
.case-intro-copy p { max-width: 32rem; margin: 0; color: var(--night-muted); font-size: .94rem; line-height: 1.68; }
.project-link {
  display: inline-flex; min-height: 2.75rem; align-items: center; gap: .6rem; margin-top: 1.75rem;
  border-bottom: 1px solid rgba(241, 240, 234, .58); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-decoration: none; text-transform: uppercase;
}
.project-link:hover { color: #cfff33; }
.work-frame { margin: clamp(5rem, 9vw, 9rem) calc(var(--pad) * -1) 0; }
.work-frame img {
  display: block; width: 100%; max-height: 78svh; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.78);
}
.work-frame figcaption {
  margin: 1rem var(--pad) 0; color: var(--night-muted);
  font: .64rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase;
}
.ownership {
  max-width: 75rem; margin: clamp(5rem, 9vw, 9rem) 0; font-size: clamp(3rem, 6.6vw, 6.6rem);
  font-weight: 510; letter-spacing: -.07em; line-height: .93;
}
.case-rows { border-top: 1px solid rgba(241, 240, 234, .24); }
.case-row {
  display: grid; grid-template-columns: minmax(3rem, .14fr) minmax(12rem, .5fr) minmax(20rem, 1.36fr);
  align-items: baseline; gap: clamp(1rem, 4vw, 4rem); border-bottom: 1px solid rgba(241, 240, 234, .24);
  padding: clamp(1.5rem, 2.8vw, 2.5rem) 0;
}
.case-index { color: #a6c929; }
.case-row h3 {
  margin: 0; font-size: clamp(2.2rem, 4.4vw, 4.3rem); font-weight: 560; letter-spacing: -.065em; line-height: .92;
}
.case-row p { max-width: 47rem; margin: 0; color: var(--night-muted); line-height: 1.7; }

.path { background: var(--paper); padding: clamp(6rem, 11vw, 11rem) var(--pad); }
.path-intro {
  display: grid; grid-template-columns: minmax(7rem, .23fr) minmax(18rem, .67fr) minmax(20rem, 1.1fr);
  align-items: end; gap: clamp(2rem, 6vw, 7rem);
}
.path-intro .eyebrow, .now-intro .eyebrow { color: var(--lime); }
.path-intro h2, .now-intro h2 {
  margin: 0; font-size: clamp(5rem, 11vw, 11rem); font-weight: 610; letter-spacing: -.1em; line-height: .75;
}
.path-intro > p:last-child {
  max-width: 40rem; margin: 0; color: var(--muted); font-size: clamp(1.3rem, 2.6vw, 2.6rem);
  letter-spacing: -.04em; line-height: 1.12;
}
.path-sequence { margin-top: clamp(5rem, 10vw, 10rem); }
.subhead { margin: 0 0 1.5rem; color: var(--muted); }
.education, .earlier, .now-list { margin: 0; padding: 0; border-top: 1px solid var(--rule); list-style: none; }
.education li {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem;
  border-bottom: 1px solid var(--rule); padding: clamp(1.8rem, 4vw, 3.5rem) 0;
}
.education strong {
  font-size: clamp(2.8rem, 7vw, 7rem); font-weight: 570; letter-spacing: -.075em; line-height: .88;
}
.education span { max-width: 28rem; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.earlier-block { width: min(72rem, 82%); margin: clamp(6rem, 11vw, 11rem) 0 0 auto; }
.earlier li {
  display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid var(--rule); padding: 1.35rem 0 1.55rem;
}
.earlier li > span { color: var(--lime); font: 700 .65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.earlier p { margin: 0; font-size: clamp(1.5rem, 3.2vw, 3rem); letter-spacing: -.05em; line-height: 1.05; }

.now {
  display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: clamp(3rem, 9vw, 10rem);
  border-top: 1px solid var(--rule); background: var(--paper-deep); padding: clamp(5rem, 8vw, 8rem) var(--pad);
}
.now-intro { display: grid; gap: 1.5rem; }
.now-intro h2 { font-size: clamp(4.5rem, 9vw, 8.5rem); }
.now-list li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; border-bottom: 1px solid var(--rule); padding: 1.4rem 0 1.6rem;
}
.now-list li > span { color: var(--lime); font: 700 .65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.now-list p { max-width: 36rem; margin: 0; font-size: clamp(1.15rem, 2.1vw, 2rem); letter-spacing: -.035em; line-height: 1.16; }
.end-note {
  display: grid; min-height: 9rem; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  border-top: 1px solid var(--rule); padding: 1.5rem var(--pad);
}
.end-note span:first-child { color: var(--lime); font-size: 1rem; font-weight: 800; letter-spacing: -.06em; text-transform: lowercase; }
.end-note span:nth-child(2) { justify-self: center; color: var(--muted); }
.end-note span:last-child { justify-self: end; }

@keyframes mark-arrival {
  from { opacity: 0; transform: scale(1.08) translateX(4%); }
  to { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes name-arrival {
  from { opacity: 0; transform: translateY(1.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 64rem) {
  .hero-name h1 { font-size: clamp(11rem, 30vw, 20rem); }
  .hero-statement { width: min(38rem, 54vw); }
  .case-intro { grid-template-columns: minmax(6rem, .2fr) minmax(22rem, .8fr); }
  .case-intro h2 { line-height: .82; }
  .case-intro-copy { grid-column: 2; }
  .path-intro { grid-template-columns: minmax(6rem, .2fr) minmax(18rem, .8fr); }
  .path-intro > p:last-child { grid-column: 2; }
}

@media (max-width: 47.99rem) {
  :root { --pad: 1.25rem; }
  .hero {
    display: flex; min-height: max(720px, 100svh); flex-direction: column;
    padding-top: 5.5rem;
  }
  .maker-mark { top: 1.5rem; right: var(--pad); left: auto; }
  .arrival-mark { top: 13%; font-size: 19rem; }
  .hero-name { position: relative; top: auto; right: auto; left: auto; margin-top: clamp(1rem, 5vh, 3rem); }
  .hero-name h1 { font-size: clamp(10rem, 49vw, 12rem); line-height: .61; }
  .name-forms {
    position: static; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0;
  }
  .name-forms span:first-child { font-size: 1.75rem; }
  .hero-statement {
    position: relative; right: auto; bottom: auto; left: auto; width: auto;
    margin-top: auto; padding-top: 3rem;
  }
  .hero-identity { max-width: 22rem; font-size: clamp(2.4rem, 12vw, 3.3rem); }
  .hero-role { margin-top: 1.35rem; font-size: .68rem; }
  .hero-note { max-width: 20rem; font-size: .72rem; }
  .down-link { position: relative; bottom: auto; left: auto; align-self: flex-start; margin-top: 2rem; }
  .case-study, .path { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .case-intro, .path-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-intro-copy, .path-intro > p:last-child { grid-column: 1; }
  .case-intro h2, .path-intro h2 { font-size: clamp(4.5rem, 22vw, 6.5rem); }
  .case-intro h2 { line-height: .82; }
  .work-frame { margin-top: 4.5rem; }
  .work-frame img { min-height: 25rem; object-position: center; }
  .ownership { margin: 4.5rem 0; font-size: clamp(2.8rem, 13vw, 4rem); }
  .case-row { grid-template-columns: 2.5rem 1fr; gap: .75rem; padding: 1.65rem 0 1.85rem; }
  .case-row p { grid-column: 2; }
  .path-intro > p:last-child { font-size: 1.4rem; }
  .path-sequence { margin-top: 4.5rem; }
  .education li { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .education strong { font-size: clamp(2.8rem, 14vw, 4rem); }
  .earlier-block { width: 100%; margin-top: 5.5rem; }
  .earlier p { font-size: 1.5rem; }
  .now { grid-template-columns: 1fr; gap: 3rem; padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .now-intro { gap: 1rem; }
  .now-intro h2 { font-size: 5rem; }
  .end-note { min-height: 10rem; grid-template-columns: 1fr auto; align-content: center; }
  .end-note span:nth-child(2) { justify-self: end; }
  .end-note span:last-child { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important; animation-name: none !important; transition-duration: .01ms !important;
  }
}