@font-face{font-family:"Space Grotesk";src:url(assets/SpaceGrotesk-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{--paper:#f4f1eb;--ink:#252821;--muted:#797c71}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Space Grotesk",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
header{height:88px;position:absolute;z-index:20;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;color:white}
.wordmark{font-size:28px;letter-spacing:7px}
header nav{display:flex;gap:32px;font-size:12px}
.label{font-size:10px;letter-spacing:2px;text-transform:uppercase}
.hero{height:100svh;min-height:650px;position:relative;color:white;overflow:hidden}
.photo{width:100%;height:100%;object-fit:cover;display:block}
.hero>img{position:absolute;inset:0}
.hero-title{position:absolute;bottom:13vh;left:8vw;z-index:2}
h1,h2,h3,.serif{font-family:"Space Grotesk",sans-serif;font-weight:400}
h1{font-size:clamp(64px,10vw,156px);line-height:.91;letter-spacing:-.065em;margin:30px 0}
h1 em{display:block;font-weight:400;margin-left:9vw}
.hero-bottom{position:absolute;bottom:32px;left:4vw;right:4vw;z-index:3;display:flex;justify-content:space-between;font-size:11px}
.intro{padding:130px 15vw 110px;display:grid;grid-template-columns:1fr 2fr;gap:8vw}
.intro p{font-size:23px;line-height:1.55;margin:0}
.rail{position:sticky;top:0;z-index:15;background:#f4f1ebee;backdrop-filter:blur(12px);display:flex;justify-content:center;gap:40px;padding:22px;border-bottom:1px solid #25282122;font-size:11px}
.rail a.active{border-bottom:1px solid;padding-bottom:5px}
.triptych{height:82vh;display:flex;align-items:center;justify-content:center;gap:22px;overflow:hidden;padding:4vw}
.triptych img{width:25%;height:65%;object-fit:cover}
.triptych img:nth-child(2){width:38%;height:95%}
.chapter{padding:110px 5vw 40px;scroll-margin-top:65px}
.chapter-head{display:flex;align-items:end;justify-content:space-between;margin:0 3vw 60px}
.chapter h2{font-size:clamp(76px,12vw,180px);line-height:.8;letter-spacing:-.065em;margin:26px 0 0}
.chapter-head p{font-family:"Space Grotesk",sans-serif;font-size:24px;max-width:250px}
.chapter-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:6vw;align-items:center}
.chapter-grid>figure{height:78vh;margin:0;position:relative;overflow:hidden}
.chapter-grid p{max-width:430px;font-size:16px;line-height:1.9}
.chapter:nth-of-type(even) .chapter-grid{grid-template-columns:1fr 1.7fr}
.chapter:nth-of-type(even) .chapter-grid>figure{order:2}
.caption{font-size:9px;letter-spacing:1px;margin-top:13px;opacity:.6}
.chapter aside{padding:4vw 2vw}
.detail-link{background:transparent;border:0;border-bottom:1px solid #25282155;padding:12px 0;margin-top:25px;font-size:11px}
.interlude{padding:100px 12vw}
.interlude h3{font-size:clamp(40px,6vw,90px);max-width:900px;line-height:1.1}
.interlude p{max-width:560px;line-height:1.8;margin-left:auto}
.film{height:92vh;position:relative;margin:90px 0 0;overflow:hidden;color:white}
.film .overlay{position:absolute;left:8vw;bottom:12%;z-index:2}
.film h2{font-size:clamp(50px,7vw,110px);margin:24px 0;max-width:800px}
.play{display:flex;align-items:center;gap:18px;background:none;border:0;padding:0;color:white;font-size:11px}
.play span{width:62px;height:62px;display:grid;place-items:center;border:1px solid #ffffff88;border-radius:100%}
.outro{padding:140px 17vw}
.outro p{font-family:"Space Grotesk",sans-serif;font-size:clamp(25px,3vw,44px);line-height:1.5}
footer{background:#242820;color:#f4f1eb;padding:45px 4vw;border-top:1px solid #ffffff22;display:flex;justify-content:space-between;font-size:11px}
.review{padding:18px 8vw;border-top:1px solid var(--beyond-line);background:var(--paper);color:var(--beyond-muted);font-size:11px}
.review summary{cursor:pointer}
.review p{max-width:540px;line-height:1.6}
#modal{border:0;background:#f4f1eb;color:#252821;max-width:800px;width:90vw;padding:35px}
#modal::backdrop{background:#000b}
#modal img{width:100%;max-height:65vh;object-fit:contain}
#modal button{float:right;background:none;border:0;font-size:24px}
@media(max-width:700px){header{height:72px}
header nav a:not(:last-child){display:none}
.hero{min-height:600px}
.intro{display:block;padding:80px 7vw}
.intro p{font-size:19px;margin-top:30px}
.rail{gap:24px;padding:19px 8px;font-size:10px}
.triptych{height:55vh;padding:0;gap:10px}
.chapter{padding:75px 6vw 0}
.chapter-head{display:block;margin-bottom:35px}
.chapter-head p{font-size:19px}
.chapter-grid,.chapter:nth-of-type(even) .chapter-grid{display:flex;flex-direction:column;gap:10px}
.chapter-grid>figure{height:65vh;width:100%}
.chapter:nth-of-type(even) .chapter-grid>figure{order:0}
.chapter aside{padding:15px 0}
.chapter-grid p{font-size:14px}
.interlude{padding:50px 7vw}
.film{height:75vh;margin-top:40px}
.outro{padding:70px 8vw}
footer{gap:30px;line-height:1.8}

.hero-title{left:7vw}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}

h1,h2,h3,.serif{letter-spacing:-.025em;font-style:normal}
h1 em{font-style:normal}

.motion-stage{height:220svh;position:relative}
.motion-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.triptych{position:absolute;inset:0;height:100%;padding:0;gap:2vw}
.triptych img{position:absolute;width:26vw;height:55svh;top:22svh;left:3vw;will-change:transform,opacity}
.triptych img:nth-child(2){left:32vw;width:36vw;height:76svh;top:12svh;z-index:2}
.triptych img:nth-child(3){left:71vw}
.motion-film{height:180svh;margin:0}
.motion-film .film{height:100svh;margin:0;will-change:clip-path}
.chapter-grid>figure img{transform:none}
.chapter-grid>figure{position:sticky;top:90px}
.chapter-grid{align-items:start}
.chapter aside{padding-top:12vh;padding-bottom:12vh}
.motion-progress{position:absolute;bottom:0;left:0;height:2px;background:#ddd7c9;width:100%;transform-origin:left;z-index:4}
.motion-hint{position:absolute;bottom:25px;left:5vw;z-index:5;font-size:10px;letter-spacing:2px;color:white;mix-blend-mode:difference}
.chapter h2{line-height:1.02;overflow-wrap:anywhere}
.rail{overflow-x:auto;justify-content:center}
.photo{will-change:transform}
@media(max-width:700px){.motion-stage{height:175svh}
.motion-film{height:155svh}
.chapter-grid>figure{position:relative;top:0}
.chapter aside{padding:16px 0 25px}
.triptych img{width:30vw;left:-12vw;height:42svh;top:28svh}
.triptych img:nth-child(2){width:66vw;left:17vw;height:65svh;top:17svh}
.triptych img:nth-child(3){left:82vw}
.rail{gap:22px}
.chapter h2{font-size:clamp(48px,12vw,84px)}
}
@media(prefers-reduced-motion:reduce){.motion-stage,.motion-film{height:auto}
.motion-pin{position:relative;height:80svh}
.motion-film .film{clip-path:none}
.triptych img{will-change:auto}
}


.beyond-page {
  --beyond-surface: #e2dfd7;
  --beyond-muted: #5f6258;
  --beyond-line: #25282122;
}

.beyond-page > .site-overlay-header .site-header-brand {
  padding: 0;
  background: transparent;
}

.beyond-page .site-overlay-header .site-header-logo {
  filter: drop-shadow(0 1px 4px #0009);
}

.beyond-page > .site-overlay-header > nav a {
  text-shadow: 0 1px 6px #000b;
}

.beyond-page main :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.beyond-page main :is(.hero, .film, .portfolio) :is(a, button):focus-visible {
  outline-color: var(--paper);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0008, transparent 25%),
    linear-gradient(0deg, #0009, transparent 75%);
  pointer-events: none;
}

.intro {
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(34px, 7vw, 105px);
  padding: clamp(85px, 10vw, 150px) 12vw;
}

.intro-brand {
  display: grid;
  align-items: start;
  justify-items: start;
  gap: 28px;
}

.intro-brand img {
  display: block;
  width: min(100%, 270px);
  height: auto;
}

.beyond-page .rail {
  scrollbar-width: none;
}

.beyond-page .rail::-webkit-scrollbar {
  display: none;
}

.beyond-page .rail a {
  flex-shrink: 0;
}

.chapter {
  border-bottom: 1px solid var(--beyond-line);
}

.workshop-preview {
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 56px);
  border: 1px solid var(--beyond-line);
  background: var(--beyond-surface);
}

.interlude-body {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(18px, 6vw, 96px);
  max-width: 1040px;
}

.interlude-body img {
  display: block;
  width: clamp(100px, 16vw, 205px);
  max-width: 100%;
  height: auto;
}

.interlude-body p {
  margin: 0;
}

.motion-film .film {
  clip-path: inset(var(--film-inset-y, 18%) var(--film-inset-x, 22%));
}

.film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0009, transparent 75%);
  pointer-events: none;
}

.motion-film .film::after,
.motion-film .film .overlay {
  opacity: 0;
}

.motion-film .film .overlay {
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
}

.motion-film .film.is-copy-visible::after {
  opacity: 1;
  transition: opacity .48s ease;
}

.motion-film .film.is-copy-visible .overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .52s ease, transform .52s cubic-bezier(.22, .61, .36, 1);
}

.photo-essay {
  padding: 65px 0 35px;
  overflow: hidden;
}

.essay-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 3vw 22px;
}

.essay-controls {
  display: flex;
  flex: none;
  gap: 8px;
}

.essay-controls button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #25282155;
  background: transparent;
  color: var(--ink);
  font-size: 23px;
  line-height: 1;
  transition: color .2s ease, background .2s ease;
}

.essay-controls button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.essay-controls button:disabled {
  opacity: .38;
  cursor: default;
}

.essay-track {
  --essay-gutter: 3vw;
  position: relative;
  display: flex;
  gap: 2.5vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--essay-gutter);
  padding: 0 var(--essay-gutter) 8px;
  scrollbar-width: none;
}

.essay-track::-webkit-scrollbar {
  display: none;
}

.beyond-page main .essay-track:focus-visible {
  outline-offset: -3px;
}

.essay-photo {
  flex: 0 0 45%;
  margin: 0;
  scroll-snap-align: start;
}

.gallery-open {
  position: relative;
  display: block;
  width: 100%;
  height: 62vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--beyond-surface);
}

.gallery-open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.gallery-open:hover img {
  transform: scale(1.035);
}

.essay-photo:nth-child(even) {
  padding-top: 10vh;
}

.essay-photo:nth-child(even) .gallery-open {
  height: 52vh;
}

.enlarge {
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #f4f1ebdd;
  color: var(--ink);
}

.essay-photo figcaption {
  display: flex;
  gap: 24px;
  padding: 15px 0;
  color: var(--beyond-muted);
  font-size: 11px;
  line-height: 1.5;
}

.portfolio {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(36px, 7vw, 112px);
  padding: clamp(62px, 9vw, 140px) 8vw;
  background: #242820;
  color: var(--paper);
}

.portfolio h2 {
  margin: 0 0 26px;
  font-size: clamp(46px, 6vw, 99px);
  line-height: 1.03;
  letter-spacing: -.05em;
}

.portfolio a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 46px;
  border-bottom: 1px solid #f4f1eb78;
  padding: 8px 0;
  font-size: 14px;
}

.portfolio a:hover {
  border-color: var(--paper);
}

.portfolio-preview {
  margin: 0;
}

.portfolio-studies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1.5vw, 22px);
  padding-bottom: clamp(10px, 2.3vw, 32px);
}

.portfolio-studies img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--beyond-surface);
}

.portfolio-studies img:nth-child(even) {
  position: relative;
  top: clamp(10px, 2.3vw, 32px);
}

.portfolio-preview figcaption {
  margin-top: 13px;
  color: #d5d7ca;
  font-size: 11px;
  letter-spacing: .04em;
}

@media (max-width: 700px) {
  .intro {
    padding: 68px 7vw 75px;
  }

  .intro-brand {
    grid-template-columns: minmax(0, 1fr) minmax(0, 115px);
    align-items: center;
    gap: 15px;
  }

  .rail {
    gap: clamp(14px, 5vw, 24px);
  }

  .photo-essay {
    padding: 30px 0 24px;
  }

  .essay-heading {
    padding: 0 0 16px;
  }

  .essay-heading .label {
    letter-spacing: .11em;
  }

  .essay-controls {
    gap: 6px;
  }

  .essay-controls button {
    width: 44px;
    height: 44px;
  }

  .essay-track {
    --essay-gutter: 0px;
    gap: 18px;
  }

  .essay-photo {
    flex-basis: 84%;
  }

  .gallery-open {
    height: 52svh;
  }

  .essay-photo:nth-child(even) {
    padding-top: 7svh;
  }

  .essay-photo:nth-child(even) .gallery-open {
    height: 45svh;
  }

  .portfolio {
    grid-template-columns: minmax(0, 1fr);
    padding: 62px 7vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-film .film {
    clip-path: none;
  }

  .motion-film .film::after,
  .motion-film .film .overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .essay-controls button, .gallery-open img {
    transition: none;
  }

  .gallery-open:hover img {
    transform: none;
  }
}