/* Home page — specific layouts */

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(48px, 8vh, 96px);
  padding-top: 100px;
  overflow: hidden;
  margin-top: -77px; /* tuck under sticky nav */
}
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo image-slot { width: 100%; height: 100%; --slot-bg: #19191a; --slot-fg: #6b6b6e; }
.hero-photo .slot-img { object-position: 50% 18%; }  /* favor the subject's face, not a centered crop */
.hero-photo-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25,25,26, 0.55) 0%,
      rgba(25,25,26, 0.15) 35%,
      rgba(25,25,26, 0.05) 55%,
      rgba(25,25,26, 0.78) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(25,25,26,0) 0%, rgba(25,25,26,0.35) 70%);
}
.hero-content { position: relative; z-index: 1; width: 100%; }
.hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: clamp(40px, 8vw, 96px);
}
.hero-meta-right { color: color-mix(in oklab, var(--paper) 60%, transparent); }

.hero-title {
  color: var(--paper);
  margin: 0;
  font-weight: 500;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--lime);
}

.hero-deck { max-width: 640px; margin-top: 36px; }
.hero-deck p { margin: 0; color: color-mix(in oklab, var(--paper) 88%, transparent); }

.hero-ctas {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 48px;
}

.hero-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-top: clamp(56px, 9vw, 110px);
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--paper) 22%, transparent);
}
.hero-ticker { display: grid; gap: 8px; max-width: 720px; }
.hero-ticker-headline {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  color: color-mix(in oklab, var(--paper) 90%, transparent);
  line-height: 1.4;
}
.hero-scroll { display: flex; align-items: center; gap: 14px; }
.hero-scroll-line { width: 80px; height: 1px; background: color-mix(in oklab, var(--paper) 50%, transparent); position: relative; overflow: hidden; }
.hero-scroll-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 30%; height: 100%; background: var(--lime);
  animation: scrollIndicate 2.4s ease-in-out infinite;
}
@keyframes scrollIndicate { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(330%)} }

@media (max-width: 720px) {
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-footer { grid-template-columns: 1fr; }
}

/* ============ INDEX BAR ============ */
.index-bar {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  position: relative; z-index: 2;
}
.index-bar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: center;
}
.index-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.index-list li {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.index-list .num {
  font-family: var(--display); font-size: 14px;
  font-weight: 600; color: var(--palm); letter-spacing: 0;
}
@media (max-width: 880px) {
  .index-bar-inner { grid-template-columns: 1fr; }
  .index-list { justify-content: flex-start; }
}

/* ============ WHAT WE DO ============ */
.what-we-do { padding: var(--section) 0; }
.wwd-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px clamp(40px, 6vw, 96px);
  align-items: start;
}
.wwd-header h2 { margin: 18px 0 0; }
.wwd-header h2 em { color: var(--palm); font-style: italic; font-weight: 500; }

.wwd-lede { padding-top: 12px; }
.wwd-lede p { margin: 0; }

/* What-we-do: photo-led contact sheet (replaces the old text-column wall) */
.wwd-frames {
  grid-column: 1 / -1;
  list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.wwd-frame { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.wwd-frame figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-warm); }
.wwd-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.wwd-frame:hover img { transform: scale(1.04); }
/* contact-sheet stagger — drop the 2nd & 4th frame so the row reads as a sheet, not a spec table */
.wwd-frame:nth-child(2), .wwd-frame:nth-child(4) { margin-top: clamp(28px, 5vw, 64px); }
.wwd-cap {
  margin: 0; display: flex; gap: 10px; align-items: baseline;
  font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: -0.01em; line-height: 1.25; color: var(--ink);
}
.wwd-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--palm); }

@media (max-width: 980px) {
  .wwd-grid { grid-template-columns: 1fr; gap: 48px; }
  .wwd-frames { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .wwd-frame:nth-child(2), .wwd-frame:nth-child(4) { margin-top: 0; }
}
@media (max-width: 520px) { .wwd-frames { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wwd-frame img { transition: none; } }

/* ============ DIPTYCH ============ */
.diptych { padding: 40px 0 var(--section); }
.diptych-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.diptych-photo {
  position: relative; margin: 0;
  background: var(--paper-warm); overflow: hidden;
}
.diptych-photo image-slot { width: 100%; height: 100%; }
.diptych-photo--tall {
  grid-column: 1 / 2; grid-row: 1 / 3;
  aspect-ratio: 4 / 5.5;
}
.diptych-copy {
  grid-column: 2 / 4; grid-row: 1 / 2;
  padding: clamp(20px, 4vw, 60px) clamp(12px, 3vw, 40px);
}
/* pull-quote in the serif (Faustina) italic — editorial voice, not the headline grotesque */
.diptych-quote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12;
  letter-spacing: -0.01em; color: var(--ink);
}
.diptych-quote em { font-style: italic; }
.diptych-photo--wide {
  grid-column: 2 / 4; grid-row: 2 / 3;
  aspect-ratio: 16 / 9;
}
@media (max-width: 880px) {
  .diptych-grid { grid-template-columns: 1fr; }
  .diptych-photo--tall, .diptych-photo--wide, .diptych-copy {
    grid-column: 1 / -1; grid-row: auto;
  }
  .diptych-photo--tall { aspect-ratio: 4/5; }
}

/* ============ IMPACT BAND ============ */
.impact {
  background: var(--ink-deep);
  color: var(--paper);
  padding: var(--section) 0;
  position: relative; overflow: hidden;
}
.impact::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, color-mix(in oklab, var(--palm) 30%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
.impact > .wrap { position: relative; }
.impact-head h2 em { font-style: italic; }
.impact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: color-mix(in oklab, var(--paper) 12%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--paper) 20%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--paper) 20%, transparent);
  margin: 80px 0 60px;
}
.impact-cell {
  background: var(--ink-deep);
  padding: 56px 28px 56px 0;
}
.impact-cell:not(:first-child) { padding-left: 28px; }
.impact-num {
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 500;
  line-height: 0.95;
  color: var(--paper);
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.impact-num .plus { color: var(--lime); font-weight: 400; }
.impact-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 65%, transparent);
  line-height: 1.7;
}
@media (max-width: 980px) {
  .impact-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .impact-grid { grid-template-columns: 1fr; }
  .impact-cell, .impact-cell:not(:first-child) { padding: 40px 0; }
}

.impact-marquee {
  overflow: hidden;
  border-top: 1px solid color-mix(in oklab, var(--paper) 15%, transparent);
  padding-top: 30px;
  margin-top: 20px;
}
.impact-marquee-track {
  display: flex; gap: 30px;
  font-family: var(--display); font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 500; letter-spacing: 0.04em;
  white-space: nowrap;
  color: color-mix(in oklab, var(--paper) 60%, transparent);
  animation: marquee 60s linear infinite;
  width: max-content;
}
.impact-marquee-track span:nth-child(even) { color: var(--lime); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ GALLERY ============ */
.gallery { padding: var(--section) 0; }
.gallery-head {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 96px);
}
@media (max-width: 880px) {
  .gallery-head { grid-template-columns: 1fr; }
}

/* Robust aspect-ratio grid: no vw row-spans, no conflicting/auto-overlapping
   placement. The old 12-col mosaic (gs-5 pinned to col 6 while gs-2/3/4
   auto-placed into the same tracks) let frames overlap and bleed up over the
   headline at narrower widths. Two clean rows: 3 portraits, then 2 wides. */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  padding: 0 var(--gutter);
  align-items: start;
}
.gs { position: relative; margin: 0; background: var(--paper-warm); overflow: hidden; }
.gs .slot-img { width: 100%; height: 100%; object-fit: cover; }
.gs-1, .gs-2, .gs-3 { grid-column: span 2; aspect-ratio: 4 / 5; }
.gs-4, .gs-5 { grid-column: span 3; aspect-ratio: 16 / 10; }

@media (max-width: 880px) {
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .gs-1, .gs-2, .gs-3, .gs-4, .gs-5 { grid-column: span 1; aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
  .gallery-strip { grid-template-columns: 1fr; }
}

/* ============ CLOSING ============ */
.closing {
  position: relative;
  color: var(--paper);
  padding: clamp(120px, 18vw, 240px) 0 clamp(120px, 14vw, 200px);
  overflow: hidden;
}
.closing-photo { position: absolute; inset: 0; z-index: 0; }
.closing-photo image-slot { width: 100%; height: 100%; --slot-bg: #19191a; --slot-fg: #6b6b6e; }
.closing-photo .slot-img { object-position: 50% 12%; }  /* show face + headdress, not a centered crop */
.closing-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(25,25,26, 0.86) 0%, rgba(25,25,26, 0.55) 50%, rgba(25,25,26, 0.86) 100%);
}
.closing-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
.closing-copy h2 em { font-style: italic; }
.closing-ctas { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 48px; }

.closing-card {
  background: color-mix(in oklab, var(--paper) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
  padding: 32px 32px 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.closing-card ul { list-style: none; padding: 0; margin: 22px 0 0; }
.closing-card li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
  border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
}
.closing-card li:last-of-type { border-bottom: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); }
.closing-card-title {
  font-family: var(--display); font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--paper);
}
.closing-card-sub {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 55%, transparent);
  margin-top: 4px;
}
.closing-card-tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime);
  border-bottom: 1px solid var(--lime);
  padding-bottom: 2px;
}
.closing-card-foot {
  display: grid; gap: 8px; margin-top: 24px;
}
@media (max-width: 880px) {
  .closing-grid { grid-template-columns: 1fr; }
}