:root {
  --black: #050505;
  --white: #f4f4f0;
  --dim: rgba(244, 244, 240, 0.46);
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin: 0;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
p { margin: 0; }

.site-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 26px 30px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}
.brand {
  animation: appear 1.8s cubic-bezier(.22,.75,.18,1) both;
  display: block;
  width: clamp(150px, 14vw, 225px);
}
.brand img { height: auto; width: 100%; }
.site-header nav {
  background: var(--black);
  box-shadow: 0 0 0 9px var(--black);
  display: flex;
  gap: 28px;
  letter-spacing: .06em;
  padding: 2px 0;
  text-transform: uppercase;
}
.site-header nav a { opacity: .72; transition: opacity 180ms ease; }
.site-header nav a:hover { opacity: 1; }

.threshold {
  min-height: 100svh;
  position: relative;
}
.status {
  animation: appear 2s .3s both;
  left: 50%;
  letter-spacing: .14em;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.coordinates {
  align-items: end;
  bottom: 26px;
  color: var(--dim);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  left: 30px;
  letter-spacing: .05em;
  position: absolute;
  right: 30px;
  text-transform: uppercase;
}
.coordinates p:nth-child(2) { justify-self: center; }
.coordinates a { transition: color 180ms ease; }
.coordinates a:hover { color: var(--white); }

.archive {
  min-height: 100svh;
  padding: 27px 30px 26px;
  position: relative;
}
.archive-header {
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.archive-list {
  left: 30px;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}
.archive-row {
  align-items: baseline;
  border-top: 1px solid rgba(244,244,240,.17);
  display: grid;
  grid-template-columns: 65px 1fr auto;
  padding: 12px 0 17px;
  transition: opacity 220ms ease;
}
.archive-row:last-child { border-bottom: 1px solid rgba(244,244,240,.17); }
.archive-row p:first-child,
.archive-row p:last-child {
  color: var(--dim);
  letter-spacing: .06em;
}
.archive-row p:nth-child(2) {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(44px, 6.2vw, 98px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .84;
}
.archive-list:has(.archive-row:hover) .archive-row:not(:hover) { opacity: .16; }

footer {
  align-items: end;
  bottom: 26px;
  color: var(--dim);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  left: 30px;
  letter-spacing: .05em;
  position: absolute;
  right: 30px;
  text-transform: uppercase;
}
footer p { justify-self: center; }
footer a { transition: color 180ms ease; }
footer a:hover { color: var(--white); }

.lookbook {
  background: #050505;
  min-height: 100svh;
}
.lookbook-header {
  align-items: flex-start;
  color: #f4f4f0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  left: 0;
  padding: 22px 25px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}
.lookbook-header a { pointer-events: auto; }
.lookbook-brand {
  background: var(--black);
  box-shadow: 0 0 0 10px var(--black);
  width: 118px;
}
.lookbook-brand img { height: auto; width: 100%; }
.lookbook-title {
  background: var(--black);
  box-shadow: 0 0 0 10px var(--black);
  display: flex;
  font-size: 9px;
  gap: 22px;
  justify-self: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lookbook-title span:last-child { color: rgba(244,244,240,.58); }
.lookbook-close {
  background: var(--black);
  box-shadow: 0 0 0 10px var(--black);
  font-size: 9px;
  justify-self: end;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lookbook-close:hover { text-decoration: underline; text-underline-offset: 4px; }
.lookbook-instruction {
  background: var(--black);
  bottom: 23px;
  box-shadow: 0 0 0 8px var(--black);
  color: #f4f4f0;
  font-size: 9px;
  letter-spacing: .08em;
  position: fixed;
  right: 25px;
  text-transform: uppercase;
  z-index: 20;
}
.lookbook-page {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100svh;
  opacity: .22;
  overflow: visible;
  position: relative;
  transform: translateY(6svh) scale(.965);
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(.2,.7,.15,1);
}
.lookbook-page.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.lookbook-page img {
  height: auto;
  object-fit: contain;
  transition: filter 900ms ease, transform 1200ms cubic-bezier(.2,.7,.15,1);
  width: auto;
}

.lookbook-narrow .lookbook-pages { padding: 8svh 0 14svh; }
.lookbook-narrow .lookbook-page {
  min-height: 94svh;
  padding: 8svh 6vw;
}
.lookbook-narrow .lookbook-page img {
  box-shadow: 0 20px 70px rgba(0,0,0,.42);
  max-height: 82svh;
  max-width: 72vw;
}
.lookbook-narrow .lookbook-page:nth-child(4n+1) { justify-content: flex-start; padding-left: 11vw; }
.lookbook-narrow .lookbook-page:nth-child(4n+2) { justify-content: flex-end; padding-right: 10vw; }
.lookbook-narrow .lookbook-page:nth-child(4n+3) img { max-height: 72svh; }
.lookbook-narrow .lookbook-page:nth-child(4n) { justify-content: flex-start; padding-left: 22vw; }

.lookbook-portrait .lookbook-pages { padding: 12svh 0 16svh; }
.lookbook-portrait .lookbook-page {
  min-height: 112svh;
  padding: 8svh 6vw;
}
.lookbook-portrait .lookbook-page img {
  filter: grayscale(.25);
  max-height: 88svh;
  max-width: 64vw;
}
.lookbook-portrait .lookbook-page.is-visible img { filter: grayscale(0); }
.lookbook-portrait .lookbook-page:nth-child(3n+1) { justify-content: flex-start; padding-left: 9vw; }
.lookbook-portrait .lookbook-page:nth-child(3n+2) { justify-content: flex-end; padding-right: 9vw; }
.lookbook-portrait .lookbook-page:nth-child(3n) img { max-height: 76svh; max-width: 56vw; }
.lookbook-portrait .lookbook-page:nth-child(odd):not(.is-visible) img { transform: translateX(-4vw); }
.lookbook-portrait .lookbook-page:nth-child(even):not(.is-visible) img { transform: translateX(4vw); }

.lookbook-wide .lookbook-pages { padding: 12svh 0 22svh; }
.lookbook-wide .lookbook-page {
  min-height: 128svh;
  padding: 10svh 0 18svh;
}
.volcano-pair {
  align-items: center;
  display: grid;
  gap: clamp(24px, 5vw, 90px);
  grid-template-columns: 1fr 1fr;
  max-width: 1380px;
  position: sticky;
  top: 10svh;
  width: 88vw;
}
.volcano-pair img { max-height: 78svh; max-width: 100%; }
.lookbook-wide .lookbook-page:nth-child(odd) .volcano-pair img:first-child { transform: translateY(-3svh); }
.lookbook-wide .lookbook-page:nth-child(odd) .volcano-pair img:last-child { transform: translateY(3svh); }
.lookbook-wide .lookbook-page:nth-child(even) .volcano-pair img:first-child { transform: translateY(3svh); }
.lookbook-wide .lookbook-page:nth-child(even) .volcano-pair img:last-child { transform: translateY(-3svh); }
.lookbook-wide .lookbook-page:not(.is-visible) .volcano-pair img:first-child { transform: translate(-5vw, 4svh) scale(.95); }
.lookbook-wide .lookbook-page:not(.is-visible) .volcano-pair img:last-child { transform: translate(5vw, 4svh) scale(.95); }
.volcano-single { display: flex; justify-content: center; }
.volcano-single img { max-height: 78svh; max-width: 34vw; transform: none !important; }

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 700px) {
  .site-header { padding: 19px 16px; }
  .brand { width: 142px; }
  .site-header nav { gap: 15px; font-size: 9px; }
  .status { font-size: 9px; }
  .coordinates {
    bottom: 18px;
    display: flex;
    justify-content: space-between;
    left: 16px;
    right: 16px;
  }
  .coordinates p:nth-child(2) { display: none; }
  .archive { padding: 19px 16px 18px; }
  .archive-list { left: 16px; right: 16px; }
  .archive-row { grid-template-columns: 36px 1fr auto; padding: 12px 0 15px; }
  .archive-row p:nth-child(2) { font-size: 15vw; }
  footer { bottom: 18px; display: flex; justify-content: space-between; left: 16px; right: 16px; }
  footer p { display: none; }
  .lookbook-header { padding: 17px 15px; }
  .lookbook-brand { width: 92px; }
  .lookbook-title { gap: 0; }
  .lookbook-title span:last-child { display: none; }
  .lookbook-instruction { bottom: 17px; right: 15px; }
  .lookbook-narrow .lookbook-pages { padding-top: 15svh; }
  .lookbook-narrow .lookbook-page {
    justify-content: center !important;
    min-height: 92svh;
    padding: 8svh 4vw !important;
  }
  .lookbook-narrow .lookbook-page img { max-height: 78svh; max-width: 92vw; }
  .lookbook-portrait .lookbook-pages { padding: 10svh 0 14svh; }
  .lookbook-portrait .lookbook-page { min-height: 102svh; padding: 8svh 4vw !important; }
  .lookbook-portrait .lookbook-page img { max-height: 80svh; max-width: 88vw; }
  .lookbook-wide .lookbook-page { min-height: 114svh; padding: 10svh 0 16svh; }
  .volcano-pair { gap: 10px; top: 13svh; width: 96vw; }
  .volcano-pair img { max-height: 68svh; max-width: 100%; }
  .volcano-single img { max-height: 72svh; max-width: 58vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand, .status { animation: none; }
  .lookbook-page { opacity: 1; transform: none; transition: none; }
  .lookbook-page img { transition: none; }
}