:root {
  --ink: #0b0a0a;
  --coal: #191715;
  --coffee: #3f2c23;
  --paper: #f2ebe2;
  --black: #15110f;
  --light: #e7ddd1;
  --muted: #aa9d92;
  --dark-muted: #71665d;
  --line: rgba(232, 222, 209, .22);
  --paper-line: rgba(21, 17, 15, .18);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { background: var(--ink); color: var(--light); font-family: var(--sans); margin: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { font-weight: 300; }

.site-header { align-items: center; display: flex; justify-content: center; left: 0; padding: 25px 34px; position: absolute; right: 0; top: 0; z-index: 5; }
.brand { display: block; position: relative; z-index: 1; }
.brand img { display: block; height: 94px; object-fit: cover; width: 94px; }
nav { display: flex; gap: 28px; position: absolute; }
.nav-left { left: 34px; }
.nav-right { right: 34px; }
nav a, footer, .section-heading > p, .paper-title > p, .acquire > div:first-child > p, .recognition > div > p { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
nav a { transition: opacity .25s ease; }
nav a:hover, footer a:hover { opacity: .55; }

.hero { align-items: flex-end; display: flex; justify-content: center; min-height: 88svh; overflow: hidden; padding: 12vw 7vw; position: relative; }
.hero-image { animation: settle 13s ease-out both; background: url("site-assets/hero.jpg") center / cover; inset: 0; position: absolute; transform: scale(1.04); }
.hero-image.is-changing { animation: settle 10s ease-out both; }
.hero-shade { background: linear-gradient(90deg, rgba(8,7,7,.6), rgba(8,7,7,.08) 62%, rgba(8,7,7,.42)), linear-gradient(0deg, rgba(8,7,7,.74), transparent 54%); inset: 0; position: absolute; }
h1 { font-size: clamp(49px, 10.2vw, 158px); letter-spacing: .025em; line-height: .82; margin: 0; position: relative; text-align: center; z-index: 1; }

.prologue { padding: 106px 26px 100px; }
.prologue p { color: var(--muted); font-size: clamp(17px, 1.55vw, 22px); letter-spacing: .01em; line-height: 1.5; margin: 0 auto; max-width: 790px; text-align: center; }

.works { padding: 42px 5.8vw 142px; }
.section-heading { margin: 0 auto 68px; max-width: 1440px; }
.section-heading > p, .paper-title > p, .acquire > div:first-child > p, .recognition > div > p { color: var(--muted); margin: 0 0 19px; }
h2 { font-size: clamp(44px, 6.35vw, 104px); letter-spacing: -.025em; line-height: .87; margin: 0; }
.work-grid { display: grid; gap: 104px; grid-template-columns: minmax(0, 1fr); margin: 0 auto; max-width: 1440px; }
.work { margin: 0; overflow: hidden; }
.work img { display: block; height: auto; transform: scale(1.035); transition: transform 1.5s cubic-bezier(.2,.65,.25,1); width: 100%; }
.work.is-visible img { animation: work-in 1.1s cubic-bezier(.2,.65,.25,1) both; }
.work:hover img { transform: scale(1.055); }
.work-meta { border-top: 1px solid var(--line); display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 18px; padding-top: 16px; }
.work-meta h3 { font-size: clamp(24px, 2.65vw, 42px); letter-spacing: -.02em; line-height: .95; margin: 0; }
.work-meta h3 span { color: var(--muted); font-size: .57em; letter-spacing: .01em; }
.work-meta p { color: var(--muted); font-size: 10px; grid-column: 1; letter-spacing: .1em; margin: 2px 0 0; text-transform: uppercase; }
.work-meta > span { color: var(--light); font-size: 10px; grid-column: 2; grid-row: 1 / span 2; letter-spacing: .1em; padding-top: 5px; text-transform: uppercase; }

.paper { background: var(--paper); color: var(--black); padding: 130px 8vw; }
.paper-title > p { color: var(--dark-muted); }
.long-copy { columns: 2; column-gap: 48px; max-width: 1010px; }
.long-copy p { break-inside: avoid; font-size: clamp(15px, 1.18vw, 18px); letter-spacing: .003em; line-height: 1.52; margin: 0 0 25px; }
.long-copy p:first-child { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.35; }
.concept .paper-title, .studio .paper-title { margin: 0 0 54px; }
.studio h2 { white-space: nowrap; }
.concept { background: #f2ebe2; }
.studio { background: #e9ded2; }
.concept .long-copy { column-count: 3; column-fill: balance; column-gap: 40px; max-width: none; text-align: left; }
.concept .long-copy p { break-inside: auto; font-size: clamp(14px, 1.05vw, 16px); }
.concept .long-copy p:first-child, .concept .long-copy p.emphasis { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.38; }
.studio { border-top: 1px solid var(--paper-line); padding-top: 88px; }
.studio-copy { display: grid; gap: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
.studio-lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.38; margin: 0; }
.studio-columns { column-count: 2; column-fill: balance; column-gap: 40px; grid-column: span 2; }
.studio-columns p { break-inside: auto; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.52; margin: 0 0 25px; }

.acquire { background: var(--coal); display: grid; gap: 12vw; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); padding: 116px 8vw; }
.acquire-copy { max-width: 560px; }
.acquire-copy p { color: var(--muted); font-size: 16px; line-height: 1.48; margin: 0 0 22px; }
.acquire-copy a:not(.button) { border-bottom: 1px solid var(--line); color: var(--light); padding-bottom: 2px; }
.button { align-items: center; border: 1px solid var(--light); display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .12em; margin-top: 34px; padding: 18px 20px; text-transform: uppercase; transition: background .25s, color .25s; }
.button:hover { background: var(--light); color: var(--ink); }

.recognition { background: radial-gradient(circle at 76% 18%, #493329, var(--ink) 58%); display: grid; gap: 9vw; grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr); padding: 120px 8vw; }
.recognition ul { list-style: none; margin: 0; padding: 0; }
.recognition li { border-top: 1px solid var(--line); }
.recognition li:last-child { border-bottom: 1px solid var(--line); }
.recognition li a { display: flex; font-size: clamp(16px, 1.45vw, 21px); justify-content: space-between; letter-spacing: -.01em; padding: 17px 0; transition: color .2s ease; }
.recognition li a:hover { color: var(--muted); }
.recognition li span { color: var(--muted); font-size: .75em; }

footer { align-items: center; border-top: 1px solid var(--line); display: grid; grid-template-columns: 94px 1fr auto; padding: 22px 34px; }
footer img { height: 70px; object-fit: cover; width: 70px; }
footer p { color: var(--muted); margin: 0; text-align: center; }
footer div { display: flex; gap: 17px; }
.back-to-top { background: rgba(11, 10, 10, .92); border: 1px solid rgba(232, 222, 209, .45); bottom: 24px; color: var(--light); font-size: 10px; letter-spacing: .11em; opacity: 0; padding: 13px 15px; pointer-events: none; position: fixed; right: 24px; text-transform: uppercase; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; z-index: 6; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--light); color: var(--ink); }

@keyframes settle { from { transform: scale(1.1); } to { transform: scale(1.04); } }
@keyframes work-in { from { opacity: 0; transform: scale(1.075); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 760px) {
  .site-header { min-height: 125px; padding: 17px 18px 44px; }
  .brand { position: absolute; top: 15px; }
  .brand img { height: 69px; width: 69px; }
  nav { bottom: 19px; gap: 15px; }
  .nav-left { left: 18px; } .nav-right { right: 18px; }
  nav a { font-size: 9px; }
  .hero { min-height: 80svh; padding: 24px 20px; }
  .prologue { padding: 80px 24px 76px; }
  .works { padding: 36px 20px 85px; }
  .section-heading { margin-bottom: 42px; }
  .work-grid { gap: 72px; }
  .work-meta { margin-top: 13px; }
  .paper, .acquire, .recognition { display: block; padding: 76px 20px; }
  .paper-title, .acquire > div:first-child, .recognition > div { margin-bottom: 46px; }
  .long-copy, .concept .long-copy { columns: 1; }
  .long-copy p { font-size: 16px; margin-bottom: 23px; }
  .studio { padding-top: 76px; }
  .studio-copy { display: block; }
  .studio-columns { columns: 1; margin-top: 28px; }
  .studio-columns p { font-size: 16px; }
  .acquire-copy p { font-size: 16px; }
  .recognition ul { margin-top: 0; }
  footer { gap: 14px; grid-template-columns: 70px 1fr; padding: 18px 20px; }
  footer img { height: 60px; width: 60px; }
  footer div { display: none; }
  .back-to-top { bottom: 18px; right: 18px; }
}

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