/* 250 Collective — responsive repair layer.
   ONE site, one set of URLs. This is loaded last on every page so it wins the
   cascade over the page-level CSS. Deliberately NOT a separate mobile build:
   Google indexes the mobile rendering as canonical, so the phone layout and the
   desktop layout have to be the same document. */

/* ─── Mobile menu button (hidden on desktop) ─────────────────────────── */
.mnav-toggle{
  display:none; align-items:center; justify-content:center;
  width:46px; height:46px; margin-left:auto;
  background:transparent; border:1.5px solid rgba(33,28,22,.28);
  border-radius:12px; cursor:pointer; padding:0; flex:0 0 auto;
}
.mnav-toggle span{
  display:block; width:19px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .18s ease, opacity .18s ease;
}
.mnav-toggle span + span{margin-top:4px}
/* Over the dark homepage hero the bar is light-on-dark until it scrolls. */
nav:not(.scrolled) .mnav-toggle{color:#fff;border-color:rgba(255,255,255,.45)}
nav.scrolled .mnav-toggle,.snav .mnav-toggle{color:var(--ink,#211C16);border-color:rgba(33,28,22,.28)}
.mnav-open .mnav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mnav-open .mnav-toggle span:nth-child(2){opacity:0}
.mnav-open .mnav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:860px){
  .mnav-toggle{display:inline-flex}

  /* Breathing room so the wordmark stops colliding with what follows. */
  .nav-inner,.snav-inner{gap:14px}
  .logo{flex:0 1 auto;min-width:0}

  /* The link row becomes a dropdown panel instead of vanishing. */
  nav .nav-links,.snav .snav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bone,#F7F2E9);
    border-bottom:1px solid var(--line,#E4DACB);
    box-shadow:0 22px 45px -28px rgba(33,28,22,.6);
    padding:10px 22px 20px; font-size:16px;
  }
  nav.mnav-open .nav-links,.snav.mnav-open .snav-links{display:flex}

  /* Beat the legacy `display:none` rules (0,2,1) with 0,3,2. */
  nav.mnav-open .nav-links a:not(.btn),
  .snav.mnav-open .snav-links a:not(.btn){
    display:block; padding:14px 2px; color:var(--ink,#211C16);
    text-shadow:none; border-bottom:1px solid rgba(33,28,22,.09);
  }
  nav.mnav-open .nav-links a.btn,.snav.mnav-open .snav-links a.btn{
    display:flex; width:100%; margin-top:16px;
  }
}

/* ─── Homepage hero ──────────────────────────────────────────────────── */
/* The desktop scrim runs left-to-right (dark left, clear right) so the text
   column sits on the dark half. Full-width mobile text ran off the scrim onto
   bare photo. Overlay a uniform scrim instead of touching the base64 image. */
@media(max-width:820px){
  .hero{min-height:auto; padding:104px 0 56px}
  .hero::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg,rgba(12,9,5,.90) 0%,rgba(12,9,5,.82) 50%,rgba(12,9,5,.93) 100%);
  }
  .hero .wrap{position:relative; z-index:1}
  .hero-col{padding-top:0}
}

/* ─── Buttons: let long labels wrap inside the pill ──────────────────── */
@media(max-width:600px){
  .btn{
    height:auto; min-height:50px; padding:13px 22px;
    line-height:1.25; white-space:normal; text-align:center;
  }
  .hero-cta .btn,.post-cta .btn{width:100%}
}

/* ─── Article CTA card ───────────────────────────────────────────────── */
@media(max-width:600px){
  .post-cta{padding:28px 22px; border-radius:16px; margin-bottom:64px}
  .post-cta .row{flex-direction:column; gap:10px}
  .wrap{padding:0 20px}
  .post-hero{border-radius:14px}
}

/* ─── Hero copy contrast (all widths) ────────────────────────────────── */
/* The hero sits on a near-black scrim, but .lead/.micro inherit the
   light-background body colour (#5A5044 → 2.4:1 against the scrim). That was
   failing at desktop width too, not just on phones. Scoped to .hero so the
   blog's .lead on bone is untouched. */
.hero .lead{color:#D9D2C6}
.hero .micro{color:#B3AB9D}

/* ─── Phone-sized artwork ────────────────────────────────────────────── */
/* The homepage photos were 1500–1900px wide and inlined as base64, which made
   index.html a 2.8 MB document. They now live in /assets/home as real files
   (cacheable, parallel-loaded) and the page declares each one as a variable, so
   phones can be handed an 800px copy: ~1.9 MB of artwork becomes ~680 KB. */
@media(max-width:820px){
  :root{
    --img-hero:url("/img/home/m/hero.jpeg");
    --img-hero-photo:url("/img/home/m/hero-photo.jpeg");
    --img-signs:url("/img/home/m/signs.jpeg");
    --img-mission-band:url("/img/home/m/mission-band.jpeg");
    --img-belief:url("/img/home/m/belief.jpeg");
    --img-video-frame:url("/img/home/m/video-frame.jpeg");
    --img-about-photo:url("/img/home/m/about-photo.jpeg");
    --img-collective:url("/img/home/m/collective.jpeg");
    --img-final:url("/img/home/m/final.jpeg");
  }
}