:root {
  --paper: #e8e8e6;
  --ink: #1a1816;
  --muted: #6f6d6a;
  --line: rgba(26, 24, 22, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Figtree", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
body.lagoon, body.black, body.home, body.also {
  --paper: #1b1c1e;
  --ink: #f3f0ea;
  --muted: #a9a49c;
  --line: rgba(243, 240, 234, 0.12);
  background: #1b1c1e;
  color: #f3f0ea;
}
body.home { background: #1c1b19; }
body.lagoon { background: #171a1c; }
body.black { background: #101010; }
body.burano { background: #e4dfd8; }
body.quiet { background: #e7e8e4; }
body.also { background: #12110f; }
body.home .nav { background: rgba(28, 27, 25, 0.92); }
body.lagoon .nav { background: rgba(23, 26, 28, 0.92); }
body.black .nav { background: rgba(16, 16, 16, 0.92); }
body.burano .nav { background: rgba(228, 223, 216, 0.94); }
body.quiet .nav { background: rgba(231, 232, 228, 0.94); }
body.also .nav { background: rgba(18, 17, 15, 0.94); }
body.lagoon .intro p a, body.home .intro p a,
body.lagoon .intro .links a, body.home .intro .links a { border-bottom-color: #f4f1ec; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 18px 6vw;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(232, 232, 230, 0.94);
}
.brand {
  font-family: "Fraunces", serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: 22px;
}
.home .brand { font-size: 28px; }
.nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: flex-end;
  max-width: 100%;
}
.nav a {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.nav a:hover, .nav a.active { color: var(--ink); }

.hero {
  display: block;
  margin: 8px 8vw 0;
  position: relative;
}
.hero img {
  width: 100%;
  height: calc(100svh - 150px);
  object-fit: cover;
  object-position: center 62%;
}
.hero-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0 0;
  color: var(--muted);
  font-family: "Fraunces", serif;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
.hero-caption a { color: var(--ink); }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 6vw 8px;
  border-top: 1px solid var(--line);
}
.facts p { margin: 0; font-size: 14px; color: var(--muted); }
.facts strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }

.start { padding: 64px 6vw 20px; }
.start h2 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-size: 32px;
  letter-spacing: -0.04em;
  margin: 0 0 22px;
}
.picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.picks a { text-decoration: none; }
.picks img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.picks h3 { font-family: "Fraunces", serif; font-weight: 500; font-size: 20px; margin: 12px 0 2px; }
.picks p { margin: 0; color: var(--muted); font-size: 14px; }
.picks .cost { color: var(--ink); margin-top: 6px; }

.intro {
  padding: 120px 8vw 16px;
  max-width: 680px;
}
.intro h1 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.intro p { margin: 0; color: var(--muted); font-size: 17px; max-width: 460px; line-height: 1.6; }
.intro .links { display: flex; gap: 28px; margin-top: 28px; }
.intro .links a {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.intro p a { color: var(--ink); border-bottom: 1px solid var(--ink); }

.albums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px 36px;
  padding: 72px 8vw 120px;
}
.albums figure { margin: 0; }
.albums img { width: 100%; aspect-ratio: 4/5; object-fit: cover; min-height: 220px; background: #2a2926; }
.albums figcaption {
  margin-top: 14px;
  font-family: "Fraunces", serif;
  font-size: 18px;
  color: var(--muted);
}
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pair .wide { grid-column: 1 / -1; }
.pair .wide img { aspect-ratio: 21/9; object-position: center; }
.pair figcaption {
  margin-top: 16px;
  font-family: "Fraunces", serif;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.page { padding: 36px 8vw 120px; }
.page-title { margin: 20px 0 64px; }
.gallery { gap: 88px 40px; }
.shot figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: "Fraunces", serif;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.shot h3 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.page-title h1 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.04em;
  margin: 0;
}
.page-title p { margin: 0; color: var(--muted); max-width: 280px; font-size: 15px; }

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px 40px;
}
.shot { margin: 0; }
.shot img { width: 100%; }
.shot.door img { aspect-ratio: 3/4; object-fit: cover; }
.shot.wide { grid-column: span 2; }
.shot.wide img { aspect-ratio: 16/10; object-fit: cover; }
.also .gallery { grid-template-columns: 1fr; gap: 120px; max-width: 820px; margin: 0 auto; }
.also .shot.full img, .also .shot.glass img,
.quiet .shot.full img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.shot figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: "Fraunces", serif;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.shot h3 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}

.catalog {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px 32px;
}
.product img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.product h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  margin: 14px 0 4px;
}
.product p { margin: 0; color: var(--muted); font-size: 14px; }
.product .cost { color: var(--ink); margin-top: 8px; }

.post { max-width: 680px; }
.post .when { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.post h2 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  margin: 0 0 28px;
}
.post img { width: 100%; margin: 0 0 24px; }
.post p { margin: 0 0 16px; font-size: 18px; line-height: 1.6; max-width: 560px; }

.team-page { min-height: 70vh; }
.gate { max-width: 420px; margin: 12vh auto 0; }
.gate .when { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.gate h1 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.gate p { margin: 0 0 22px; color: var(--muted); }
.gate input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  padding: 10px 0;
}
.gate button {
  margin-top: 22px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}
.gate .miss { color: #8a4a3a; margin-top: 16px; }
.waiting { color: var(--muted); }
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 20px;
}
.team-grid a, .team-grid button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.team-grid img { width: 100%; height: auto; }
.viewer {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #141311;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.viewer[hidden] { display: none; }
.viewer-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  color: #f4f1ea;
  background: rgba(20, 19, 17, 0.86);
  font-size: 14px;
}
.viewer-bar button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.slide {
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 72px 16px 32px;
  box-sizing: border-box;
}
.slide img { max-width: 100%; max-height: 78svh; width: auto; height: auto; }
.slide a { color: #f4f1ea; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(244,241,234,0.4); padding: 8px 16px; border-radius: 4px; text-decoration: none; transition: background 0.2s; } .slide a:hover { background: rgba(244,241,234,0.1); }
.matches { list-style: none; padding: 0; margin: 48px 0 0; }
.matches a { font-family: Fraunces, serif; font-size: 28px; font-weight: 460; }

footer {
  padding: 8px 6vw 40px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 800px) {
  .nav, .hero, .intro, .pair, .albums, .page, footer { padding-left: 20px; padding-right: 20px; }
  .nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nav nav { width: 100%; justify-content: flex-start; gap: 8px 14px; }
  .nav a { letter-spacing: 0.06em; font-size: 12px; }
  .hero { margin: 0; }
  .hero img { height: 72svh; }
  .pair, .albums, .gallery, .catalog { grid-template-columns: 1fr; gap: 64px; }
  .shot.wide { grid-column: auto; }
  .page-title { flex-direction: column; align-items: flex-start; }
  .facts, .picks { grid-template-columns: 1fr 1fr; }
  .start, .facts { padding-left: 20px; padding-right: 20px; }
  .home .brand { font-size: 22px; }
  .team-grid { grid-template-columns: 1fr; }
}