:root {
  --ink: #17130f;
  --muted: #766b61;
  --paper: #f8f6f1;
  --warm: #ece4d9;
  --gold: #b87824;
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.sr-only {
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}

.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 20; padding: .65rem .8rem;
  background: #fff; color: var(--ink); transform: translateY(-150%); transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute; inset: 0 0 auto; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 1.45rem clamp(1.25rem, 3vw, 3.5rem); color: #fff; transition: background .25s ease, color .25s ease;
}
.site-header.is-solid { position: fixed; background: rgba(248,246,241,.94); color: var(--ink); box-shadow: 0 1px 0 rgba(23,19,15,.1); backdrop-filter: blur(10px); }
.wordmark { color: inherit; text-decoration: none; font: 500 1.05rem/1 var(--mono); letter-spacing: -.08em; }
.header-meta { justify-self: center; font: 400 .62rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.site-menu { justify-self: end; display: flex; gap: clamp(1rem, 2vw, 2.2rem); }
.site-menu a { color: inherit; font-size: .75rem; text-decoration: none; }
.site-menu a:hover, .footer a:hover, .text-link:hover { opacity: .58; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: max(42rem, 100svh); overflow: hidden; background: #9b794d; color: #fff; }
.hero__image { height: 100%; width: 100%; object-fit: cover; object-position: 50% 49%; position: absolute; inset: 0; }
.hero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,3,.35) 0%, rgba(8,5,3,.01) 37%, rgba(8,5,3,.32) 100%); }
.hero__topline { position: absolute; inset: 7.3rem clamp(1.25rem, 3vw, 3.5rem) auto; display: flex; justify-content: space-between; font: 400 .6rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.hero__content { position: absolute; left: clamp(1.25rem, 10vw, 10rem); bottom: clamp(3rem, 9vw, 7.8rem); }
.eyebrow { margin: 0 0 1rem; font: 400 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { margin: 0; max-width: 9ch; font: 500 clamp(3.9rem, 9vw, 9.5rem)/.8 var(--sans); letter-spacing: -.085em; }
.hero__link { display: inline-flex; align-items: center; gap: 2.25rem; margin-top: 2.6rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.75); color: inherit; font-size: .78rem; text-decoration: none; }
.hero__link:hover .hero__arrow { transform: translateY(.25rem); }
.hero__arrow { font-size: 1.15rem; transition: transform .25s ease; }
.hero__side-note { position: absolute; right: clamp(1.25rem, 3vw, 3.5rem); bottom: 1.7rem; margin: 0; max-width: 21ch; text-align: right; font: 400 .59rem/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; }

.intro { display: grid; grid-template-columns: 1fr minmax(15rem, 2fr) 1fr; gap: 2rem; min-height: 41rem; padding: clamp(5.5rem, 12vw, 12rem) clamp(1.25rem, 8vw, 10rem) 4rem; background: var(--warm); }
.intro__number, .intro__caption { margin: 0; font: 400 .62rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.intro__copy h2, .series__heading h2, .closing h2 { margin: 0; font: 500 clamp(2.8rem, 5.4vw, 6rem)/.98 var(--serif); letter-spacing: -.06em; }
.intro__copy p { max-width: 31rem; margin: 2rem 0 0; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.45; }
.intro__caption { align-self: end; text-align: right; }

.series { padding: clamp(5.5rem, 10vw, 10rem) 0 0; }
.series__heading { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 0 clamp(1.25rem, 8vw, 10rem) clamp(4rem, 8vw, 7rem); }
.series__heading .eyebrow { padding-top: .75rem; }
.piece { display: grid; grid-template-columns: 1fr 1fr; min-height: min(53vw, 52rem); }
.piece__media { position: relative; margin: 0; overflow: hidden; background: #d8cec0; }
.piece__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.piece:hover .piece__media img { transform: scale(1.035); }
.piece__media figcaption { position: absolute; right: 1.25rem; bottom: 1.2rem; color: white; font: 400 .57rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; mix-blend-mode: difference; }
.piece--image-left .piece__media { order: 0; }
.piece--image-left .piece__copy { order: 1; }
.piece--image-right .piece__copy { order: 0; }
.piece--image-right .piece__media { order: 1; }
.piece:nth-of-type(3) .piece__media img { object-position: 55% 50%; }
.piece__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2.75rem, 8vw, 9rem); background: var(--paper); }
.piece--image-right .piece__copy { background: #eee7dc; }
.piece__index { margin: 0 0 3rem; font: 400 .63rem/1 var(--mono); color: var(--muted); }
.piece h3 { margin: 0; font: 500 clamp(3.3rem, 6vw, 6.75rem)/.84 var(--serif); letter-spacing: -.075em; }
.piece h3 em { font-style: italic; font-weight: 500; }
.piece__description { max-width: 21rem; margin: 2rem 0 2.2rem; font-size: .95rem; line-height: 1.45; }
.text-link { padding: 0 0 .5rem; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: inherit; cursor: pointer; font-size: .75rem; }
.text-link span { display: inline-block; padding-left: 1rem; transition: transform .2s ease; }
.text-link:hover span { transform: translate(.2rem, -.2rem); }

.worn { position: relative; min-height: min(64rem, 100svh); overflow: hidden; color: white; background: #594d3c; }
.worn > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; filter: saturate(.83) contrast(.98); }
.worn::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(12,8,4,.68), transparent 62%), linear-gradient(0deg, rgba(12,8,4,.28), transparent 50%); }
.worn__overlay { position: absolute; z-index: 1; left: clamp(1.25rem, 8vw, 10rem); bottom: clamp(3.5rem, 12vw, 10rem); }
.worn h2 { margin: 0; font: 500 clamp(3rem, 7vw, 7.7rem)/.89 var(--serif); letter-spacing: -.07em; }

.closing { display: grid; grid-template-columns: 2fr 1fr; align-items: end; min-height: 38rem; padding: clamp(5.5rem, 12vw, 11rem) clamp(1.25rem, 8vw, 10rem) 3rem; background: #1d1812; color: #f7f4ee; }
.closing h2 { font-size: clamp(3.8rem, 7.5vw, 8.5rem); }
.closing__note { margin: 0; justify-self: end; max-width: 20ch; color: #c4b8a9; font: 400 .65rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.footer { display: flex; justify-content: space-between; padding: 1.2rem clamp(1.25rem, 3vw, 3.5rem); background: #1d1812; border-top: 1px solid rgba(255,255,255,.17); color: #c4b8a9; font: 400 .6rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.footer a { color: inherit; text-decoration: none; }

.piece-dialog { width: min(59rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 1rem 4rem rgba(0,0,0,.3); }
.piece-dialog::backdrop { background: rgba(22,17,13,.64); backdrop-filter: blur(4px); }
.dialog__close { position: absolute; z-index: 2; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 100%; background: var(--paper); color: var(--ink); cursor: pointer; font: 400 1.8rem/.8 var(--sans); }
.piece-dialog { grid-template-columns: 1.05fr 1fr; }
.piece-dialog[open] { display: grid; }
.dialog__image-wrap { min-height: min(40rem, calc(100dvh - 2rem)); background: #d9cfbf; }
.dialog__image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.dialog__content { align-self: center; padding: clamp(2rem, 5vw, 5rem); }
.dialog__content h2 { margin: 0; font: 500 clamp(2.8rem, 5vw, 5rem)/.89 var(--serif); letter-spacing: -.07em; }
.dialog__content > p:not(.eyebrow):not(.dialog__note) { margin: 1.75rem 0 3rem; line-height: 1.5; }
.dialog__note { padding-top: .8rem; border-top: 1px solid #bdb4a8; color: var(--muted); font: 400 .6rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

[data-reveal] { opacity: 0; transform: translateY(1.8rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 720px) {
  .site-header { grid-template-columns: 1fr auto; padding: 1.25rem; }
  .header-meta { display: none; }
  .menu-toggle { display: flex; z-index: 2; flex-direction: column; justify-content: center; gap: .32rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { display: block; width: 1.35rem; height: 1px; background: currentColor; transition: transform .2s ease; }
  .site-menu { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; background: var(--paper); color: var(--ink); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity .2s ease, transform .2s ease; }
  .site-menu a { font: 500 2.5rem/1 var(--serif); letter-spacing: -.05em; }
  .site-header.is-menu-open { color: var(--ink); }
  .site-header.is-menu-open .site-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-header.is-menu-open .menu-toggle span:first-of-type { transform: translateY(3px) rotate(45deg); }
  .site-header.is-menu-open .menu-toggle span:last-of-type { transform: translateY(-3px) rotate(-45deg); }

  .hero { min-height: 100svh; }
  .hero__image { object-position: 50% 44%; }
  .hero__topline { inset: 5.7rem 1.25rem auto; }
  .hero__content { left: 1.25rem; bottom: 4.2rem; }
  .hero h1 { font-size: clamp(4rem, 18vw, 6.4rem); }
  .hero__side-note { display: none; }

  .intro { grid-template-columns: 1fr; gap: 2.2rem; min-height: auto; padding: 5rem 1.25rem; }
  .intro__copy h2 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .intro__caption { max-width: 18rem; text-align: left; }
  .series { padding-top: 5rem; }
  .series__heading { grid-template-columns: 1fr; gap: .5rem; padding: 0 1.25rem 3.5rem; }
  .series__heading h2 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .series__heading .eyebrow { padding-top: 0; }
  .piece { grid-template-columns: 1fr; min-height: 0; }
  .piece__media { order: 0 !important; aspect-ratio: .93; }
  .piece__media img { min-height: 0; }
  .piece--image-right .piece__copy { order: 1; }
  .piece__copy { min-height: 27rem; padding: 3rem 1.25rem 3.6rem; }
  .piece__index { margin-bottom: 2.2rem; }
  .piece h3 { font-size: clamp(3.5rem, 15vw, 5.4rem); }
  .piece__description { margin: 1.5rem 0 2rem; }
  .piece:nth-of-type(3) .piece__media img { object-position: 56% 50%; }
  .worn { min-height: 42rem; }
  .worn > img { object-position: 58% center; }
  .worn__overlay { left: 1.25rem; bottom: 3rem; }
  .worn h2 { font-size: clamp(3.1rem, 14vw, 5rem); }
  .closing { grid-template-columns: 1fr; gap: 4rem; min-height: 34rem; padding: 5rem 1.25rem 2rem; }
  .closing h2 { font-size: clamp(4rem, 16vw, 5.8rem); }
  .closing__note { justify-self: start; }
  .footer { padding: 1.2rem 1.25rem; }
  .piece-dialog { grid-template-columns: 1fr; overflow: auto; }
  .dialog__image-wrap { min-height: 24rem; }
  .dialog__content { padding: 2rem 1.5rem 2.5rem; }
}

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