:root {
  --ink: #14120f;
  --paper: #dedbd4;
  --acid: #ffa602;
  --salmon: #b84c5a;
  --line: rgba(20, 18, 15, 0.22);
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.7rem 1rem;
  background: var(--acid);
  color: white;
}

.skip-link:focus { top: 1rem; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wordmark { display: flex; align-items: center; gap: 0.55rem; text-transform: lowercase; }
.wordmark-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--acid); }

nav { display: flex; gap: 1.4rem; }
nav a, .footer-bottom a { transition: color 180ms ease; }
nav a:hover, .footer-bottom a:hover { color: var(--salmon); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(300px, 1.06fr);
  min-height: min(830px, calc(100vh - 57px));
  overflow: hidden;
}

.hero-copy { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 4vw, 5rem) 4rem; }
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 25rem at var(--ambient-x, 105%) var(--ambient-y, 34%),
    rgba(255, 166, 2, 0.3) 0%,
    rgba(255, 166, 2, 0.15) 29%,
    transparent 66%
  );
  filter: blur(25px);
  pointer-events: none;
}
.hero-copy > * { position: relative; z-index: 1; }
.eyebrow { margin: 0; color: var(--salmon); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

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

h1 {
  max-width: 7ch;
  margin: auto 0 1.8rem;
  font-size: clamp(3.7rem, 8.6vw, 8.3rem);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.8;
}

h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -0.11em; }

.hero-intro { max-width: 28ch; margin-bottom: 0; font-size: 1rem; line-height: 1.35; }

.hero-image-wrap { position: relative; min-height: 28rem; background: #d58c6f; overflow: hidden; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 650ms cubic-bezier(.16,.8,.25,1); will-change: transform; }
.hero-image-wrap:hover .hero-image { transform: scale(1.13); }
.hero-index, .hero-caption { position: absolute; z-index: 2; bottom: 1.4rem; color: #fff7ec; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; }
.hero-index { left: 1.4rem; }
.hero-caption { right: 1.4rem; }
.scroll-cue { position: absolute; bottom: 1.4rem; left: clamp(1.5rem, 4vw, 5rem); font-size: 0.72rem; font-weight: 700; }
.scroll-cue span { display: inline-block; margin-left: 0.3rem; color: var(--acid); font-size: 1rem; }

.statement {
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr);
  gap: 2rem;
  padding: clamp(4.5rem, 11vw, 11rem) 8vw;
  background: var(--ink);
  color: var(--paper);
}

.statement p:last-child { max-width: 18ch; margin: 0; font-family: var(--serif); font-size: clamp(2.1rem, 4.3vw, 4.8rem); letter-spacing: -0.06em; line-height: 0.92; }

.work {
  position: relative;
  padding: clamp(5rem, 11vw, 12rem) 2.2rem 8rem;
  overflow: hidden;
  background-color: rgba(204, 199, 190, 0.42);
  background-image:
    linear-gradient(rgba(20, 18, 15, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 15, 0.045) 1px, transparent 1px);
  background-size: 4rem 4rem;
}
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: start; gap: 1rem; margin: 0 auto clamp(3rem, 7vw, 7rem); max-width: 1260px; }
h2 { margin: 0; font-size: clamp(2.8rem, 6vw, 6rem); font-weight: 500; letter-spacing: -0.08em; line-height: 0.84; }
.section-note { justify-self: end; max-width: 14ch; margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.25; }

.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.15rem; max-width: 1260px; margin: auto; }
.project { display: block; }
.project figure { margin: 0; overflow: hidden; background: #ded8d2; }
.project img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.65,.3,1); }
.project:hover img { transform: scale(1.035); }
.project-meta { padding: 0.75rem 0 2rem; }
.project-meta h3 { margin: 0 0 0.3rem; font-size: 0.98rem; font-weight: 700; }
.project-meta p { margin: 0; color: #6c625b; font-size: 0.76rem; }
.project-meta .project-type { margin-bottom: 0.42rem; color: var(--salmon); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.project-meta .project-summary { max-width: 31ch; margin-top: 0.48rem; color: #514a44; font-size: 0.79rem; line-height: 1.35; }
.project-link { display: inline-block; margin-top: 0.8rem; font-size: 0.74rem; font-weight: 700; }
.project-link span { color: var(--salmon); }
.project-reference { display: inline-block; margin: 0.8rem 0 0 0.8rem; color: var(--salmon); font-size: 0.74rem; font-weight: 700; }
.project-image-link { display: block; }
.project-large { grid-column: 1 / span 8; }
.project-large figure { aspect-ratio: 16 / 9; }
.project-tall { grid-column: 10 / span 3; margin-top: 12rem; }
.project-tall figure { aspect-ratio: 3 / 4; }
.project-blue { grid-column: 2 / span 4; margin-top: 2rem; }
.project-blue figure { aspect-ratio: 1 / 1; }
.project-nonplanar { grid-column: 7 / span 4; margin-top: 8rem; }
.project-nonplanar figure { aspect-ratio: 3 / 4; }
.project-motion-left { grid-column: 1 / span 5; margin-top: 5rem; }
.project-motion-right { grid-column: 7 / span 6; margin-top: 13rem; }
.project-motion-left figure { aspect-ratio: 4 / 3; }
.project-motion-right figure { aspect-ratio: 16 / 10; }

.media-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 1.1rem;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.media-slot::before, .media-slot::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.media-slot span { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.8rem); letter-spacing: -0.09em; line-height: 0.78; }
.media-slot small { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.media-slot-dark { background: #14120f; }
.media-slot-dark::before { width: 18rem; height: 18rem; top: -7rem; right: -3rem; border: 1px solid rgba(255, 166, 2, 0.8); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255, 166, 2, 0.07), 0 0 0 8rem rgba(255, 166, 2, 0.04); }
.media-slot-fluid { background: #65757a; }
.media-slot-fluid::before { width: 80%; height: 120%; left: -10%; bottom: -52%; background: var(--acid); border-radius: 48% 52% 20% 80% / 58% 40% 60% 42%; filter: blur(3px); transform: rotate(-16deg); }
.media-slot-fluid::after { width: 50%; height: 90%; right: -10%; top: -34%; border-radius: 50%; background: rgba(220, 240, 236, 0.58); filter: blur(20px); }

.archive-link { display: flex; align-items: baseline; justify-content: space-between; max-width: 1260px; margin: 5rem auto 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.archive-link p { margin: 0; font-size: 0.83rem; }
.archive-link a { color: #6c625b; font-size: 0.72rem; font-weight: 700; }
.archive-link a span { color: var(--salmon); }
.text-link { font-weight: 700; }
.text-link span { color: var(--salmon); }

.about { display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 47rem; background: #c9c6c2; }
.about-image { min-height: 30rem; }
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; }
.about-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(3rem, 8vw, 7rem); }
.about-copy h2 { margin: auto 0 2rem; max-width: 9ch; }
.about-copy > p:not(.eyebrow) { max-width: 32ch; line-height: 1.42; }

footer { padding: clamp(3rem, 7vw, 7rem) 2.2rem 1.7rem; background: var(--acid); color: var(--ink); }
.footer-mail { display: block; margin: clamp(3rem, 9vw, 8rem) 0; font-size: clamp(2.15rem, 6.4vw, 7rem); font-weight: 500; letter-spacing: -0.08em; line-height: 0.82; }
.footer-mail span { display: block; white-space: nowrap; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(20, 18, 15, 0.4); font-size: 0.72rem; font-weight: 700; }
.footer-bottom p { margin: 0; }

@media (max-width: 760px) {
  .site-header { padding: 1rem 1.15rem; }
  nav { gap: 0.8rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { min-height: 34rem; padding: 1.5rem 1.15rem 5rem; }
  h1 { font-size: clamp(4rem, 18vw, 6.5rem); }
  .hero-image-wrap { min-height: 23rem; }
  .scroll-cue { bottom: 1.5rem; left: 1.15rem; }
  .statement { grid-template-columns: 1fr; padding: 4.5rem 1.15rem; }
  .statement p:last-child { font-size: 2.65rem; }
  .work { padding: 5rem 1.15rem; }
  .section-heading { grid-template-columns: 1fr; gap: 1.4rem; }
  .section-note { justify-self: start; }
  .project-grid { display: block; }
  .project, .project-tall, .project-blue, .project-nonplanar, .project-motion-left, .project-motion-right { margin: 0; }
  .project figure, .project-tall figure, .project-blue figure, .project-nonplanar figure, .project-motion-left figure, .project-motion-right figure { aspect-ratio: 4 / 3; }
  .project-tall figure { aspect-ratio: 3 / 4; }
  .archive-link { display: block; margin-top: 3rem; }
  .archive-link a { display: inline-block; margin-top: 1.2rem; }
  .about { grid-template-columns: 1fr; min-height: auto; }
  .about-image { min-height: 25rem; }
  .about-copy { min-height: 32rem; padding: 3.5rem 1.15rem; }
  .footer-mail { font-size: clamp(2.15rem, 9.3vw, 3.1rem); }
}

.workdump { min-height: 100vh; padding: 0 2.2rem 7rem; }
.workdump-intro { display: grid; grid-template-columns: 1fr; padding: clamp(4rem, 10vw, 9rem) 0 clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--line); }
.workdump-intro h1 { max-width: 8ch; margin: 0; font-size: clamp(4rem, 9vw, 9rem); }
.workdump-list { max-width: 1260px; margin: 0 auto; }
.workdump-entry { display: grid; grid-template-columns: 0.5fr minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.workdump-number, .workdump-meta, .workdump-status { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.workdump-number, .workdump-meta { color: var(--salmon); }
.workdump-content { display: grid; grid-template-columns: minmax(11rem, 0.82fr) minmax(18rem, 1.35fr); column-gap: clamp(1.4rem, 4vw, 4rem); align-items: start; min-width: 0; }
.workdump-copy { min-width: 0; transform: translateX(calc(-1 * clamp(7rem, 14vw, 14rem))); }
.workdump-entry h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 0.88; }
.workdump-entry h2 a { transition: color 180ms ease; }
.workdump-entry h2 a:hover { color: var(--salmon); }
.workdump-entry p { max-width: 42ch; margin: 0.75rem 0 0; color: #514a44; font-size: clamp(0.95rem, 1.3vw, 1.12rem); line-height: 1.35; }
.workdump-meta { display: block; margin-top: 0.5rem; }
.workdump-status { padding: 0.35rem 0.5rem; border: 1px solid var(--line); color: #6c625b; white-space: nowrap; }
.workdump-status--selected { border-color: var(--salmon); color: var(--salmon); }
.workdump-thumb { display: block; width: 100%; height: clamp(13rem, 24vw, 21rem); margin: 0; overflow: hidden; background: #1c1a17; }
.workdump-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.workdump-thumb--video { display: flex; align-items: end; padding: 0.7rem; background: var(--ink); color: var(--paper); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 760px) {
  .workdump { padding: 0 1.15rem 4rem; }
  .workdump-intro { grid-template-columns: 1fr; padding: 3.5rem 0; }
  .workdump-entry { grid-template-columns: 2.1rem 1fr; gap: 0.55rem; }
  .workdump-content { grid-column: 2; display: block; }
  .workdump-copy { transform: none; }
  .workdump-entry p { margin-top: 0.55rem; }
  .workdump-meta { margin-top: 0.4rem; }
  .workdump-status { grid-column: 2; justify-self: start; margin-top: 0.25rem; }
  .workdump-thumb { width: 100%; height: 14rem; margin-top: 1rem; }
}

.project-page { min-height: 100vh; background: var(--paper); }
.back-link { display: inline-flex; margin: 1.4rem 2.2rem 0; color: var(--salmon); font-size: 0.72rem; font-weight: 700; }
.case-hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr); min-height: calc(100vh - 9rem); margin-top: 1.2rem; border-top: 1px solid var(--line); }
.case-copy { display: flex; flex-direction: column; padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 4vw, 5rem) 4rem; }
.case-title { max-width: 8ch; margin: auto 0 1.75rem; font-size: clamp(3.9rem, 8.5vw, 8rem); font-weight: 500; letter-spacing: -0.09em; line-height: 0.78; }
.case-lede { max-width: 31ch; margin: 0; font-size: 1rem; line-height: 1.4; }
.case-reference { display: inline-block; margin-top: 1.1rem; color: var(--salmon); font-size: 0.8rem; font-weight: 700; }
.case-media { position: relative; min-height: 30rem; margin: 0; overflow: hidden; background: #b7afa7; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-media figcaption { position: absolute; right: 1.25rem; bottom: 1.2rem; color: #fff8ee; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }
.case-media.media-slot { justify-content: flex-end; min-height: 100%; padding: 1.5rem; }
.case-media.media-slot span { max-width: 6ch; }
.case-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; padding: clamp(4.5rem, 10vw, 10rem) 8vw; background: var(--ink); color: var(--paper); }
.case-details--facts-only { grid-template-columns: 1fr; }
.case-details--facts-only .case-facts { max-width: 52rem; }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.case-facts div { border-top: 1px solid rgba(222, 219, 212, 0.3); padding-top: 0.65rem; }
.case-facts dt { color: var(--salmon); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.case-facts dd { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.3; }
.case-note { max-width: 27ch; margin: 0; font-family: var(--serif); font-size: clamp(1.85rem, 3.5vw, 3.6rem); letter-spacing: -0.06em; line-height: 0.94; }
.case-media-plan { display: grid; grid-template-columns: repeat(2, 1fr); min-height: 24rem; }
.case-media-plan > div { display: flex; flex-direction: column; justify-content: space-between; padding: 1.4rem; border-right: 1px solid var(--line); }
.case-media-plan > div:first-child { background: #c8c4bd; }
.case-media-plan > div:last-child { background: var(--acid); }
.case-media-plan p { max-width: 16ch; margin: 0; font-size: 0.78rem; line-height: 1.35; }
.case-media-plan strong { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 400; letter-spacing: -0.08em; line-height: 0.8; }
.case-video-plan { display: flex; align-items: end; justify-content: space-between; gap: 2rem; min-height: 16rem; padding: 1.4rem; background: var(--acid); }
.case-video-plan strong { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 400; letter-spacing: -0.08em; line-height: 0.8; }
.case-video-plan p { max-width: 23ch; margin: 0; font-size: 0.8rem; line-height: 1.35; }
.case-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 0.7rem; background: var(--paper); }
.case-gallery figure { min-height: 24rem; margin: 0; overflow: hidden; background: #b7afa7; }
.case-gallery figure:nth-child(3n) { grid-column: span 2; min-height: 38rem; }
.case-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-missing { min-height: 70vh; padding: 12vw 8vw; }
.project-missing h1 { max-width: 11ch; }
.case-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem 2.2rem; background: var(--paper); font-size: 0.76rem; font-weight: 700; }
.case-footer a:last-child { color: var(--salmon); }

@media (max-width: 760px) {
  .back-link { margin: 1.1rem 1.15rem 0; }
  .case-hero { grid-template-columns: 1fr; min-height: auto; }
  .case-copy { min-height: 31rem; padding: 2rem 1.15rem 4rem; }
  .case-title { font-size: clamp(4rem, 17vw, 6.5rem); }
  .case-media { min-height: 29rem; }
  .case-details { grid-template-columns: 1fr; gap: 3rem; padding: 4.5rem 1.15rem; }
  .case-facts { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-media-plan { grid-template-columns: 1fr; }
  .case-media-plan > div { min-height: 16rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-video-plan { min-height: 12rem; align-items: start; flex-direction: column; }
  .case-gallery { grid-template-columns: 1fr; padding: 0.45rem; gap: 0.45rem; }
  .case-gallery figure, .case-gallery figure:nth-child(3n) { grid-column: auto; min-height: 20rem; }
  .case-footer { padding: 1.15rem; }
}