/* Archivo variable (width + weight axes) is loaded via <link> in the document head. */

:root {
  --clay:      oklch(0.955 0.008 62);
  --clay-deep: oklch(0.915 0.014 58);
  --ink:       oklch(0.20 0.018 50);
  --ink-soft:  oklch(0.46 0.020 50);
  --oxide:     oklch(0.54 0.175 32);

  --gut: clamp(1rem, 3.4vw, 2.75rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--clay);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.08rem);
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--oxide); color: var(--clay); }

:focus-visible {
  outline: 2px solid var(--oxide);
  outline-offset: 3px;
}

/* ---------- masthead ---------- */

.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: var(--gut);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  mix-blend-mode: multiply;
}

.masthead span { color: var(--ink-soft); }

.masthead a { text-decoration: none; }
.masthead a:hover { color: var(--oxide); }

/* ---------- collage ---------- */

.collage {
  position: relative;
  padding: clamp(5.5rem, 13vh, 9rem) var(--gut) clamp(3rem, 8vh, 6rem);
}

.wordmark {
  position: sticky;
  top: 50vh;
  z-index: 1;
  margin: 0;
  text-align: center;
  line-height: 0.82;
  pointer-events: none;
  transform: translateY(-50%);
  font-size: clamp(3.1rem, 15.5vw, 15rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 125, 'wght' 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wordmark em {
  display: block;
  font-style: normal;
  color: var(--oxide);
}

/* the grid of scattered images sits above the wordmark */
.scatter {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
  align-items: start;
  /* clears the wordmark on landing; the overlap happens on scroll instead,
     once the name is sticky and the pictures travel up over it */
  margin-top: 17vh;
  /* A sticky element parks at its parent's CONTENT box, so padding on .collage
     buys no room: the name would come to rest exactly on the last row. This
     margin is that room. It needs 1.5x the wordmark's height, because the
     -50% transform renders it half a height above where its box parks.
     Wordmark is 15vw over two lines at 0.82, so its height is ~24.6vw. */
  margin-bottom: 38vw;
}

.scatter figure { margin: 0; }

/* per-column vertical offsets: the scatter, composed not random */
.scatter figure:nth-child(5n + 1) { margin-top: 0; }
.scatter figure:nth-child(5n + 2) { margin-top: 26%; }
.scatter figure:nth-child(5n + 3) { margin-top: 6%; }
.scatter figure:nth-child(5n + 4) { margin-top: 34%; }
.scatter figure:nth-child(5n + 5) { margin-top: 14%; }

.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--clay-deep);
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.shot.seen { opacity: 1; transform: none; }

.shot img { transition: transform 0.6s var(--ease), filter 0.6s var(--ease); }

.shot:hover img,
.shot:focus-visible img { transform: scale(1.035); filter: saturate(1.08); }

/* ---------- sections ---------- */

.band {
  position: relative;
  z-index: 3;
  background: var(--clay);
  padding: clamp(4rem, 11vh, 8rem) var(--gut);
}

/* the statement's own bottom padding is the separation; don't double it up */
.band + .band { padding-top: 0; }

.statement {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.7rem, 5.6vw, 4.2rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.statement b { font-weight: inherit; color: var(--oxide); }

.statement + p {
  max-width: 46ch;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
}

.series-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 clamp(1.3rem, 3.5vw, 2.4rem);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--clay-deep);
}

.series-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 4.4vw, 3rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 118, 'wght' 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.series-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.series + .series { margin-top: clamp(3.5rem, 9vh, 7rem); }

/* the studio's own words, at the head of each body of work */
.lede {
  max-width: 54ch;
  margin: 0 0 clamp(1rem, 2.5vw, 1.6rem);
  font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.28rem);
  line-height: 1.5;
}

.lede a { color: var(--oxide); text-decoration: none; }
.lede a:hover { text-decoration: underline; }

.credits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  margin: 0 0 clamp(1.4rem, 3.5vw, 2.2rem);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.credits i { font-style: normal; opacity: 0.7; }
.credits a { font-weight: 700; text-decoration: none; }
.credits a:hover { color: var(--oxide); }

/* ---------- the workshop: a logbook, not a gallery ---------- */

.workshop { background: var(--clay-deep); }

.notes {
  display: grid;
  gap: clamp(2.2rem, 6vw, 4rem);
}

.note {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  max-width: 1080px;
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid oklch(0.86 0.016 58);
}

.note-text p { margin: 0; }

.note-text p + p {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
  max-width: 42ch;
}

.note-text a { color: var(--oxide); text-decoration: none; }
.note-text a:hover { text-decoration: underline; }

.stamp {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}

/* Flex, not grid: a shoot with one frame keeps it at reference size and packs
   left, instead of stretching to fill a track. These document the work, they
   are not the gallery. */
.note-shots {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  align-items: flex-start;
}

.note-shots figure { width: clamp(140px, 17vw, 240px); }

@media (max-width: 760px) {
  .note { grid-template-columns: 1fr; gap: 1rem; }
  .note-shots figure { width: calc(50% - 0.5rem); }
}

/* Masonry via columns: mixed aspect ratios pack tight, with no dead rows. */
.strip {
  columns: 3;
  column-gap: clamp(0.7rem, 1.8vw, 1.5rem);
}

.strip figure {
  break-inside: avoid;
  margin: 0 0 clamp(0.7rem, 1.8vw, 1.5rem);
}

/* studio portraits are all one shape, so they can run tighter and smaller */
#studio .strip { columns: 4; }

@media (max-width: 900px) { .strip, #studio .strip { columns: 2; } }
@media (max-width: 460px) { #studio .strip { columns: 2; } }

/* ---------- contact ---------- */

.contact {
  background: var(--ink);
  color: var(--clay);
  padding: clamp(4rem, 12vh, 9rem) var(--gut);
}

.contact h2 {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  max-width: 16ch;
  font-size: clamp(2rem, 7.5vw, 6rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 125, 'wght' 900;
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.contact h2 em { font-style: normal; color: var(--oxide); }

.reach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.5rem;
  align-items: baseline;
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  font-weight: 700;
}

.reach a { text-decoration: none; border-bottom: 2px solid var(--oxide); padding-bottom: 2px; }
.reach a:hover { color: var(--oxide); }

.colophon {
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  color: oklch(0.62 0.015 50);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- lightbox ---------- */

/* <dialog> carries UA width/height/margin/border defaults that have to be
   cleared explicitly, or the modal renders as a small box mid-page. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 3rem);
  border: 0;
  overflow: hidden;
  background: oklch(0.16 0.012 50 / 0.96);
  color: var(--clay);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.lightbox[open] { display: grid; place-items: center; }
.lightbox:not([open]) { display: none; }
.lightbox.open { opacity: 1; }
.lightbox::backdrop { background: oklch(0.16 0.012 50 / 0.96); }

.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  object-fit: contain;
}

.lb-close, .lb-nav {
  position: absolute;
  border: 0;
  background: none;
  color: var(--clay);
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.75rem 1rem;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.25s var(--ease);
}

.lb-close:hover, .lb-nav:hover { opacity: 1; }
.lb-close { top: 0.4rem; right: 0.6rem; font-size: 2rem; }
.lb-nav.prev { left: 0; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 0; top: 50%; transform: translateY(-50%); }

.lb-count {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--clay);
  opacity: 0.6;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .scatter { grid-template-columns: repeat(3, 1fr); margin-top: -12vh; }
  .scatter figure:nth-child(5n + 1),
  .scatter figure:nth-child(5n + 2),
  .scatter figure:nth-child(5n + 3),
  .scatter figure:nth-child(5n + 4),
  .scatter figure:nth-child(5n + 5) { margin-top: 0; }
  .scatter figure:nth-child(3n + 2) { margin-top: 24%; }
  .scatter figure:nth-child(3n + 3) { margin-top: 9%; }
}

/* Narrow screens keep the overlay, but two columns cover the full width and
   bury the wordmark. One column at 72%, alternating sides, opens a diagonal
   channel for the name to show through. The collage also starts below the
   wordmark rather than over it, so the name reads clean on landing and the
   pictures wash over it as you scroll. */
@media (max-width: 900px) {
  .collage { padding-top: clamp(3.5rem, 12vh, 6rem); }

  /* the expanded axis eats width fast: this has to fit the viewport or
     neither word is readable */
  .wordmark {
    font-size: clamp(2.3rem, 13.5vw, 5rem);
    top: 44vh;
  }

  /* Small frames and wide gutters. The collage is texture, not the gallery:
     full-size viewing is the lightbox and the masonry further down. Keeping
     the frames small is what leaves the wordmark room to read. */
  .scatter {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 30vh;
    /* same parking clearance, against the smaller mobile wordmark */
    margin-bottom: 52vw;
    gap: clamp(2.2rem, 8vw, 3.5rem) clamp(0.8rem, 3vw, 1.6rem);
  }

  .scatter figure:nth-child(5n + 1),
  .scatter figure:nth-child(5n + 2),
  .scatter figure:nth-child(5n + 3),
  .scatter figure:nth-child(5n + 4),
  .scatter figure:nth-child(5n + 5) { margin-top: 0; }

  .scatter figure:nth-child(3n + 2) { margin-top: 38%; }
  .scatter figure:nth-child(3n + 3) { margin-top: 14%; }
  .scatter figure:nth-child(6n + 5) { margin-top: 56%; }
}

@media (max-width: 560px) {
  .lb-nav { font-size: 1.3rem; padding: 0.6rem 0.7rem; }
}

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