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

:root {
  --ink: #171715;
  --paper: #efede5;
  --paper-2: #e5e1d7;
  --muted: #9b9991;
  --accent: #f04424;
  --line: rgba(239, 237, 229, .22);
  --dark-line: rgba(23, 23, 21, .2);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-weight: 400; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--paper); }
.site-frame { width: 100%; overflow: hidden; }
.site-header {
  position: absolute; z-index: 20; top: 0; left: 0; width: 100%;
  padding: 27px 4.2vw; display: flex; align-items: center; justify-content: space-between;
  color: var(--paper);
}
.wordmark { display: flex; align-items: baseline; gap: 10px; letter-spacing: -.06em; }
.wordmark-main { font-size: 29px; font-weight: 300; line-height: 1; }
.wordmark-sub { font: 9px var(--mono); letter-spacing: .22em; }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 54px); }
.main-nav a, .hero-index, .eyebrow, .section-number, .hero-kicker, .project-type, .project-num, .contact-location, .site-footer > span {
  font: 9px var(--mono); letter-spacing: .11em; text-transform: uppercase;
}
.main-nav a { transition: color .25s ease; }
.main-nav a:hover, .footer-links a:hover { color: var(--accent); }
.nav-arrow { color: var(--accent); margin-left: 5px; }
.menu-toggle { display: none; }
.hero { position: relative; min-height: min(850px, 100svh); min-height: max(700px, 100svh); display: flex; flex-direction: column; justify-content: space-between; padding: 155px 4.2vw 35px; isolation: isolate; }
.hero-image, .hero-shade { position: absolute; inset: 0; z-index: -2; }
.hero-image {
  background: #35342e url("../assets/images/6NS_K20.png") center 54% / cover no-repeat;
  filter: saturate(.55) contrast(1.08);
}
.hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(13,13,12,.82) 0%, rgba(13,13,12,.43) 43%, rgba(13,13,12,.08) 100%), linear-gradient(0deg, rgba(13,13,12,.48), transparent 38%); }
.hero-topline, .hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 11px; }
.eyebrow i { display: inline-block; width: 23px; height: 1px; background: var(--accent); }
.hero-index { color: rgba(239,237,229,.72); }
.hero-title-wrap { position: relative; margin-top: auto; margin-bottom: 35px; }
.hero-kicker { color: rgba(239,237,229,.7); margin: 0 0 17px 4px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(66px, 10.7vw, 160px); line-height: .86; letter-spacing: -.085em; font-weight: 300; max-width: 1000px; margin: 0; position: relative; z-index: 1; }
h1 span { color: var(--accent); }
.hero-giant { position: absolute; z-index: -1; top: 15%; right: 3%; font-size: clamp(150px, 31vw, 450px); font-weight: 700; line-height: .8; letter-spacing: -.12em; color: rgba(239,237,229,.075); pointer-events: none; }
.hero-copy { font-size: 12px; line-height: 1.8; color: rgba(239,237,229,.82); margin: 0; }
.text-link { display: inline-flex; gap: 25px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--dark-line); font-size: 11px; transition: color .25s, border-color .25s; width: fit-content; }
.text-link span { color: var(--accent); font-size: 17px; transition: transform .25s; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.text-link:hover span { transform: translate(3px, -3px); }
.light-link { border-color: rgba(239,237,229,.45); }
.hero-count { display: flex; gap: 12px; align-items: center; font: 9px var(--mono); position: absolute; right: 4.2vw; bottom: 39px; }
.hero-count b { display: block; width: 45px; height: 1px; background: var(--accent); }
.crosshair { position: absolute; font-weight: 200; font-size: 25px; color: rgba(239,237,229,.65); }
.crosshair-one { right: 8%; top: 37%; }
.section-grid { display: grid; grid-template-columns: 1fr 2fr; }
.intro { background: var(--paper); color: var(--ink); padding: 130px 8.4vw 145px 4.2vw; gap: 8vw; }
.section-number { color: var(--muted); display: block; }
.intro-mark { margin-top: 110px; font-size: 90px; letter-spacing: -.12em; font-weight: 300; color: var(--accent); }
.intro-mark span { font-weight: 600; }
.intro-main { max-width: 750px; }
.dark-eyebrow { color: #55534d; }
h2 { font-size: clamp(42px, 6.3vw, 88px); line-height: .96; letter-spacing: -.075em; font-weight: 300; }
.intro h2 { margin: 35px 0 40px; }
h2 em { font-style: normal; color: var(--accent); }
.intro-bottom { display: flex; justify-content: space-between; align-items: end; gap: 35px; }
.intro-bottom p { max-width: 410px; font-size: 13px; line-height: 1.9; color: #5b5952; margin: 0; }
.intro-bottom .text-link { flex-shrink: 0; }
.projects { background: var(--paper); color: var(--ink); padding: 30px 4.2vw 125px; }
.projects-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 55px; }
.projects-heading h2 { margin: 28px 0 0; font-size: clamp(42px, 5.8vw, 76px); }
.projects-heading > p { color: #77746d; font-size: 11px; line-height: 1.8; margin: 0 5vw 7px 0; }
.project { display: block; position: relative; }
.project-image { background-size: cover; background-position: center; filter: saturate(.68); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s; }
.project:hover .project-image { transform: scale(1.025); filter: saturate(.95); }
.project-large { width: 78%; margin-left: auto; }
.project-large .project-image { height: clamp(300px, 53vw, 700px); }
.project-image-one { background-image: url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1800&q=85"); }
.project-image-two { background-image: url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=85"); }
.project-image-three { background-image: url("https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1200&q=85"); }
.project-caption { display: grid; grid-template-columns: 35px 1fr auto 25px; gap: 15px; align-items: baseline; padding: 15px 0 0; }
.project-num { color: var(--accent); }
.project-name { font-size: 16px; letter-spacing: -.04em; }
.project-type { color: #858178; font-size: 8px; }
.project-arrow { font-size: 19px; transition: transform .25s; }
.project:hover .project-arrow { transform: translate(3px,-3px); color: var(--accent); }
.project-pair { display: grid; grid-template-columns:  .82fr 1fr; gap: 8vw; width: 78%; margin-top: 110px; }
.project-small .project-image { height: clamp(260px, 37vw, 490px); }
.project-offset { margin-top: 135px; }
.image-note { text-align: right; color: #8c8880; font: 8px var(--mono); margin: 38px 0 0; }
.approach { grid-template-columns: 1fr 1fr; background: #20201d; color: var(--paper); min-height: 650px; }
.approach-image { min-height: 650px; background: linear-gradient(0deg,rgba(0,0,0,.12),rgba(0,0,0,.12)), url("https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1400&q=85") center / cover; filter: grayscale(.75) contrast(1.05); }
.approach-content { padding: 95px 8vw 90px 7vw; display: flex; flex-direction: column; align-items: start; }
.approach-content h2 { margin: 55px 0 35px; }
.approach-content > p { max-width: 400px; font-size: 12px; line-height: 1.9; color: #b5b2a9; }
.values { display: flex; flex-wrap: wrap; gap: 22px; border-top: 1px solid var(--line); width: 100%; margin-top: auto; padding-top: 20px; color: #b5b2a9; font: 8px var(--mono); letter-spacing: .12em; }
.contact { position: relative; overflow: hidden; background: var(--accent); color: var(--ink); padding: 55px 4.2vw 75px; min-height: 520px; }
.contact-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.contact .section-number, .contact-location { color: rgba(23,23,21,.7); }
.contact h2 { font-size: clamp(72px, 12vw, 170px); margin: 95px 0 50px; position: relative; z-index: 1; }
.contact h2 span { color: var(--paper); }
.contact-bottom { display: flex; justify-content: space-between; align-items: end; position: relative; z-index: 1; }
.contact-bottom p { font-size: 12px; line-height: 1.8; margin: 0; }
.contact-link { font-size: 12px; display: inline-flex; gap: 30px; align-items: center; border-bottom: 1px solid rgba(23,23,21,.55); padding-bottom: 10px; }
.contact-link span { font-size: 20px; }
.contact-graphic { position: absolute; right: -2%; bottom: -26%; font-size: clamp(180px, 37vw, 500px); line-height: .8; letter-spacing: -.14em; font-weight: 700; color: rgba(23,23,21,.08); pointer-events: none; }
.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 25px; align-items: center; padding: 24px 4.2vw; background: var(--ink); color: var(--paper); }
.footer-wordmark { font-size: 20px; letter-spacing: -.07em; }
.footer-wordmark span { font: 8px var(--mono); letter-spacing: .12em; }
.site-footer > span { color: #88867e; font-size: 8px; }
.footer-links { display: flex; gap: 20px; font-size: 10px; }
.footer-links a { transition: color .2s; }
.copyright { text-align: right; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .site-header { padding: 22px 6vw; }
  .wordmark-main { font-size: 25px; }
  .menu-toggle { display: flex; flex-direction: column; gap: 5px; background: transparent; border: 0; padding: 10px 0 10px 10px; color: var(--paper); }
  .menu-toggle span:not(.sr-only) { width: 25px; height: 1px; background: currentColor; display: block; }
  .main-nav { display: none; position: absolute; top: 68px; left: 0; width: 100%; padding: 28px 6vw 32px; background: var(--ink); flex-direction: column; align-items: flex-start; gap: 24px; }
  .main-nav.is-open { display: flex; }
  .hero { min-height: 780px; padding: 120px 6vw 32px; }
  .hero-topline { align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero-index { font-size: 8px; }
  h1 { font-size: clamp(60px, 16vw, 105px); }
  .hero-giant { top: 27%; right: -4%; font-size: 43vw; }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 23px; }
  .hero-count { right: 6vw; bottom: 38px; }
  .intro { grid-template-columns: 1fr; padding: 75px 6vw 85px; gap: 45px; }
  .intro-mark { display: none; }
  .intro h2 { margin: 30px 0; }
  .intro-bottom { align-items: flex-start; flex-direction: column; gap: 25px; }
  .projects { padding: 65px 6vw 80px; }
  .projects-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 35px; }
  .projects-heading > p { margin: 0; }
  .project-large, .project-pair { width: 100%; }
  .project-large .project-image { height: 65vw; min-height: 250px; }
  .project-caption { grid-template-columns: 25px 1fr 20px; gap: 9px; }
  .project-type { grid-column: 2; grid-row: 2; }
  .project-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .project-pair { grid-template-columns: 1fr; gap: 45px; margin-top: 55px; }
  .project-small .project-image { height: 75vw; }
  .project-offset { margin-top: 0; }
  .image-note { text-align: left; line-height: 1.7; }
  .approach { grid-template-columns: 1fr; }
  .approach-image { min-height: 65vw; }
  .approach-content { padding: 70px 6vw 65px; min-height: 520px; }
  .approach-content h2 { margin: 40px 0 30px; }
  .values { margin-top: 50px; gap: 14px; }
  .contact { padding: 35px 6vw 60px; min-height: 500px; }
  .contact-top { align-items: flex-start; flex-direction: column; gap: 12px; }
  .contact h2 { font-size: clamp(68px, 17vw, 110px); margin: 95px 0 40px; }
  .contact-bottom { align-items: flex-start; flex-direction: column; gap: 30px; }
  .contact-graphic { right: -7%; bottom: -10%; font-size: 60vw; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 20px; padding: 25px 6vw; }
  .site-footer > span:nth-child(2) { text-align: right; }
  .footer-links { flex-direction: column; gap: 8px; }
  .copyright { align-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}