/* =========================================================
   Lodger Films — About page
   Reuses the landing system (landing.css + landing-v3.css).
   This file adds: the studio statement, the two founder
   bios, the team band, and the behind-the-scenes gallery.
   Loaded AFTER landing.css / work.css so equal-specificity
   rules win.
   ========================================================= */

.about-body { background: var(--paper); }

/* page chrome shares the landing masthead via .work-headwrap / .work-shell */
.about-body .site-footer { padding-top: 0; }

/* current page in nav */
.about-body .nav a.is-current { color: var(--ink); }

/* intro sub line — sits directly under the title, left-aligned */
.about-intro { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.about-intro > div { width: 100%; }
.about-intro .wi-sub {
  text-align: left;
  align-self: auto;
  padding-bottom: 0;
  max-width: 52ch;
  margin-top: 1.1rem;
}

/* ===================== STUDIO STATEMENT ===================== */
.studio-statement {
  padding: clamp(2rem, 4vw, 3.5rem) var(--frame-pad) clamp(2rem, 4vw, 4rem);
}
.statement-grid {
  max-width: var(--maxw);
  margin: 0 auto;
}
.statement-grid .eyebrow { margin-bottom: clamp(0.6rem, 1.2vw, 0.9rem); }
.statement-lead {
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 100%;
  text-wrap: balance;
}
.statement-lead em { font-style: normal; color: var(--muted-2); }
.statement-foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
}
.stat-item {
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: clamp(1.1rem, 1.7vw, 1.5rem) clamp(1.4rem, 2.2vw, 1.9rem);
  min-width: clamp(190px, 21vw, 240px);
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.15rem);
}
.stat-item .k {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  margin: 0;
  flex: none;
}
.stat-item .v {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  padding-left: clamp(0.85rem, 1.4vw, 1.15rem);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 11ch;
  text-wrap: balance;
}

/* ===================== FOUNDERS ===================== */
.founders { padding: clamp(3rem, 6vw, 7rem) var(--frame-pad); }
.founders-inner { max-width: var(--maxw); margin: 0 auto; }
.founders-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.founders-head .section-title,
.team-head .section-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(28px, 3.8vw, 46px);
}

.founder {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}
.founder:last-child { border-bottom: 1px solid var(--line); }
.founder.reverse { grid-template-columns: 1.18fr 0.82fr; }
.founder.reverse .founder-portrait { order: 2; }

/* portrait */
.founder-portrait {
  position: relative;
  width: 100%;
}
.founder-portrait .founder-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(11, 11, 12, 0.14);
}
.founder-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(11, 11, 12, 0.78);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.founder-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6fd08c;
}

/* text */
.founder-body { max-width: 46ch; }
.founder-index {
  font-size: 13px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.founder-name {
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0.9rem 0 0;
}
.founder-role {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0;
}
.founder-bio {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 1.5rem 0 0;
  text-wrap: pretty;
}
.founder-bio + .founder-bio { margin-top: 1rem; }
.founder-tags { display: flex; flex-wrap: wrap; gap: 0.45rem 0.55rem; margin-top: 1.75rem; }
.founder-tags span {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}
.founder-credit {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
.founder-credit a {
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.25s ease;
}
.founder-credit a:hover { border-color: var(--ink); }

/* ===================== TEAM BAND ===================== */
.team { padding: clamp(3rem, 6vw, 6rem) var(--frame-pad) clamp(2rem, 4vw, 4rem); }
.team-inner { max-width: var(--maxw); margin: 0 auto; }
.team-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.team-head .section-title { margin-top: 0.6rem; }
.team-head p.team-note {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 32ch;
  margin: 0;
}
img.team-photo {
  width: 100%;
  height: auto;
  /* Box-to-image (owner rule, 03-04): crew-1.jpeg is a ~3:2 landscape group
     shot. The frame was 21/9 (extreme letterbox) which cropped the top/bottom
     of the crew. Match the photo's ~3:2 so the whole crew shows uncropped. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(11, 11, 12, 0.16);
}

/* ===================== BEHIND THE SCENES ===================== */
.bts { padding: clamp(3rem, 6vw, 7rem) var(--frame-pad) clamp(4rem, 7vw, 8rem); }
.bts-inner { max-width: var(--maxw); margin: 0 auto; }
.bts-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.bts-head .section-title { max-width: none; }

/* see full gallery button */
.bts-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.gallery-btn svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.gallery-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.gallery-btn:hover svg { transform: translateX(3px); }

.bts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 13vw, 190px);
  gap: clamp(0.6rem, 1.1vw, 0.9rem);
  /* dense backfills the holes that span items (g-wide/g-tall/g-big) leave in the
     auto-placement — without it a big gallery shows large empty gaps (#3/#5). */
  grid-auto-flow: dense;
}
.bts-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(11, 11, 12, 0.10);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  will-change: transform;
}
.bts-grid img:hover {
  transform: scale(1.03);
  z-index: 6;
  box-shadow: 0 30px 68px rgba(11, 11, 12, 0.26);
}
.bts-grid .g-wide { grid-column: span 2; }
.bts-grid .g-tall { grid-row: span 2; }
.bts-grid .g-big  { grid-column: span 2; grid-row: span 2; }

/* Calm entrance: BTS + gallery images and the team banner rise + fade in on load.
   Pure-CSS load animation (keyframe ph-rise defined in landing.css) — reliable, no
   JS scroll-reveal that could leave large blocks stuck hidden. A gentle 4-column
   stagger gives the grid a calm left-to-right cascade. */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll-driven entrance: BTS/gallery images and the team banner rise+fade as
     they scroll into view (each on its own position), so below-the-fold sections
     animate when reached. Pure CSS; non-supporting browsers show static images. */
  @supports (animation-timeline: view()) {
    .bts-grid img, .team-photo {
      animation-name: ph-rise;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* ===================== GALLERY PAGE ===================== */
.gallery-back {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 1.1rem;
  transition: color 0.25s ease;
}
.gallery-back:hover { color: var(--ink); }
.gallery { padding: clamp(2rem, 4vw, 3.5rem) var(--frame-pad) clamp(4rem, 7vw, 8rem); }
.gallery-inner { max-width: var(--maxw); margin: 0 auto; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .founder { grid-template-columns: 1fr; gap: 2rem; }
  /* .founder.reverse's base rule (.founder.reverse, 0-2-0) out-specifies the
     single-column .founder rule above (0-1-0), so founder #2 never stacked — it
     just kept shrinking as two columns. Re-state it here at matching specificity
     so BOTH founders collapse to one column identically (RESP-04 bug). */
  .founder.reverse { grid-template-columns: 1fr; }
  .founder.reverse .founder-portrait { order: 0; }
  /* Larger, centered portrait so the stacked layout fills the column instead of
     leaving lopsided empty space to the right. */
  .founder-portrait { max-width: 520px; margin-inline: auto; }
  .bts-grid { grid-auto-rows: clamp(110px, 22vw, 170px); }
}
@media (max-width: 600px) {
  .founders-head .section-title,
  .team-head .section-title { white-space: normal; }
  .bts-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(120px, 38vw, 200px);
  }
  .bts-grid .g-big { grid-column: span 2; }
  .team-photo { aspect-ratio: 4 / 3; }
  .statement-foot { gap: 1.75rem 2.5rem; }
}
/* 320px polish: the stat cards carry a 190px min-width that can edge past a
   narrow phone's content box — let them go full-width so they stack cleanly. */
@media (max-width: 400px) {
  .stat-item { min-width: 100%; }
  .statement-foot { gap: 1rem; }
}

/* Phase 3 (03-04): per-image focal tuning. The frames already crop-to-fill via
   the existing object-fit: cover (no fit/aspect/layout CSS added here, D-09);
   only object-position is nudged where IMAGE-MAP flagged an off-center subject.
   founder-rob is a landscape source in the 4:5 portrait frame — keep the face. */
#founder-rob { object-position: center 30%; }