/* ── Brandon bio page ── */

.brandon-body {
  background: var(--cream);
  color: var(--inkwood);
  font-family: var(--font-sans);
}

/* ─────────────────────────────────────────
   Header — scroll-activated
───────────────────────────────────────── */
.bn-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(24px, 4vw, 56px);
  background: var(--inkwood);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.bn-header.bn-header--visible {
  opacity: 1;
  pointer-events: auto;
}
.bn-logo-link { display: flex; align-items: center; text-decoration: none; }
.bn-nav { display: flex; align-items: center; gap: 32px; }
.bn-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
  opacity: 0.75;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 200ms;
}
.bn-nav-link:hover { opacity: 1; }
.bn-nav-cta {
  opacity: 1;
  border: 1px solid rgba(245,239,230,0.35);
  padding: 8px 18px;
  border-radius: 2px;
  transition: background 200ms, border-color 200ms;
}
.bn-nav-cta:hover { background: rgba(245,239,230,0.12); border-color: var(--cream); }

/* ─────────────────────────────────────────
   Hero
───────────────────────────────────────── */
.bn-hero {
  background: var(--inkwood);
  padding-bottom: clamp(48px, 6vw, 48px);
  position: relative;
  overflow: hidden;
}


.bn-hero-photo {
  width: 100%;
  height: clamp(150px, calc(25vw + 75px), 460px);
  background: #3D2712;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.bn-hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

.bn-hero-text {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) clamp(24px, 5vw, 48px) 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.bn-hero-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 14px;
}
.bn-hero-name {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.5vw, 60px);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.05;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.bn-hero-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-left: 100px;
  margin-right: 100px;
}
.bn-q-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  color: var(--cream);
  line-height: 1.4;
  margin: 0;
}
.bn-q-line--top {
  align-self: flex-start;
  opacity: 0.72;
}
.bn-q-line--bottom {
  align-self: flex-end;
  opacity: 0.65;
}
.bn-q-mark {
  font-size: 1.9em;
  line-height: 0;
  vertical-align: -0.22em;
  opacity: 0.45;
  font-style: normal;
}

/* ─────────────────────────────────────────
   Story container
───────────────────────────────────────── */
.bn-story {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 120px) clamp(24px, 5vw, 80px);
  position: relative;
}

/* ─────────────────────────────────────────
   Section rows — left-margin label grid
───────────────────────────────────────── */
.bn-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-areas: "side content";
  column-gap: 48px;
  margin-bottom: 88px;
  position: relative;
}

/* Ghosted section numeral */
.bn-numeral {
  position: absolute;
  font-family: var(--font-serif);
  font-size: 180px;
  font-weight: 400;
  color: var(--canopy);
  opacity: 0.08;
  line-height: 1;
  top: -36px;
  left: -12px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.bn-row-side {
  grid-area: side;
  padding-top: 4px;
  position: relative;
  z-index: 1;
}

.bn-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--canopy);
  margin: 0 0 12px;
}

/* Short rule extending from label toward content */
.bn-row-side::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--canopy);
  opacity: 0.45;
  margin-top: 4px;
}

/* Content column with subtle left rule */
.bn-section {
  grid-area: content;
  position: relative;
  z-index: 1;
  border-left: 1px solid rgba(92, 122, 74, 0.18);
  padding-left: 40px;
}

.bn-body {
  font-size: 17px;
  line-height: 1.85;
  color: var(--inkwood);
  margin: 0 0 22px;
}
.bn-body:last-child { margin-bottom: 0; }
.bn-body em { font-style: italic; }

/* ─────────────────────────────────────────
   Pull quote
───────────────────────────────────────── */
.bn-pullquote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-style: italic;
  font-weight: 400;
  color: var(--inkwood);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 88px;
  padding: 40px 24px;
  border-top: 1px solid var(--canopy);
  border-bottom: 1px solid var(--canopy);
  line-height: 1.55;
  quotes: none;
}

/* ─────────────────────────────────────────
   Photo wrappers
───────────────────────────────────────── */
.bn-photo-wrap {
  margin: 0 0 88px;
}
.bn-photo-wrap--cats {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 88px;
}

/* Corner-bracket frame decoration */
.bn-photo-frame {
  position: relative;
}
/* Top-left corner */
.bn-photo-frame::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 28px;
  height: 28px;
  border-top: 2px solid var(--canopy);
  border-left: 2px solid var(--canopy);
  z-index: 1;
}
/* Bottom-right corner */
.bn-photo-frame::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-bottom: 2px solid var(--canopy);
  border-right: 2px solid var(--canopy);
  z-index: 1;
}

.bn-photo-inline {
  width: 100%;
  height: 340px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.bn-cats-stage {
  position: relative;
  width: 100%;
  height: 340px;
}
.bn-cats-img {
  position: absolute;
  inset: 0;
  background-color: #3D2712;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1000ms ease;
}
.bn-cats-active {
  opacity: 1;
}
.bn-photo-caption {
  font-size: 12px;
  color: var(--mid);
  text-align: center;
  margin: 16px 0 0;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────
   Closing CTA
───────────────────────────────────────── */
.bn-cta {
  text-align: center;
  padding: clamp(72px, 8vw, 100px) 0 0;
  border-top: 1px solid var(--rule);
  max-width: 480px;
  margin: 0 auto;
}
.bn-cta-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 16px;
}
.bn-cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 400;
  color: var(--inkwood);
  margin: 0 0 20px;
  line-height: 1.2;
}
.bn-cta-body {
  font-size: 17px;
  color: var(--mid);
  line-height: 1.7;
  margin: 0 0 36px;
}

/* ─────────────────────────────────────────
   Footer
───────────────────────────────────────── */
.bn-footer {
  text-align: center;
  padding: 48px 24px;
  border-top: 1px solid var(--rule);
  margin-top: clamp(72px, 8vw, 100px);
}
.bn-footer-mark {
  height: 28px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}
.bn-footer-copy {
  font-size: 12px;
  color: var(--mid);
  letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────
   Margin icons — fade in on scroll
───────────────────────────────────────── */
.bn-icon {
  position: absolute;
  color: var(--canopy);
  opacity: 0;
  transition: opacity 1200ms ease;
  pointer-events: none;
  user-select: none;
}
.bn-icon.visible {
  opacity: 0.11;
}

/* Four columns per side — 60px apart, viewport-relative calc */
.bn-icon--l1 { left:  calc(540px - 50vw); }  /* 60px from viewport left  */
.bn-icon--l2 { left:  calc(600px - 45vw); }  /* 120px from viewport left */
.bn-icon--l3 { left:  calc(660px - 40vw); }  /* 180px from viewport left */
.bn-icon--l4 { left:  calc(720px - 35vw); }  /* 240px from viewport left */
.bn-icon--r1 { right: calc(540px - 50vw); }
.bn-icon--r2 { right: calc(600px - 45vw); }
.bn-icon--r3 { right: calc(660px - 40vw); }
.bn-icon--r4 { right: calc(720px - 35vw); }

/* Diamond grid — 20 positions, 120px stagger cycling L1→R1→L2→R2→L3→R3→L4→R4 */
.bn-p1  { top:  80px;  width:  88px; transform: rotate(-5deg);  } /* mountain L1 */
.bn-p2  { top: 200px;  width:  66px; transform: rotate(7deg);   } /* E-5 Rank R1 */
.bn-p3  { top: 320px;  width: 118px; transform: rotate(-23deg);  } /* AWACS L2 */
.bn-p4  { top: 440px;  width: 130px; transform: rotate(-9deg);   } /* Denver R2 */
.bn-p5  { top: 560px;  width:  78px; transform: rotate(18deg);  } /* Satellite L3 */
.bn-p6  { top: 680px;  width:  66px; transform: rotate(-11deg); } /* Magazine R3 */
.bn-p7  { top: 800px;  width:  60px; transform: rotate(-6deg);   } /* Bunnyface L4 */
.bn-p8  { top: 920px;  width:  96px; transform: rotate(14deg);  } /* Fish R4 */
.bn-p9  { top: 1040px; width:  32px; transform: rotate(-12deg); } /* Paintbrush L1 */
.bn-p10 { top: 1160px; width:  88px; transform: rotate(5deg);   } /* Mountain R1 */
.bn-p11 { top: 1280px; width:  96px; transform: rotate(-9deg);  } /* Fish L2 */
.bn-p12 { top: 1400px; width:  66px; transform: rotate(3deg);   } /* Rank R2 */
.bn-p13 { top: 1520px; width: 130px; transform: rotate(-8deg);  } /* Denver L3 */
.bn-p14 { top: 1640px; width: 118px; transform: rotate(4deg);   } /* AWACS R3 */
.bn-p15 { top: 1760px; width:  66px; transform: rotate(11deg);  } /* Magazine L4 */
.bn-p16 { top: 1880px; width:  78px; transform: rotate(-6deg);  } /* Satellite R4 */
.bn-p17 { top: 2000px; width:  60px; transform: rotate(4deg);   } /* Bunnyface L1 */
.bn-p18 { top: 2120px; width:  32px; transform: rotate(10deg);  } /* Paintbrush R1 */
.bn-p19 { top: 2240px; width:  88px; transform: rotate(-16deg); } /* Mountain L2 */
.bn-p20 { top: 2360px; width:  66px; transform: rotate(9deg);   } /* Rank R2 */
.bn-p21 { top: 80px; width:  130px; transform: rotate(9deg);   } /* Denver L3 */
.bn-p22 { top: 560px; width:  66px; transform: rotate(-13deg);   } /* Rank L1 */
.bn-p23 { top: 200px; width: 118px; transform: rotate(19deg);   } /* AWACS R3 */
.bn-p24 { top: 320px;  width:  66px; transform: rotate(12deg);   } /* E-5 Rank L4 */
.bn-p25 { top: 440px; width:  88px; transform: rotate(16deg); } /* Mountain R4 */
.bn-p26 { top: 680px; width:  78px; transform: rotate(-12deg);  } /* Satellite R1 */
.bn-p27 { top: 800px; width:  66px; transform: rotate(11deg);  } /* Magazine L2 */
.bn-p28 { top: 920px; width:  60px; transform: rotate(16deg);   } /* Bunnyface R2 */

/* ─────────────────────────────────────────
   Mobile hamburger button
───────────────────────────────────────── */
.bn-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.bn-nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--cream);
}

/* ─────────────────────────────────────────
   Mobile nav overlay
───────────────────────────────────────── */
.bn-nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--inkwood);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.bn-nav-mobile.open {
  opacity: 1;
  pointer-events: auto;
}
.bn-nav-mobile-close {
  position: absolute;
  top: 24px;
  right: clamp(24px, 4vw, 56px);
  background: none;
  border: none;
  color: var(--cream);
  font-size: 22px;
  cursor: pointer;
  opacity: 0.6;
  padding: 8px;
  line-height: 1;
}
.bn-nav-mobile-close:hover { opacity: 1; }
.bn-nav-mobile-link {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
  letter-spacing: -0.01em;
}
.bn-nav-mobile-link:hover { opacity: 1; }
.bn-nav-mobile-cta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  margin-top: 8px;
}

/* ─────────────────────────────────────────
   Responsive
───────────────────────────────────────── */
@media (max-width: 1280px) {
  .bn-icon { display: none; }
}
/* L4/R4 at 240px from edge — needs ≥1440px viewport to clear content boundary */
@media (min-width: 1281px) and (max-width: 1439px) {
  .bn-icon--l4, .bn-icon--r4 { display: none; }
}

@media (max-width: 960px) {
  .bn-nav-link:not(.bn-nav-cta) { display: none; }
}

@media (max-width: 640px) {
  /* Header always visible on mobile */
  .bn-header {
    opacity: 1;
    pointer-events: auto;
  }
  /* Show hamburger, hide text nav */
  .bn-nav-toggle { display: flex; }
  .bn-nav-cta { display: none; }

  /* Hero quote — reduce side margins to keep stagger readable */
  .bn-hero-quote {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Section rows — numeral + label on one line, rule beneath both */
  .bn-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num side"
      "content content";
    column-gap: 12px;
    row-gap: 0;
    margin-bottom: 64px;
  }
  .bn-numeral {
    grid-area: num;
    position: static;
    font-size: 40px;
    opacity: 0.4;
    line-height: 1;
    align-self: end;
    padding-bottom: 8px;
    margin: 0;
    top: auto;
    left: auto;
    border-bottom: 1px solid rgba(92, 122, 74, 0.35);
  }
  .bn-row-side {
    grid-area: side;
    align-self: end;
    padding-top: 0;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(92, 122, 74, 0.35);
  }
  .bn-row-side::after { display: none; }
  .bn-section {
    grid-area: content;
    border-left: none;
    border-top: none;
    padding-left: 0;
    padding-top: 20px;
  }

  /* Photo frame brackets — smaller but visible on mobile */
  .bn-photo-frame::before,
  .bn-photo-frame::after {
    width: 20px;
    height: 20px;
  }
}