/* ============================================================
   BOGART'S LEGACY / BOGART'S JOURNEY — DESIGN SYSTEM
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root{
  --ivory: #F8F4EC;
  --ivory-deep: #F1EBDD;
  --paper: #FEFCF8;
  --charcoal: #2B2723;
  --charcoal-soft: #5B554C;
  --charcoal-faint: #8A8377;
  --bronze: #A97C3F;
  --bronze-deep: #8A6530;
  --gold-line: #C9A227;
  --slate: #2E3B45;
  --slate-soft: #435463;
  --line: rgba(43,39,35,0.12);
  --line-soft: rgba(43,39,35,0.07);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;

  --max: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.5em 0;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4{ font-size: 1.15rem; }

p{ margin: 0 0 1.1em 0; color: var(--charcoal-soft); max-width: 62ch; }
p.lede{ font-size: 1.2rem; color: var(--charcoal); max-width: 58ch; }

.serif-italic{ font-style: italic; font-family: var(--serif); }

::selection{ background: var(--gold-line); color: var(--charcoal); }

:focus-visible{
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------------- HEADER / NAV ---------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid var(--line-soft);
  isolation: isolate;
}
/* The frosted-glass effect lives on a ::before layer rather than on
   .site-header itself. A `filter`/`backdrop-filter` on an ancestor of a
   position:fixed element creates a new containing block for it — on iOS
   Safari in particular, that pinned the mobile nav panel to the header's
   own (tiny) box instead of the viewport, which is why the menu was
   rendering squashed/hidden behind the page instead of open on top of it. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(248,244,236,0.92);
  backdrop-filter: saturate(140%) blur(8px);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 0.85rem; padding-bottom: 0.85rem;
}
.brandmark{
  display:flex; align-items:baseline; gap:0.55rem;
  font-family: var(--serif);
}
.brandmark .name{ font-size: 1.32rem; font-weight: 500; color: var(--charcoal); }
.brandmark .tm{ font-size:0.6em; color: var(--charcoal-faint); }
.brandmark .sub{
  font-family: var(--sans); font-size: 0.72rem; color: var(--bronze-deep);
  border-left: 1px solid var(--line); padding-left: 0.6rem; margin-left: 0.1rem;
  font-weight: 600;
}

nav.primary-nav{ display:flex; align-items:center; gap: 1.9rem; }
nav.primary-nav a{
  font-size: 0.93rem; color: var(--charcoal-soft); font-weight: 500;
  position: relative; padding: 0.2rem 0;
  transition: color 0.15s ease;
}
nav.primary-nav a:hover{ color: var(--bronze-deep); }
nav.primary-nav a.is-active{ color: var(--charcoal); }
nav.primary-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--gold-line);
}
nav.primary-nav a.cross-link{
  color: var(--bronze-deep);
  border: 1px solid var(--bronze); border-radius: 3px;
  padding: 0.42rem 0.85rem;
}
nav.primary-nav a.cross-link:hover{ background: var(--bronze); color: var(--paper); }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width: 40px; height: 34px; padding: 6px; flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:2px; background: var(--charcoal); border-radius:2px; }

@media (max-width: 920px){
  nav.primary-nav{
    position: fixed; inset: 62px 0 0 0; background: var(--ivory);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 1rem var(--gutter) 2rem; overflow-y:auto;
    transform: translateX(100%); transition: transform 0.28s ease;
    border-top: 1px solid var(--line-soft);
    z-index: 60;
  }
  nav.primary-nav.open{ transform: translateX(0); }
  nav.primary-nav a{
    width:100%; padding: 0.95rem 0; border-bottom: 1px solid var(--line-soft);
    font-size: 1.05rem;
  }
  nav.primary-nav a.cross-link{ margin-top: 1rem; text-align:center; border-radius:4px; }
  .nav-toggle{ display:flex; }
}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family: var(--sans); font-weight:600; font-size:0.95rem;
  padding: 0.8rem 1.5rem; border-radius: 3px;
  border: 1px solid transparent; cursor:pointer;
  transition: all 0.18s ease;
}
.btn-primary{ background: var(--bronze); color: var(--paper); border-color: var(--bronze); }
.btn-primary:hover{ background: var(--bronze-deep); border-color: var(--bronze-deep); }
.btn-ghost{ background: transparent; color: var(--charcoal); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--bronze); color: var(--bronze-deep); }
.btn-line{ background: transparent; color: var(--bronze-deep); border-bottom: 1px solid var(--bronze); padding: 0.2rem 0; border-radius:0; }

/* ---------------- HERO ---------------- */
.hero{
  position: relative;
  min-height: 78vh;
  display:flex; align-items:flex-end;
  background: linear-gradient(180deg, rgba(43,39,35,0.08), rgba(43,39,35,0.55)),
              var(--photo-fallback, linear-gradient(135deg, #cabb98, #ded2b3));
  background-size: cover; background-position: center;
  color: var(--paper);
}
.hero.no-photo{
  background: linear-gradient(160deg, #EFE7D3 0%, #E4D8B8 45%, #D8C89B 100%);
  color: var(--charcoal);
  min-height: 62vh;
}
.hero-inner{ padding: 3.5rem 0 3.2rem; max-width: 720px; }
.eyebrow-plain{
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  display:block; margin-bottom: 0.9rem;
}
.hero .eyebrow-plain{
  color: var(--gold-line); margin-bottom: 0.9rem; display:block;
}
.hero.no-photo .eyebrow-plain{ color: var(--bronze-deep); }
.hero h1{ color: inherit; }
.hero p.lede{ color: rgba(254,252,248,0.92); }
.hero.no-photo p.lede{ color: var(--charcoal-soft); }
.hero-actions{ display:flex; gap:1rem; margin-top: 1.6rem; flex-wrap:wrap; }
.hero.no-photo .btn-ghost{ border-color: var(--line); }

.photo-note{
  position:absolute; right: var(--gutter); bottom: 1rem;
  font-size: 0.72rem; color: rgba(254,252,248,0.75); font-family: var(--sans);
}

/* ---------------- POSTER HERO (artwork with its own baked-in title/tagline) ---------------- */
.hero-poster{
  padding: 3rem 0 0.5rem;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
}
.hero-poster .poster-frame{
  max-width: 760px;
  margin: 0 auto;
}
.poster-img{
  width: 100%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 34px 70px -34px rgba(43,39,35,0.4);
  border: 1px solid rgba(43,39,35,0.08);
}
.poster-intro{
  max-width: 640px;
  margin: 2.4rem auto 0;
  text-align: center;
}
.poster-intro p.lede{ margin-left:auto; margin-right:auto; }
.poster-intro .hero-actions{ justify-content: center; margin-top: 1.5rem; }
.entry-grid.no-overlap{ margin-top: 3.4rem; }

.photo-real{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 26px 54px -30px rgba(43,39,35,0.38);
  border: 1px solid rgba(43,39,35,0.08);
}
.photo-square{
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 2px;
}
.photo-square img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------------- SECTIONS ---------------- */
section{ padding: 5rem 0; }
section.tight{ padding: 3rem 0; }
.section-head{ max-width: 640px; margin-bottom: 2.6rem; }
.section-head .kicker{
  font-family: var(--serif); font-style: italic; color: var(--bronze-deep); font-size: 1.05rem;
  display:block; margin-bottom: 0.4rem;
}
hr.rule{ border:none; border-top: 1px solid var(--line); margin: 0; }
.band-ivory-deep{ background: var(--ivory-deep); }
.band-paper{ background: var(--paper); }
.band-slate{ background: var(--slate); color: #EDE7D8; }
.band-slate h2, .band-slate h3{ color: #FDFBF5; }
.band-slate p{ color: #C9CFD3; }

/* ---------------- ENTRY CARDS (homepage dual path) ---------------- */
.entry-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.75rem;
  margin-top: -6.5rem; position:relative; z-index:5;
}
@media (max-width: 760px){ .entry-grid{ grid-template-columns: 1fr; margin-top: -3.5rem; } }

.entry-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-line);
  border-radius: 2px;
  padding: 2.4rem 2.2rem 2.1rem;
  box-shadow: 0 18px 40px -28px rgba(43,39,35,0.35);
  display:flex; flex-direction:column; gap:0.9rem;
}
.entry-card .tag{ font-family: var(--serif); font-style: italic; color: var(--bronze-deep); font-size: 1rem; }
.entry-card h3{ margin-bottom: 0.2rem; }
.entry-card .go{ margin-top: 0.6rem; font-weight:600; color: var(--bronze-deep); display:inline-flex; align-items:center; gap:0.4rem; }
.entry-card.journey-card{ border-top-color: var(--slate); }
.entry-card.journey-card .tag, .entry-card.journey-card .go{ color: var(--slate-soft); }

/* ---------------- FEATURE / PREVIEW GRID ---------------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 860px){ .grid-3{ grid-template-columns: 1fr 1fr; } .grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 600px){ .grid-3{ grid-template-columns: 1fr; } }

.tile{
  border: 1px solid var(--line-soft);
  background: var(--paper);
  padding: 1.9rem 1.7rem;
  border-radius: 2px;
  transition: border-color 0.15s ease;
}
.tile:hover{ border-color: var(--bronze); }
.tile h4{ margin-bottom:0.5rem; }
.tile p{ font-size: 0.96rem; margin-bottom: 0.8rem; }
.tile a.tile-link{ font-size:0.88rem; font-weight:600; color: var(--bronze-deep); }

.imgbox{
  background: linear-gradient(135deg, #E7DEC4, #D6C79E);
  border: 1px dashed rgba(43,39,35,0.25);
  display:flex; align-items:center; justify-content:center;
  color: var(--charcoal-faint); font-size: 0.82rem; text-align:center; padding: 1rem;
  min-height: 200px; border-radius: 2px;
}
.imgbox.dark{ background: linear-gradient(135deg, #37454F, #253038); color: #B9C2C8; border-color: rgba(255,255,255,0.18); }
.imgbox.portrait{ aspect-ratio: 3/4; min-height: unset; }
.imgbox.square{ aspect-ratio: 1/1; min-height: unset; }
.imgbox.wide{ aspect-ratio: 16/9; min-height: unset; }

/* ---------------- QUOTE / MISSION BLOCK ---------------- */
.mission-quote{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--charcoal); max-width: 800px; line-height:1.4;
  border-left: 3px solid var(--gold-line); padding-left: 1.6rem;
}
.mission-quote cite{ display:block; font-style:normal; font-family: var(--sans); font-size: 0.85rem; color: var(--charcoal-faint); margin-top:1rem; }

/* ---------------- LISTS / VALUE COLUMNS ---------------- */
.value-list{ list-style:none; margin:0; padding:0; display:grid; gap: 0.9rem; }
.value-list li{
  padding-left: 1.5rem; position:relative; color: var(--charcoal-soft); font-size:0.98rem;
}
.value-list li::before{
  content:""; position:absolute; left:0; top:0.55em; width:7px; height:7px;
  background: var(--gold-line); border-radius:50%;
}

/* ---------------- RESEARCH LIBRARY ---------------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom: 2.2rem; }
.filter-pill{
  font-size:0.85rem; padding: 0.45rem 1rem; border:1px solid var(--line);
  border-radius: 20px; color: var(--charcoal-soft); background: var(--paper);
  cursor:pointer; transition: all 0.15s ease;
}
.filter-pill.is-on, .filter-pill:hover{ border-color: var(--bronze); color: var(--bronze-deep); }

.paper-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; }
@media (max-width: 760px){ .paper-grid{ grid-template-columns: 1fr; } }
.paper-card{
  border: 1px solid var(--line-soft); background: var(--paper); padding: 1.5rem 1.6rem;
  border-left: 3px solid var(--line); border-radius:2px;
}
.paper-card.status-completed{ border-left-color: var(--bronze); }
.paper-card.status-development{ border-left-color: var(--gold-line); }
.paper-card.status-queue{ border-left-color: var(--slate-soft); }
.paper-card.status-hypothesis{ border-left-color: var(--charcoal-faint); }
.paper-meta{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.chip{ font-size:0.72rem; color: var(--charcoal-faint); border:1px solid var(--line); padding:0.15rem 0.55rem; border-radius:20px; }
.paper-card h4{ margin-bottom:0.4rem; }
.paper-card p{ font-size:0.92rem; margin-bottom:0.3rem; }
.status-word{ font-size:0.78rem; font-weight:600; color: var(--charcoal-faint); }

/* ---------------- FAMILY LEGACY GALLERY ---------------- */
.family-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 860px){ .family-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .family-grid{ grid-template-columns: 1fr; } }
.dog-card{ background: var(--paper); border:1px solid var(--line-soft); border-radius:2px; overflow:hidden; }
.dog-card .imgbox{ border-radius:0; border-left:none; border-right:none; border-top:none; }
.dog-card .dog-info{ padding: 1.1rem 1.2rem 1.4rem; }
.dog-card h4{ margin-bottom:0.15rem; }
.dog-card .reg-name{ font-size:0.8rem; color: var(--charcoal-faint); font-style: italic; font-family: var(--serif); margin-bottom:0.6rem; }
.dog-card .relation{ font-size: 0.78rem; color: var(--bronze-deep); font-weight:600; margin-bottom:0.5rem; text-transform: none; }
.dog-card p{ font-size: 0.9rem; margin-bottom:0; }

/* ---------------- SNAPSHOT GALLERY (simple, extendable by hand) ---------------- */
.snap-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
@media (max-width: 860px){ .snap-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .snap-grid{ grid-template-columns: repeat(2,1fr); } }
.snap-item{ margin:0; }
.snap-item .photo-square{ margin-bottom: 0.55rem; }
.snap-item figcaption{
  font-size: 0.85rem; color: var(--charcoal-soft); text-align:center; font-weight:500;
}

/* ---------------- SHOW HISTORY ARCHIVE (historical ads, kept intact, no cropping) ---------------- */
.ad-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;
}
@media (max-width: 760px){ .ad-grid{ grid-template-columns: 1fr; } }
.ad-grid figure{ margin:0; }
.ad-grid img{
  width:100%; height:auto; display:block;
  border-radius: 3px; border:1px solid var(--line);
  box-shadow: 0 20px 42px -28px rgba(43,39,35,0.35);
}

/* ---------------- TIMELINE (Founder's Journey — genuinely sequential) ---------------- */
.timeline{ position:relative; padding-left: 2.3rem; }
.timeline::before{ content:""; position:absolute; left: 0.4rem; top:0.4rem; bottom:0.4rem; width:1px; background: var(--line); }
.tl-step{ position:relative; padding-bottom: 2.6rem; }
.tl-step:last-child{ padding-bottom:0; }
.tl-step::before{
  content:""; position:absolute; left: -2.3rem; top: 0.3rem;
  width:9px; height:9px; border-radius:50%; background: var(--bronze); border: 3px solid var(--ivory);
  box-shadow: 0 0 0 1px var(--bronze);
}
.tl-step h4{ margin-bottom:0.4rem; }

/* ---------------- GET INVOLVED TIERS ---------------- */
.tier-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; }
@media (max-width: 860px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-card{ background: var(--paper); border:1px solid var(--line); padding: 2rem 1.8rem; border-radius:2px; }
.tier-card h3{ font-size:1.25rem; }
.tier-card .price-note{ font-size:0.85rem; color: var(--charcoal-faint); margin-bottom:1rem; display:block; }

.legal-note{
  background: var(--ivory-deep); border:1px solid var(--line); border-radius:2px;
  padding: 1.4rem 1.6rem; font-size:0.88rem; color: var(--charcoal-soft); margin-top: 2.5rem;
}

/* ---------------- FORMS ---------------- */
form.simple-form{ display:grid; gap:1.1rem; max-width: 560px; }
.simple-form label{ font-size:0.85rem; font-weight:600; color: var(--charcoal-soft); display:block; margin-bottom:0.35rem; }
.simple-form input, .simple-form textarea, .simple-form select{
  width:100%; padding:0.75rem 0.9rem; border:1px solid var(--line); border-radius:3px;
  background: var(--paper); font-family: var(--sans); font-size:0.98rem; color: var(--charcoal);
}
.simple-form input:focus, .simple-form textarea:focus{ border-color: var(--bronze); outline:none; }

/* ---------------- VIDEO / JOURNEY SPECIFIC ---------------- */
.video-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
@media (max-width: 860px){ .video-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .video-grid{ grid-template-columns: 1fr; } }
.video-card .imgbox{ position:relative; }
.play-dot{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.play-dot span{
  width:52px; height:52px; border-radius:50%; background: rgba(254,252,248,0.85);
  display:flex; align-items:center; justify-content:center; color: var(--slate);
  font-size: 1rem;
}
.video-card h4{ margin-top:0.8rem; font-size:1.02rem; }
.video-card .vmeta{ font-size:0.8rem; color: var(--charcoal-faint); }

.coming-soon-strip{
  border: 1px dashed var(--line); border-radius:3px; padding: 1.5rem 1.7rem;
  color: var(--charcoal-faint); font-size:0.92rem; text-align:center; background: var(--paper);
}

/* ---------------- FOOTER ---------------- */
footer.site-footer{
  background: var(--ivory-deep); border-top: 1px solid var(--line);
  padding: 3.2rem 0 2rem; margin-top: 4rem;
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.4rem; margin-bottom: 2.4rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h5{ font-family: var(--sans); font-size:0.82rem; font-weight:700; color: var(--charcoal); margin: 0 0 0.9rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.55rem; }
.footer-grid a{ font-size:0.88rem; color: var(--charcoal-soft); }
.footer-grid a:hover{ color: var(--bronze-deep); }
.footer-brand p{ font-size:0.88rem; max-width: 34ch; }
.footer-bottom{
  border-top: 1px solid var(--line); padding-top: 1.4rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-size: 0.78rem; color: var(--charcoal-faint);
}

/* ---------------- MISC / UTILITY ---------------- */
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.narrow{ max-width: 700px; }
.mt-lg{ margin-top: 3rem; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }
.two-col.reverse{ direction: rtl; }
.two-col.reverse > *{ direction: ltr; }

.subpage-hero{
  padding-top: 3.4rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--line);
}
.subpage-hero .kicker{ font-family: var(--serif); font-style:italic; color: var(--bronze-deep); }

/* ============================================================
   PHASE 1 REDESIGN PREVIEW — 2026-09-08
   Light ivory / bronze / charcoal system approved for preview.
   This section intentionally overrides the earlier shared styles
   without deleting any of the original site CSS.
   ============================================================ */

:root{
  --ivory: #FBF8F1;
  --ivory-deep: #F5EFE4;
  --paper: #FFFDF9;
  --charcoal: #282521;
  --charcoal-soft: #5B554D;
  --charcoal-faint: #8B8175;
  --bronze: #AD7D3F;
  --bronze-deep: #8D642E;
  --gold-line: #C7A064;
  --slate: #4A5359;
  --slate-soft: #68727A;
  --line: rgba(113,86,53,0.20);
  --line-soft: rgba(113,86,53,0.11);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", Arial, sans-serif;
  --max: 1240px;
}

body{
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
}

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.018em;
}
h1{font-size:clamp(2.65rem,5vw,4.4rem)}
h2{font-size:clamp(2.05rem,3.5vw,3.05rem)}
h3{font-size:clamp(1.5rem,2.3vw,2rem)}
h4{font-size:1.35rem}
p{color:var(--charcoal-soft)}

/* Header becomes lighter, calmer and more editorial on desktop. */
.site-header{
  background: rgba(251,248,241,.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(73,55,32,.045);
}
.site-header::before{background:rgba(251,248,241,.94)}
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem 1.4rem;
  padding-top:.8rem;
  padding-bottom:.65rem;
}
.brandmark{gap:.7rem}
.brandmark .name{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--bronze-deep);
  letter-spacing:-.015em;
}
.brandmark .sub{
  color:var(--charcoal-faint);
  border-left:1px solid var(--line);
  font-size:.64rem;
  letter-spacing:.14em;
}
nav.primary-nav{
  flex: 1 0 100%;
  justify-content:center;
  gap:.55rem 1.15rem;
  padding-top:.45rem;
  border-top:1px solid var(--line-soft);
}
nav.primary-nav a{
  font-size:.69rem;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--charcoal-soft);
  font-weight:600;
  white-space:nowrap;
}
nav.primary-nav a.cross-link{
  color:var(--bronze-deep);
  border-color:rgba(173,125,63,.48);
  background:rgba(255,253,249,.74);
  padding:.38rem .72rem;
}
nav.primary-nav a.cross-link:hover{background:var(--bronze);color:white}

/* Buttons */
.btn{
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-size:.76rem;
  padding:.82rem 1.25rem;
}
.btn-primary{background:var(--bronze);border-color:var(--bronze)}
.btn-ghost{background:rgba(255,253,249,.58);border-color:rgba(141,100,46,.38)}

/* Shared page sections are lighter and less slab-like. */
section{padding:4.6rem 0}
.band-ivory-deep{background:#F7F1E7}
.band-paper{background:var(--paper)}
.band-slate{
  background:#EFE7DA;
  color:var(--charcoal);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.band-slate h2,.band-slate h3{color:var(--charcoal)}
.band-slate p{color:var(--charcoal-soft)}

/* Homepage hero: artwork remains intact, but presentation becomes larger and cleaner. */
.phase1-home .phase1-hero{
  padding:2.2rem 0 2.4rem;
  background:linear-gradient(180deg,#FCFAF5 0%,#F7F0E4 100%);
}
.phase1-home .poster-frame{
  max-width:1040px;
  margin:0 auto;
  padding:0;
}
.phase1-home .poster-img{
  border-radius:0;
  border:1px solid rgba(141,100,46,.16);
  box-shadow:0 30px 70px -44px rgba(62,45,25,.52);
}
.phase1-home .poster-intro{
  max-width:780px;
  margin:2.45rem auto 0;
  padding:0 1.2rem;
}
.phase1-home .poster-intro .eyebrow-plain{
  color:var(--bronze-deep);
  font-family:var(--sans);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.75rem;
  font-weight:700;
}
.phase1-home .poster-intro .lede{
  font-family:var(--serif);
  font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.55;
  color:var(--charcoal);
  max-width:42em;
}

/* A deliberate visual pause between hero and dual-entry cards. */
.path-bridge{
  padding:3.25rem 0 2.35rem;
  background:var(--paper);
  text-align:center;
  border-top:1px solid var(--line-soft);
}
.path-bridge .wrap{max-width:860px}
.bridge-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  color:var(--bronze-deep);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.72rem;
  font-weight:700;
}
.bridge-kicker::before,.bridge-kicker::after{
  content:"";
  width:72px;
  height:1px;
  background:var(--gold-line);
}
.path-bridge h2{margin:.55rem 0 .45rem;font-size:clamp(1.8rem,3vw,2.55rem)}
.path-bridge p{margin:0 auto;max-width:62ch}

.entry-section{padding:0 0 4.9rem;background:var(--paper)}
.phase1-entry-grid{
  margin-top:0;
  gap:1.6rem;
  align-items:stretch;
}
.photo-entry-card{
  padding:0;
  display:grid;
  grid-template-columns:44% 56%;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(173,125,63,.6);
  border-top:1px solid rgba(173,125,63,.6);
  background:var(--paper);
  box-shadow:0 18px 42px -34px rgba(62,45,25,.45);
  min-height:320px;
}
.photo-entry-card:hover{
  border-color:var(--bronze-deep);
  transform:translateY(-2px);
  box-shadow:0 24px 48px -34px rgba(62,45,25,.52);
}
.entry-photo{min-height:320px;overflow:hidden;background:#E8DECF}
.entry-photo img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.photo-entry-card:hover .entry-photo img{transform:scale(1.015)}
.journey-card .entry-photo img{object-position:50% 42%}
.legacy-entry-card .entry-photo img{object-position:55% center}
.entry-copy{padding:2.25rem 2rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.photo-entry-card .tag{
  font-family:var(--sans);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.68rem;
  color:var(--bronze-deep)!important;
  font-weight:700;
}
.photo-entry-card h3{font-size:clamp(1.75rem,3vw,2.45rem);margin:.35rem 0 .55rem}
.photo-entry-card p{font-size:.95rem}
.photo-entry-card .go{
  margin-top:auto;
  padding-top:.8rem;
  color:var(--bronze-deep)!important;
  font-size:.78rem;
  letter-spacing:.055em;
  text-transform:uppercase;
}

/* Mission/context block now reads as two editorial panels, not dark cards. */
.home-context-section{background:var(--ivory);padding:4.9rem 0}
.context-cards{gap:1.5rem}
.context-card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-top:2px solid var(--gold-line);
  padding:2.5rem 2.35rem 2.2rem;
}
.context-card .kicker{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.68rem;
  color:var(--bronze-deep);
  margin-bottom:.7rem;
}
.context-card h2{font-size:clamp(1.65rem,2.8vw,2.25rem)}

.quote-section{padding:4.4rem 0}
.quote-section .mission-quote{
  max-width:920px;
  margin:0 auto;
  text-align:center;
  border-left:0;
  padding:0 2rem;
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.5;
}
.quote-section .mission-quote::before{
  content:"";
  display:block;
  width:74px;
  height:1px;
  background:var(--gold-line);
  margin:0 auto 1.4rem;
}
.quote-section .mission-quote cite{margin-top:1.25rem}

.explore-section{padding:5rem 0 5.4rem}
.home-section-head{text-align:center;margin:0 auto 2.8rem}
.home-section-head .kicker{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  color:var(--bronze-deep);
}
.home-gateway-grid{gap:1.15rem}
.gateway-card{
  position:relative;
  padding:2.15rem 1.85rem 1.9rem;
  background:rgba(255,253,249,.94);
  border:1px solid rgba(173,125,63,.28);
  border-radius:0;
  min-height:260px;
  display:flex;
  flex-direction:column;
}
.gateway-card:hover{border-color:var(--bronze);transform:translateY(-2px)}
.gateway-number{
  display:block;
  color:var(--bronze);
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.16em;
  margin-bottom:1.05rem;
}
.gateway-card h4{font-size:1.5rem}
.gateway-card p{font-size:.93rem}
.gateway-card .tile-link{
  margin-top:auto;
  padding-top:.55rem;
  text-transform:uppercase;
  letter-spacing:.065em;
  font-size:.72rem;
}
.secondary-gateway{background:#FCF9F3}

/* Shared cards across subpages get a finer, less boxy treatment. */
.tile,.paper-card,.family-card,.video-card,.resource-card,.advocacy-card{
  border-color:rgba(173,125,63,.24);
  background:var(--paper);
  box-shadow:none;
  border-radius:0;
}

/* Footer: warm, light and institutional rather than a dark slab. */
footer.site-footer{
  background:#F5EFE4;
  border-top:1px solid rgba(173,125,63,.28);
  padding:3rem 0 1.8rem;
  margin-top:3.5rem;
}
.footer-grid{gap:2rem}
.footer-grid h5{
  color:var(--bronze-deep);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem;
}
.footer-grid a{font-size:.84rem}
.footer-bottom{border-top-color:rgba(173,125,63,.22)}

@media (max-width: 920px){
  .site-header .wrap{flex-wrap:nowrap;padding-top:.8rem;padding-bottom:.8rem}
  .brandmark .sub{display:none}
  nav.primary-nav{
    position:fixed;
    inset:67px 0 0 0;
    display:flex;
    flex:initial;
    justify-content:flex-start;
    gap:0;
    padding:1rem var(--gutter) 2rem;
    border-top:1px solid var(--line);
    background:rgba(251,248,241,.99);
    transform:translateX(100%);
    overflow-y:auto;
  }
  nav.primary-nav.open{transform:translateX(0)}
  nav.primary-nav a{
    font-size:.92rem;
    letter-spacing:.025em;
    text-transform:none;
    padding:.82rem 0;
  }
  nav.primary-nav a.cross-link{
    order:-1;
    margin:.5rem 0 .7rem;
    padding:.8rem 1rem;
    text-transform:none;
  }
  .nav-toggle{display:flex}
}

@media (max-width: 760px){
  section{padding:3.7rem 0}
  .phase1-home .phase1-hero{padding:1.25rem 0 1.9rem}
  .phase1-home .poster-frame{max-width:none;margin:0 calc(-1 * var(--gutter))}
  .phase1-home .poster-img{border-left:0;border-right:0}
  .phase1-home .poster-intro{padding:0 .1rem;margin-top:1.9rem}
  .path-bridge{padding:2.7rem 0 2rem}
  .bridge-kicker::before,.bridge-kicker::after{width:38px}
  .entry-section{padding-bottom:3.8rem}
  .phase1-entry-grid{grid-template-columns:1fr}
  .photo-entry-card{grid-template-columns:1fr;min-height:0}
  .entry-photo{min-height:280px;aspect-ratio:4/3}
  .entry-copy{padding:1.8rem 1.6rem 1.65rem}
  .photo-entry-card .go{margin-top:.55rem}
  .context-card{padding:2rem 1.55rem}
  .quote-section .mission-quote{padding:0 .4rem}
  .home-gateway-grid{grid-template-columns:1fr}
  .gateway-card{min-height:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.3rem}
}

@media (max-width: 520px){
  body{font-size:16px}
  .brandmark .name{font-size:1.42rem}
  .footer-grid{grid-template-columns:1fr}
  .phase1-home .poster-intro .lede{font-size:1.12rem}
}

/* September 8, 2026 consolidated review refinements */
.tl-step{position:relative;padding-left:2.6rem;}
.tl-icon{position:absolute;left:-0.25rem;top:0.1rem;width:1.75rem;height:1.75rem;border:1px solid var(--gold, #b89453);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--gold, #9f7b3b);background:var(--ivory, #fbf8f1);}
#bogart-gallery{margin-bottom:2.5rem;}
@media(max-width:700px){.tl-step{padding-left:2.25rem}.tl-icon{left:-.1rem}}

/* Sept. 9 visual-story additions */
.feature-portrait{max-width:760px;margin:0 auto 2rem;display:block;}
.legacy-origin-feature{max-width:900px;text-align:center;}
.origin-quote,.journey-origin-quote,.founder-signature-quote{font-family:var(--serif);font-size:clamp(1.65rem,3.2vw,2.8rem);line-height:1.25;color:var(--charcoal);text-align:center;max-width:850px;margin:1.5rem auto;}
.origin-quote cite,.journey-origin-quote cite,.founder-signature-quote cite{display:block;font-family:var(--sans);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-top:1.25rem;color:var(--bronze-dark);}
.founder-image-block{max-width:900px;margin:3rem auto;text-align:center;}
.founder-opening-image{margin-top:1.5rem;}
.image-caption{font-size:.9rem;color:var(--charcoal-faint);font-style:italic;margin-top:.75rem;}
.journey-origin-section{padding:4.5rem 0;background:var(--paper, #f6f0e4);}
.together-at-home{padding-top:4.5rem;padding-bottom:4.5rem;background:var(--paper, #f7f2e8);}
.family-photo-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin:2rem 0 2.5rem;}
.family-photo-mosaic figure{margin:0;}
.family-photo-mosaic figure.wide{grid-column:1/-1;}
.family-photo-mosaic img{width:100%;height:100%;max-height:560px;object-fit:cover;border-radius:6px;display:block;}
.family-photo-mosaic figcaption{text-align:center;font-size:.86rem;color:var(--charcoal-faint);padding:.65rem 0;}
@media(max-width:700px){.family-photo-mosaic{grid-template-columns:1fr}.family-photo-mosaic figure.wide{grid-column:auto}.founder-image-block{margin:2rem auto}.journey-origin-section{padding:3rem 0}}


/* Final launch refinements — Sept. 9, 2026 */
.advocacy-focus-section{padding:4.75rem 0;}
.advocacy-focus-head{text-align:center;max-width:760px;margin:0 auto 2.25rem;}
.card-grid.three-col.advocacy-focus-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.35rem;
  max-width:1120px;
  margin:0 auto;
}
.advocacy-focus-grid .info-card{
  background:var(--paper,#f7f2e8);
  border:1px solid rgba(173,125,63,.34);
  padding:1.65rem 1.5rem 1.55rem;
  min-height:190px;
  box-shadow:0 8px 24px rgba(48,42,34,.035);
}
.advocacy-focus-grid .info-card h4{margin-bottom:.6rem;color:var(--bronze-deep);}
.advocacy-focus-grid .info-card p{margin-bottom:0;font-size:.93rem;line-height:1.65;}
@media(max-width:900px){.card-grid.three-col.advocacy-focus-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.card-grid.three-col.advocacy-focus-grid{grid-template-columns:1fr}.advocacy-focus-grid .info-card{min-height:0}.advocacy-focus-section{padding:3.6rem 0;}}


/* September 10, 2026 final consistency & responsive pass */
.mission-pillars-section{padding:4.75rem 0;}
.mission-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem;max-width:1120px;margin:0 auto;}
.mission-card-grid .info-card{background:var(--paper,#f7f2e8);border:1px solid rgba(173,125,63,.34);border-left:3px solid var(--gold-line);padding:1.75rem 1.65rem;box-shadow:0 8px 24px rgba(48,42,34,.035);}
.mission-card-grid .info-card h3{margin-bottom:.65rem;color:var(--bronze-deep);}
.mission-card-grid .info-card p{margin-bottom:0;line-height:1.68;}
.mission-card-grid .mission-card-wide{grid-column:1/-1;max-width:none;}
@media(max-width:760px){.mission-card-grid{grid-template-columns:1fr}.mission-card-grid .mission-card-wide{grid-column:auto}}

/* Make Advocacy use the same visible card language as Research/Education/Get Involved */
.advocacy-focus-grid .info-card{background:var(--paper,#f7f2e8);border:1px solid rgba(173,125,63,.34);border-left:3px solid var(--gold-line);box-shadow:0 8px 24px rgba(48,42,34,.035);}

/* Together at Home: preserve full photographs instead of forcing desktop crops. */
.family-photo-mosaic{align-items:start;}
.family-photo-mosaic figure{display:block;margin:0 0 .35rem;min-width:0;}
.family-photo-mosaic img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:6px;display:block;}
.family-photo-mosaic figcaption{position:relative;display:block;text-align:center;font-size:.9rem;line-height:1.35;color:var(--charcoal-faint);padding:.7rem .25rem 1rem;min-height:2.4rem;}
.family-photo-mosaic .family-portrait-full img{height:auto;object-fit:contain;object-position:center top;}
@media(max-width:700px){.family-photo-mosaic{gap:1rem}.family-photo-mosaic figure{margin-bottom:.5rem}.family-photo-mosaic figcaption{padding:.7rem .25rem 1.2rem;min-height:0}}

/* Gallery captions need breathing room on phones. */
.snap-item{margin:0 0 .55rem;}
.snap-item figcaption{display:block;position:relative;line-height:1.35;padding:0 .15rem .6rem;}
@media(max-width:560px){.snap-grid{row-gap:1.5rem}.snap-item{margin-bottom:.25rem}.snap-item .photo-square{margin-bottom:.65rem}.snap-item figcaption{padding-bottom:.45rem}}

/* Curated historical gallery: natural ratios, no cropping. */
.historical-gallery-section{padding:4.75rem 0;}
.legacy-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;max-width:1050px;margin:0 auto;align-items:start;}
.legacy-history-grid figure{margin:0;background:var(--paper);border:1px solid var(--line-soft);padding:.7rem;}
.legacy-history-grid img{width:100%;height:auto;display:block;border-radius:3px;}
.legacy-history-grid figcaption{text-align:center;color:var(--charcoal-soft);font-size:.9rem;padding:.75rem .25rem .25rem;}
@media(max-width:700px){.legacy-history-grid{grid-template-columns:1fr}}


/* ---------------- PHASE 1 REPAIR STYLES ---------------- */
.mission-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:stretch;}
.mission-detail-card{background:var(--paper,#f7f2e8);border:1px solid rgba(173,125,63,.34);border-left:3px solid var(--gold-line);padding:1.75rem 1.65rem;box-shadow:0 8px 24px rgba(48,42,34,.035);height:100%;}
.mission-detail-card h3{margin-bottom:.65rem;color:var(--bronze-deep);}
.mission-detail-card p{line-height:1.68;}
.mission-detail-card .text-link{display:inline-block;margin-top:.55rem;}
@media (max-width: 760px){.mission-detail-grid{grid-template-columns:1fr;}}

.journey-update-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:stretch;}
.journey-update-card{background:var(--paper);border:1px solid var(--line-soft);border-left:3px solid var(--gold-line);padding:1.55rem 1.45rem 1.5rem;border-radius:2px;box-shadow:0 12px 28px rgba(48,42,34,.04);height:100%;}
.journey-update-card h3{margin-bottom:.55rem;color:var(--bronze-deep);font-size:1.35rem;line-height:1.28;}
.journey-update-card p{margin-bottom:0;line-height:1.7;font-size:.97rem;}
.update-kicker{display:block;margin-bottom:.55rem;font-family:var(--serif);font-style:italic;color:var(--bronze-deep);font-size:.98rem;}
.journey-update-note{text-align:center;margin-top:1.6rem;}
@media (max-width: 760px){.journey-update-grid{grid-template-columns:1fr;}}


/* ---------------- PHASE 1 FOLLOW-UP REPAIRS ---------------- */
.journey-signup-card{max-width:820px;margin-top:1.8rem;background:var(--paper);border:1px solid var(--line-soft);border-left:3px solid var(--gold-line);padding:1.45rem 1.55rem 1.55rem;border-radius:2px;}
.journey-signup-card h3{color:var(--bronze-deep);margin-bottom:.5rem;}
.journey-signup-card p{margin-bottom:1rem;line-height:1.65;}
.journey-story-quote{margin:2rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--gold-line);font-family:var(--serif);font-style:italic;color:var(--charcoal);font-size:1.12rem;line-height:1.65;}
.journey-story-quote p{margin:0;}
.journey-story-quote cite{display:block;margin-top:.65rem;font-family:var(--serif);font-style:italic;color:var(--bronze-deep);font-size:.98rem;}