@font-face {
  font-family: 'Inter';
  src: url('/assets/inter.f11d729bb0.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f0f0e;
  --fg: #e9e5dc;
  --muted: #8f8a80;
  --line: #262523;
  --accent: #c8924a;
  --pad: clamp(1rem, 4vw, 3rem);
  --row: 118px;
  color-scheme: dark;
}

@media (min-width: 700px) { :root { --row: 240px; } }
@media (min-width: 1200px) { :root { --row: 300px; } }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.6 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding: 1.5rem var(--pad) 1.25rem;
}

.wordmark {
  font-weight: 200;
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: .25rem 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--fg); }
.site-nav a[aria-current] { color: var(--fg); border-bottom-color: var(--accent); }

@media (min-width: 900px) {
  .site-nav { gap: 1.25rem; font-size: .8rem; }
}

/* Page intro */

.intro {
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--pad) clamp(1.25rem, 3vw, 2rem);
  max-width: 46rem;
}
.intro h1 {
  margin: 0 0 .4rem;
  font-weight: 200;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: .06em;
  line-height: 1.2;
}
.intro p { margin: 0; color: var(--muted); }

/* Photos */

.photo {
  display: block;
  background: var(--bg-photo, #1a1a19);
  overflow: hidden;
}
.photo img { width: 100%; transition: opacity .2s; }
.photo:hover img { opacity: .9; }
.photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Portfolio: one photo at a time, verticals capped by viewport height. */
.sequence {
  display: grid;
  justify-items: center;
  gap: clamp(2.5rem, 9vw, 7rem);
  padding: 0 var(--pad) clamp(3rem, 8vw, 6rem);
}
.seq-row { display: contents; }
.sequence .photo { order: var(--phone, 0); width: min(100%, 1400px, calc(86vh * var(--ar))); }

/* Wider screens: fixed rows. Width in proportion to aspect ratio makes every
   photo in a row the same height, and each row always fills the width. */
@media (min-width: 900px) {
  .sequence {
    display: grid;
    justify-items: stretch;
    gap: 10px;
    max-width: 1800px;
    margin-inline: auto;
  }
  .seq-row { display: flex; gap: 10px; }
  .sequence .photo { order: 0; width: auto; min-width: 0; flex: var(--ar) 1 0; }
}

/* Category grid: justified rows, each item grows in proportion to its aspect ratio. */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--pad) clamp(3rem, 8vw, 6rem);
}
.grid::after { content: ''; flex-grow: 1000000; }
.grid .photo { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row)); }

/* About */

.prose {
  max-width: 38rem;
  padding: 0 var(--pad) clamp(3rem, 8vw, 6rem);
}
.prose p { margin: 0 0 1.1rem; }
.prose a { color: var(--accent); }

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem var(--pad) 2rem;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .04em;
}

/* Lightbox (site.js) */

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 8, 8, .97);
  color: var(--fg);
}
.lightbox::backdrop { background: rgba(8, 8, 8, .97); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox:focus { outline: none; }
.lightbox figure { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 3.5rem .5rem; }
.lightbox picture, .lightbox img {
  max-width: 100%;
  max-height: calc(100dvh - 7rem);
  width: auto;
  object-fit: contain;
}
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--fg);
  font: 200 2.4rem/1 Inter, system-ui, sans-serif;
  padding: .6rem 1rem;
  cursor: pointer;
  opacity: .7;
  text-shadow: 0 0 6px rgba(0, 0, 0, .8);
}
.lightbox button:focus { outline: none; }
.lightbox button:focus-visible { outline: 1px solid var(--accent); }
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lightbox .lb-close { top: .25rem; right: .25rem; }
.lightbox .lb-prev { left: 0; top: 50%; translate: 0 -50%; }
.lightbox .lb-next { right: 0; top: 50%; translate: 0 -50%; }
.lightbox .lb-count {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--muted);
}
@media (hover: none) {
  .lightbox .lb-prev, .lightbox .lb-next { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .photo img { transition: none; }
}

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