@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --ink: #11110f;
  --paper: #e9e5dc;
  --cream: #f5f1e8;
  --white: #f7f4ec;
  --muted: #6e6a62;
  --accent: #b69b68;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
}
body.lightbox-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(1380px, calc(100% - 72px)); margin-inline: auto; }

.gallery-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  min-height: 86px;
  padding: 20px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--white);
  background: rgba(15, 15, 13, .74);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 13px; text-transform: uppercase; }
.brand-mark {
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 14px var(--serif);
}
.brand-text { font-size: 10px; letter-spacing: .17em; line-height: 1.15; }
.gallery-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.gallery-nav a,
.gallery-home {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .82;
  transition: opacity .2s, color .2s;
}
.gallery-nav a:hover,
.gallery-nav a:focus-visible,
.gallery-nav a[aria-current="page"] { color: #e3c993; opacity: 1; }
.gallery-phone { font-size: 11px; letter-spacing: .06em; white-space: nowrap; }

.gallery-hero {
  min-height: 72svh;
  padding: 170px 0 90px;
  color: var(--white);
  display: grid;
  align-items: end;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #191815;
}
.gallery-hero img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,8,.88) 0%, rgba(10,10,8,.62) 37%, rgba(10,10,8,.14) 72%),
    linear-gradient(180deg, rgba(10,10,8,.14), rgba(10,10,8,.56));
}
.gallery-kicker {
  margin-bottom: 27px;
  color: #c8c2b6;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gallery-hero h1 {
  margin: 0;
  max-width: 1050px;
  font: 400 clamp(72px, 10vw, 154px)/.82 var(--serif);
  font-style: italic;
  letter-spacing: -.055em;
}
.gallery-hero p {
  max-width: 610px;
  margin: 42px 0 0;
  color: #d0cbc1;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.45;
}

.gallery-section { padding: 116px 0 134px; }
.gallery-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 46px;
}
.gallery-intro h2 {
  margin: 0;
  font: 400 clamp(48px, 6vw, 88px)/.9 var(--serif);
  letter-spacing: -.045em;
}
.gallery-intro p { max-width: 480px; margin: 0; color: var(--muted); font-size: 17px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
}
.gallery-item {
  position: relative;
  min-height: 360px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #bbb2a4;
  color: var(--white);
  cursor: zoom-in;
  text-align: left;
}
.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; min-height: 732px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(7,7,6,.74) 100%);
  pointer-events: none;
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.035); }
.gallery-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; z-index: 2; }
.gallery-caption {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 19px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}
.gallery-source {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gallery-subject { color: rgba(255,255,255,.82); font-size: 12px; text-align: right; }

.gallery-footer {
  padding: 26px 0 34px;
  color: #7d786f;
  background: #11110f;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gallery-footer .container { display: flex; justify-content: space-between; gap: 20px; }

.lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 80px 110px;
  color: var(--white);
  background: rgba(8,8,7,.96);
}
.lightbox[hidden] { display: none; }
.lightbox-image { max-width: min(1400px, 100%); max-height: calc(100vh - 180px); object-fit: contain; }
.lightbox-meta {
  position: fixed;
  left: 50%;
  bottom: 27px;
  width: min(820px, calc(100% - 180px));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
}
.lightbox-meta strong { letter-spacing: .13em; text-transform: uppercase; }
.lightbox-meta span { color: #aaa69e; }
.lightbox-control {
  position: fixed;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(16,16,14,.74);
  color: var(--white);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.lightbox-close { top: 24px; right: 25px; padding: 13px 17px; }
.lightbox-prev,
.lightbox-next { top: 50%; transform: translateY(-50%); padding: 15px 14px; writing-mode: vertical-rl; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-control:hover,
.lightbox-control:focus-visible { background: var(--white); color: var(--ink); }

@media (max-width: 980px) {
  .container { width: min(100% - 36px, 760px); }
  .gallery-header { padding: 16px 18px; min-height: 72px; }
  .gallery-nav { display: none; }
  .gallery-home { margin-left: auto; }
  .gallery-hero { min-height: 66svh; padding: 145px 0 64px; }
  .gallery-hero h1 { font-size: clamp(64px, 15vw, 108px); }
  .gallery-section { padding: 84px 0 96px; }
  .gallery-intro { display: block; }
  .gallery-intro p { margin-top: 24px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item { min-height: 300px; }
  .gallery-item--tall { min-height: 612px; }
  .lightbox { padding: 70px 24px 110px; }
  .lightbox-prev,
  .lightbox-next { top: auto; bottom: 25px; transform: none; writing-mode: horizontal-tb; padding: 13px 15px; }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }
  .lightbox-meta { bottom: 77px; width: calc(100% - 40px); }
  .lightbox-image { max-height: calc(100vh - 190px); }
}

@media (max-width: 620px) {
  .brand-text { display: none; }
  .gallery-header { gap: 12px; }
  .gallery-home { font-size: 9px; }
  .gallery-phone { font-size: 10px; }
  .gallery-hero { min-height: 620px; }
  .gallery-hero::after {
    background: linear-gradient(90deg, rgba(10,10,8,.76), rgba(10,10,8,.24)), linear-gradient(180deg, rgba(10,10,8,.2), rgba(10,10,8,.7));
  }
  .gallery-hero h1 { font-size: clamp(58px, 18vw, 82px); }
  .gallery-hero p { margin-top: 30px; font-size: 15px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item,
  .gallery-item--wide,
  .gallery-item--tall { grid-column: auto; grid-row: auto; min-height: 315px; }
  .gallery-caption { left: 17px; right: 17px; bottom: 16px; }
  .gallery-footer .container { display: block; }
  .gallery-footer span { display: block; margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery-item img { transition: none; }
}