:root {
  --ink: #0b0b0c;
  --paper: #f4f2ec;
  --line: #d9d6cc;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, video { display: block; }

/* Scroll progress */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--paper); z-index: 200; mix-blend-mode: difference;
  transition: width 0.1s linear;
}

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(18px, 4vw, 48px);
  mix-blend-mode: difference; color: #fff;
}
.brand-mark { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }
.index-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; color: inherit; font: inherit;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 500; cursor: pointer;
}
.idx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Index panel */
.index-panel {
  position: fixed; inset: 0; z-index: 150;
  background: #0b0b0c; color: var(--paper);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.index-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.index-top { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(18px, 4vw, 48px); }
.index-list {
  flex: 1; overflow-y: auto; padding: 0 clamp(18px, 4vw, 48px) 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.nav-item {
  display: grid; grid-template-columns: 44px 1fr; align-items: baseline;
  gap: 16px; padding: clamp(8px, 1.4vw, 16px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: padding-left 0.3s var(--ease), color 0.3s;
}
.nav-item:hover { padding-left: 14px; }
.nav-i { font-size: 0.72rem; color: rgba(255,255,255,0.4); font-family: 'Space Grotesk', sans-serif; }
.nav-b { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.5rem, 5vw, 3rem); font-weight: 600; letter-spacing: -0.02em; }
.nav-t { display: none; }
.nav-contact { padding-top: 28px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.55); }
@media (min-width: 820px) {
  .nav-item { grid-template-columns: 60px 1.2fr 1fr; }
  .nav-t { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.35); text-align: right; }
}

/* Hero */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding: 96px clamp(18px, 4vw, 48px) 40px;
  background: radial-gradient(120% 80% at 20% 0%, #17171a 0%, #0b0b0c 60%);
}
.hero-tag { display: flex; justify-content: space-between; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.4); }
.hero-mid { margin-top: auto; }
.hero h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: clamp(3.4rem, 14vw, 12rem); line-height: 0.86; letter-spacing: -0.04em;
}
.hero-meta { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 10px; }
.rule { display: none; }
.hero-foot { padding-top: 48px; display: flex; justify-content: space-between; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.35); }
@media (min-width: 768px) {
  .hero-meta { flex-direction: row; align-items: center; gap: 22px; }
  .rule { display: block; width: 36px; height: 1px; background: rgba(255,255,255,0.3); }
}

/* Chapter base — theme vars overridden per project */
.chapter {
  --bg: var(--paper); --fg: #0b0b0c; --muted: rgba(11,11,12,0.55); --accent: #e8432a; --hair: rgba(11,11,12,0.14);
  background: var(--bg); color: var(--fg);
  padding: clamp(56px, 9vw, 128px) clamp(18px, 4vw, 48px);
}
.ch-head { max-width: 1400px; margin: 0 auto clamp(36px, 6vw, 72px); }
.ch-head .eyebrow { color: var(--muted); }
.ch-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ch-head h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(2.8rem, 11vw, 9rem); line-height: 0.9; letter-spacing: -0.03em;
  margin-top: 14px; color: var(--fg);
}
.descriptor { margin-top: 16px; font-size: clamp(1.05rem, 2.2vw, 1.5rem); color: var(--muted); max-width: 42rem; font-weight: 400; }
.pills { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  border: 1px solid var(--hair); border-radius: 999px; padding: 6px 14px; color: var(--muted);
}

/* Layout primitives (shared) */
.bleed {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: clamp(14px, 2vw, 24px); margin-bottom: clamp(14px, 2vw, 24px);
  overflow: hidden; background: rgba(0,0,0,0.05);
}
.bleed > img, .bleed > video, .bleed .frame img, .bleed .frame video { width: 100%; height: auto; display: block; }
.bleed.tall > img, .bleed.tall > video, .bleed.tall .frame img, .bleed.tall .frame video {
  height: clamp(60vh, 78vh, 900px); object-fit: cover;
}
.bleed:not(.tall) > video { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.frame { position: relative; overflow: hidden; background: rgba(0,0,0,0.04); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.frame.lb { cursor: zoom-in; }
.frame.lb:hover img, .frame.lb:hover video { transform: scale(1.04); }
.zoom { transition: transform 8s ease-out; }

.two {
  max-width: 1400px; margin: clamp(14px, 2vw, 24px) auto; display: grid;
  grid-template-columns: 1fr; gap: clamp(10px, 1.4vw, 18px);
}
.two .frame { aspect-ratio: 4/3; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; } }

/* Masonry (css columns) */
.masonry { max-width: 1400px; margin: clamp(14px, 2vw, 24px) auto; column-gap: clamp(10px, 1.4vw, 18px); column-count: 1; }
.masonry .frame { break-inside: avoid; margin-bottom: clamp(10px, 1.4vw, 18px); }
.masonry .frame img, .masonry .frame video { height: auto; }
@media (min-width: 620px) { .masonry { column-count: 2; } }
@media (min-width: 1000px) { .masonry.m4 { column-count: 3; } }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ===== 01 BIRA — bright warm ===== */
.ch-bira { --bg: #f5f2ea; --fg: #17110e; --muted: rgba(23,17,14,0.55); --accent: #e8432a; --hair: rgba(23,17,14,0.14); }
.ring-row {
  max-width: 1400px; margin: clamp(28px,4vw,56px) auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 20px 10px; text-align: center;
}
@media (min-width: 760px) { .ring-row { grid-template-columns: repeat(6, 1fr); } }
.ring img { width: clamp(56px, 10vw, 104px); height: clamp(56px, 10vw, 104px); object-fit: contain; margin: 0 auto 10px; background: rgba(0,0,0,0.03); }
.ring span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.bottle-strip {
  max-width: 1400px; margin: clamp(14px,2vw,24px) auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end;
  background: linear-gradient(180deg, #ece6da 0%, #f5f2ea 100%); padding: 32px 16px; border-radius: 4px;
}
@media (min-width: 760px) { .bottle-strip { grid-template-columns: repeat(6, 1fr); } }
.bottle-strip .frame { background: transparent; aspect-ratio: 3/4; }
.bottle-strip .frame img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease); }
.bottle-strip .frame:hover img { transform: translateY(-10px); }
.mosaic { max-width: 1400px; margin: clamp(14px,2vw,24px) auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: 1fr; }
.mosaic .frame { aspect-ratio: 3/2; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .mosaic .a { grid-column: span 2; } .mosaic .c { grid-row: span 2; aspect-ratio: auto; }
  .mosaic .d, .mosaic .e { aspect-ratio: 4/3; }
}

/* ===== 02 GRIZLY — dark premium ===== */
.ch-grizly { --bg: #0d1310; --fg: #f2efe8; --muted: rgba(242,239,232,0.55); --accent: #c9a24b; --hair: rgba(242,239,232,0.16); }
.ch-grizly { background: radial-gradient(120% 90% at 80% 0%, #142019 0%, #0d1310 55%); }
.mascot { max-width: 460px; margin: clamp(20px,4vw,48px) auto; }
.mascot img { width: 100%; height: auto; }
.abv-split { max-width: 1400px; margin: clamp(14px,2vw,24px) auto; display: grid; grid-template-columns: 1fr; gap: clamp(10px,1.4vw,18px); }
@media (min-width: 760px) { .abv-split { grid-template-columns: 1fr 1fr; } }
.abv { background: #0a0f0c; border: 1px solid var(--hair); padding: 22px; }
.abv img { object-fit: contain; height: auto; }
.abv-tag { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 16px; }

/* ===== 03 FRATELLI — elegant wine ===== */
.ch-fratelli { --bg: #efe9dc; --fg: #2a2118; --muted: rgba(42,33,24,0.55); --accent: #7a6a3f; --hair: rgba(42,33,24,0.16); }
.ch-fratelli h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0; font-size: clamp(3.4rem, 13vw, 11rem); }
.ch-fratelli .descriptor { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.center-fig .frame { aspect-ratio: auto; background: transparent; }
.center-fig.portrait, .portrait img { }
.center-fig .frame img { object-fit: contain; height: clamp(360px, 60vh, 720px); }

/* ===== 04 JAYWALKING — stark streetwear ===== */
.ch-jay { --bg: #0c0c0c; --fg: #f2f2f2; --muted: rgba(242,242,242,0.55); --accent: #f2f2f2; --hair: rgba(242,242,242,0.2); }
.ch-jay .ch-head h2 { letter-spacing: -0.05em; }
.jay-grid { max-width: 1400px; margin: clamp(14px,2vw,24px) auto; display: grid; grid-template-columns: 1fr; gap: 8px; }
.jay-grid .frame { aspect-ratio: 3/4; }
.jay-grid .wide { aspect-ratio: 3/4; }
@media (min-width: 760px) {
  .jay-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
  .jay-grid .wide { grid-column: span 2; aspect-ratio: 16/11; }
  .jay-grid .tallish { grid-row: span 1; }
}

/* ===== 05 BAS PAANI — clean airy ===== */
.ch-bas { --bg: #eaf1f6; --fg: #0f2233; --muted: rgba(15,34,51,0.5); --accent: #1b6fb0; --hair: rgba(15,34,51,0.14); }
.bas-hero { max-width: 1400px; margin: clamp(14px,2vw,24px) auto; display: grid; grid-template-columns: 1fr; gap: clamp(14px,2vw,24px); align-items: center; }
@media (min-width: 820px) { .bas-hero { grid-template-columns: 0.9fr 1.1fr; } }
.logo-fig { display: flex; align-items: center; justify-content: center; padding: clamp(24px,5vw,72px); }
.logo-fig img { width: 100%; max-width: 420px; height: auto; }
.bas-hero .frame { aspect-ratio: 4/3; background: #fff; }
.bas-hero .frame img { object-fit: contain; padding: 6%; }

/* Contact */
.contact {
  background: #0b0b0c; color: var(--paper);
  padding: clamp(64px, 10vw, 140px) clamp(18px, 4vw, 48px);
}
.contact .eyebrow { color: rgba(255,255,255,0.55); }
.contact h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(2.8rem, 11vw, 9rem); line-height: 0.9; letter-spacing: -0.03em; margin-top: 20px;
}
.contact-links { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; font-size: 1.2rem; }
.contact-links a { text-decoration: underline; text-underline-offset: 5px; transition: color 0.25s; }
.contact-links a:hover { color: rgba(255,255,255,0.55); }
@media (min-width: 768px) { .contact-links { flex-direction: row; gap: 44px; } }
.foot-row { margin-top: clamp(56px, 10vw, 110px); display: flex; justify-content: space-between; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.35); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(8,8,9,0.94);
  display: none; align-items: center; justify-content: center; padding: 4vw;
  opacity: 0; transition: opacity 0.3s var(--ease); cursor: zoom-out;
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.lb-close { position: fixed; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; z-index: 301; }