:root {
  --paper: #f2efe7;
  --ink: #151515;
  --muted: #68665f;
  --line: rgba(21,21,21,.16);
  --acid: #d8f34e;
  --orange: #ff7048;
  --white: #fffdf7;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "DM Sans", Arial, sans-serif;
  --display: "Space Grotesk", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
::selection { background: var(--acid); color: var(--ink); }

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

.nav {
  width: min(1400px, calc(100% - 64px)); margin: 0 auto; height: 82px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); position: relative; z-index: 10;
}
.brand { font-family: var(--display); font-weight: 700; letter-spacing: -.08em; font-size: 1.35rem; }
.nav-links { display: flex; gap: 34px; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.nav-links a, .resume-link { transition: opacity .2s; }
.nav-links a:hover, .resume-link:hover { opacity: .5; }
.resume-link { font-family: var(--mono); font-size: .72rem; border-bottom: 1px solid; padding-bottom: 3px; }

.hero {
  width: min(1400px, calc(100% - 64px)); min-height: 790px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 7vw; align-items: center;
  padding: 70px 0 100px;
}
.hero-copy { padding-left: 4vw; }
.eyebrow, .section-kicker, .mono {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em;
  font-size: .68rem; line-height: 1.4;
}
.eyebrow { margin-bottom: 28px; }
h1 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.075em;
  font-size: clamp(4.2rem, 8vw, 8.8rem); line-height: .87; margin: 0;
}
h1 em, h2 em { font-family: var(--serif); font-weight: 400; }
.hero-text {
  max-width: 570px; margin: 42px 0 34px; font-size: 1.18rem; line-height: 1.55; color: #45433e;
}
.hero-text strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button {
  display: inline-flex; gap: 24px; align-items: center; padding: 15px 20px;
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  transition: transform .2s, background .2s;
}
.button:hover { transform: translateY(-3px); }
.button-dark { background: var(--ink); color: var(--white); }
.text-link { font-family: var(--mono); font-size: .72rem; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }

.hero-visual { position: relative; width: min(500px, 100%); justify-self: center; }
.portrait-frame { position: relative; background: #ddd; overflow: hidden; }
.portrait-frame img { aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.78) contrast(1.03); }
.stamp {
  position: absolute; top: 20px; right: 20px; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; background: var(--acid);
  font-family: var(--mono); font-size: .55rem; line-height: 1.25; transform: rotate(8deg);
}
.floating-note {
  position: absolute; bottom: -35px; left: -65px; width: 210px; padding: 18px;
  background: var(--white); border: 1px solid var(--line); box-shadow: 8px 8px 0 var(--ink);
}
.floating-note span { display:block; font-family: var(--mono); font-size:.6rem; text-transform:uppercase; margin-bottom:8px; color:var(--muted); }
.floating-note strong { font-family:var(--display); font-size:.9rem; line-height:1.2; }

.statement, .work, .capabilities, .about, .life, .education, .contact {
  width: min(1280px, calc(100% - 64px)); margin: 0 auto;
}
.statement { padding: 150px 0 180px; border-top: 1px solid var(--line); }
.statement h2, .capabilities h2 {
  max-width: 950px; font-family: var(--display); font-weight: 500; letter-spacing: -.065em;
  font-size: clamp(3rem, 6.5vw, 7rem); line-height: .94; margin: 30px 0 70px;
}
.statement h2 span { font-family: var(--serif); font-style: italic; font-weight: 400; }
.statement-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10vw; margin-left: 25%; }
.statement-grid p { max-width: 420px; font-size: 1rem; line-height: 1.7; color: #55524b; }

.work { padding-bottom: 180px; }
.section-head { display:flex; justify-content:space-between; align-items:end; padding-bottom:20px; border-bottom:1px solid var(--line); }
.muted { color: var(--muted); font-family:var(--mono); font-size:.67rem; }
.case {
  display:grid; grid-template-columns: 70px 1fr 180px; gap: 40px; padding: 65px 0;
  border-bottom: 1px solid var(--line); min-height: 330px;
}
.case-index { font-family:var(--mono); font-size:.72rem; }
.case-main { display:grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.case-title .mono { color:var(--muted); margin:0 0 18px; }
.case-title h3 { font-family:var(--display); font-weight:500; letter-spacing:-.055em; font-size:clamp(2.2rem, 4vw, 4.2rem); line-height:.94; margin:0; }
.case-copy { max-width: 440px; margin: 32px 0 0; color:#55524b; line-height:1.7; }
.tags { grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:7px; align-self:end; }
.tags span { border:1px solid var(--line); padding:7px 10px; font-family:var(--mono); font-size:.61rem; }
.case-side { border-left:1px solid var(--line); padding-left:28px; align-self:start; }
.number { font-family:var(--display); font-size:4rem; line-height:.9; letter-spacing:-.07em; }
.number span { font-family:var(--serif); }
.case-side p { color:var(--muted); font-size:.8rem; line-height:1.45; max-width:130px; }
.metric-card { background:var(--acid); padding:22px; border-left:0; }

.capabilities {
  padding: 150px 0; display:grid; grid-template-columns: 1fr 1.1fr; gap: 10vw;
  border-top:1px solid var(--line);
}
.capabilities h2 { font-size: clamp(3rem, 5.4vw, 6rem); margin-top:25px; }
.capability-list { border-top:1px solid var(--line); }
.capability-list > div {
  display:grid; grid-template-columns:40px 150px 1fr; gap:20px; padding:25px 0; border-bottom:1px solid var(--line);
}
.capability-list span { font-family:var(--mono); font-size:.62rem; color:var(--muted); }
.capability-list strong { font-family:var(--display); font-size:1.2rem; }
.capability-list p { margin:0; max-width:340px; color:#5c5952; font-size:.9rem; line-height:1.55; }

.about { display:grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; padding: 120px 0 170px; align-items:center; }
.about-image { width:min(470px,100%); }
.about-image img { aspect-ratio:4/5; object-fit:cover; filter:grayscale(.15); }
.about-copy h2 { font-family:var(--display); font-size:clamp(3rem,5vw,5.7rem); line-height:.95; letter-spacing:-.06em; font-weight:500; margin:25px 0 35px; }
.about-copy > p:not(.section-kicker) { max-width:540px; color:#55524b; line-height:1.7; margin:0 0 18px; }

.life { padding-bottom: 170px; }
.life-grid { display:grid; grid-template-columns: 1.1fr .9fr .9fr; gap:18px; padding-top:30px; align-items:stretch; }
.life-card { margin:0; position:relative; overflow:hidden; min-height:430px; background:#ddd; }
.life-card.tall { min-height:610px; }
.life-card img { height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.life-card:hover img { transform:scale(1.04); }
.life-card figcaption { position:absolute; bottom:0; left:0; right:0; padding:25px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.65)); display:flex; flex-direction:column; gap:5px; }
.life-card figcaption span { font-family:var(--mono); font-size:.6rem; }
.life-card figcaption strong { font-family:var(--display); font-size:1.1rem; }
.life-note { min-height:430px; padding:35px; background:var(--orange); display:flex; flex-direction:column; justify-content:space-between; }
.big-quote { font-family:var(--display); font-size:clamp(2rem,3vw,3.3rem); line-height:.98; letter-spacing:-.05em; margin:0; }
.life-note .mono { margin:0; font-size:.58rem; }

.education { padding: 80px 0 140px; border-top:1px solid var(--line); }
.facts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:45px; }
.facts div { border-left:1px solid var(--line); padding:0 25px; }
.facts strong { display:block; font-family:var(--display); font-size:2rem; letter-spacing:-.05em; }
.facts span { display:block; margin-top:8px; color:var(--muted); font-family:var(--mono); font-size:.62rem; }

.contact { background:var(--ink); color:var(--white); padding:90px 7vw 80px; margin-bottom:0; }
.contact .section-kicker { color:#aaa69b; }
.contact h2 { font-family:var(--display); font-weight:500; letter-spacing:-.065em; font-size:clamp(4rem,8vw,8.5rem); line-height:.84; margin:50px 0 60px; }
.contact h2 em { color:var(--acid); }
.email { display:inline-flex; gap:20px; align-items:center; font-family:var(--display); font-size:clamp(1.3rem,2.5vw,2.5rem); border-bottom:1px solid #6c6a64; padding-bottom:8px; }
.email span { color:var(--acid); }
.contact-meta { display:flex; gap:30px; margin-top:65px; color:#aaa69b; font-family:var(--mono); font-size:.63rem; text-transform:uppercase; flex-wrap:wrap; }
.footer {
  width:100%; background:var(--ink); color:#8e8b83; border-top:1px solid #353535;
  padding:25px max(32px, calc((100vw - 1280px)/2)); display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.58rem; text-transform:uppercase;
}

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }

@media (max-width: 900px) {
  .nav, .hero, .statement, .work, .capabilities, .about, .life, .education, .contact { width: min(100% - 36px, 700px); }
  .nav { height:70px; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding:75px 0 120px; gap:70px; }
  .hero-copy { padding-left:0; }
  h1 { font-size:clamp(4rem, 15vw, 7rem); }
  .hero-visual { width:min(480px, 90%); margin-left:auto; margin-right:5%; }
  .statement-grid { margin-left:0; }
  .case { grid-template-columns:40px 1fr; }
  .case-side { display:none; }
  .case-main { grid-template-columns:1fr; gap:10px; }
  .tags { margin-top:10px; }
  .capabilities { grid-template-columns:1fr; gap:55px; }
  .about { grid-template-columns:1fr; gap:60px; }
  .about-image { max-width:500px; }
  .life-grid { grid-template-columns:1fr 1fr; }
  .life-card.tall { min-height:520px; grid-row:span 2; }
  .life-note { min-height:250px; grid-column:2; }
  .facts { grid-template-columns:1fr 1fr; gap:35px 0; }
  .contact { width:100%; padding-left:28px; padding-right:28px; }
  .footer { flex-wrap:wrap; gap:15px; padding:25px 18px; }
}
@media (max-width: 600px) {
  .hero { padding-top:55px; }
  .hero-visual { width:92%; margin:0 auto; }
  .floating-note { left:-15px; bottom:-30px; }
  .statement { padding:110px 0 130px; }
  .statement h2, .capabilities h2 { font-size:3.1rem; }
  .statement-grid { grid-template-columns:1fr; gap:20px; }
  .case { padding:45px 0; grid-template-columns:1fr; }
  .case-index { margin-bottom:-20px; }
  .capability-list > div { grid-template-columns:30px 1fr; }
  .capability-list p { grid-column:2; }
  .life-grid { grid-template-columns:1fr; }
  .life-card.tall, .life-card { min-height:440px; grid-row:auto; }
  .life-note { grid-column:auto; min-height:300px; }
  .facts { grid-template-columns:1fr 1fr; }
  .facts div { padding-left:15px; }
  .contact h2 { font-size:4rem; }
}