/* Shared responsive layer. Loaded after each page's inline <style>, so equal-specificity rules here win. */

/* ── MOBILE NAV (button injected by site.js) ── */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 100px;
  color: inherit;
  cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle.open .icon-menu { display: none; }
.nav-toggle.open .icon-close { display: block; }

/* ── PROJECT NAV ── */
.proj-btn-row { display: flex; align-items: baseline; gap: 48px; }

/* ── TABLET ── */
@media (max-width: 1100px) {
  .hero-tagline { font-size: 40px; letter-spacing: -2px; line-height: 48px; }
  .t-intro, .split-heading { font-size: 36px; letter-spacing: -1.5px; line-height: 1.2; }
  .split-section { gap: 48px; }
}

/* ── PHONE ── */
@media (max-width: 768px) {
  :root { --gutter: 16px; --img-gap: 16px; }

  /* nav — sticky; pages that floated it (index/about/work/cv) offset their top spacing by its 68px height */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
    background-color: inherit;
    transition: background-color 0.8s ease, box-shadow 0.3s ease;
  }
  .navbar.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
  body.dark .navbar.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
  .container-2 { padding: 12px var(--gutter); }
  .nav-toggle { display: flex; margin-right: -10px; }
  .nav-toggle ~ .nav-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 100;
    flex-direction: column;
    align-items: stretch;
    padding: 8px var(--gutter) 24px;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 16px 32px rgba(0,0,0,0.06);
  }
  .nav-toggle ~ .nav-menu.open { display: flex; }
  .nav-menu .nav-link {
    height: auto;
    padding: 16px 0;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.5px;
    border-radius: 0;
    border-top: 1px solid #eee;
  }
  .nav-menu .nav-link:first-child { border-top: none; }
  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.is-active { background: none; color: inherit; }
  .nav-menu .nav-link.is-active::after { content: ''; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: #ff3700; }
  body.dark .nav-toggle ~ .nav-menu { background: #111; border-bottom-color: #222; }
  body.dark .nav-menu .nav-link { border-top-color: #222; color: #f0f0f0; }

  /* case study hero */
  header.hero { padding: 40px var(--gutter) 0; margin-bottom: 56px; }
  .hero-logo-row { margin-bottom: 32px; gap: 16px; }
  .hero-logo { width: auto; height: auto; max-height: 30px; max-width: 45%; min-width: 0; }
  .tldr-pill { height: 36px; padding: 0 12px; font-size: 11px; }
  .theme-btn { width: 28px; height: 28px; }
  .hero-tagline { font-size: 40px; letter-spacing: -2px; line-height: 46px; margin-bottom: 40px; }
  .hero-meta { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .meta-label { margin-bottom: 10px; }

  /* case study type + rhythm */
  .tb { padding: 0 var(--gutter); }
  .eyebrow { margin-bottom: 14px; }
  .t-intro, .split-heading { font-size: 34px; letter-spacing: -1.5px; }
  .split-heading { margin-bottom: 0; }
  .t-body { font-size: 17px; margin-top: 18px; }
  .row { margin-bottom: 80px; }
  .row.gap-sm { margin-bottom: 40px; }
  .row.gap-md { margin-bottom: 32px; }
  .row.gap-xs { margin-bottom: 16px; }
  .divider { margin: 56px var(--gutter); }

  /* case study images */
  .img-full, .img-2col, .img-3col, .carousel { padding: 0 var(--gutter); }
  .img-bleed { padding: 0; }
  .img-2col, .img-3col { grid-template-columns: 1fr !important; gap: var(--img-gap); }
  /* image directly followed by another image: uniform gap (bleed-to-bleed stays flush) */
  :is(.img-full, .img-2col, .img-3col, .carousel).row:not(.img-bleed):has(+ :is(.img-full, .img-2col, .img-3col, .carousel)),
  .img-bleed:has(+ :is(.img-full, .img-2col, .img-3col, .carousel):not(.img-bleed)) { margin-bottom: var(--img-gap); }
  .split-section:has(+ :is(.img-full, .img-2col, .img-3col, .carousel)) { padding-bottom: var(--img-gap) !important; }
  .work-grid, .split-images { gap: var(--img-gap); }
  .img-full img, .img-2col img, .img-3col img, .split-images img, .carousel-inner, .carousel-slide img { border-radius: 12px; }
  .img-full video { border-radius: 12px !important; }
  .img-bleed img { border-radius: 0; }
  .after-bleed { margin-top: 0; }
  .img-fig-overlay { gap: 16px; }
  .split-section { grid-template-columns: 1fr; gap: 40px; padding: 0 var(--gutter) 80px; }
  body.tldr .split-section { padding: 0 var(--gutter) 48px; }

  /* project nav */
  .project-nav { padding: 0 var(--gutter) 48px; margin-top: 40px; flex-direction: column; gap: 12px; }
  .proj-btn { padding: 12px 20px 12px 12px; min-height: 0; border-radius: 16px; }
  .proj-btn-content { gap: 16px; }
  .proj-btn-thumb { width: 64px; height: 64px; border-radius: 10px; }
  .proj-btn-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .proj-btn-next-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #888; }
  .proj-btn-label { font-size: 22px; font-weight: 500; letter-spacing: -0.5px; text-transform: none; color: #000; }
  .proj-btn:hover .proj-btn-next-label { color: rgba(255,255,255,0.5); }
  .proj-btn:hover .proj-btn-label { color: #fff; }
  .proj-btn-back { width: 100%; height: 64px; border-radius: 16px; }

  /* buttons — CTAs go full width; filter pills, toggles and nav links stay inline */
  a.cta, a.cta-outline, a.primary, .cta-actions .primary,
  .secondary.case-study-button, .hero-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
  }
  .hero-links, .cta-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-btn { margin-bottom: 40px; }

  /* footer */
  .footer-wrap { margin: 0 var(--gutter); }
  .footer-top { flex-direction: column; gap: 48px; padding-top: 64px; padding-bottom: 48px; }
  .footer-heading { font-size: 32px; }
  .footer-cols { gap: 48px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 48px; }
}

/* ── COVER REVEAL (case study covers) ──
   Markup: section.cover-reveal.row > .cover-stage > .cover-frame > video|img
   Static by default: a normal card in the image grid. site.js adds .is-animated,
   pins the stage and drives --w / --h / --r / --o from scroll so the card grows
   to the browser edges. Pages can set --cover-inset to match their own grid. */
:where(.cover-reveal) { --cover-inset: 60px; }
.cover-measure { height: 0; margin: 0 var(--cover-inset); }
.cover-stage { display: flex; justify-content: center; padding: 0 var(--cover-inset); }
.cover-frame {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  outline: 1px solid rgba(0,0,0,0.08);
}
.cover-frame > video, .cover-frame > img { width: 100%; height: auto; display: block; border-radius: 0; outline: none; }
body.dark .cover-frame { outline-color: rgba(255,255,255,0.08); }

.cover-reveal.is-animated { height: 200vh; }
.cover-reveal.is-animated .cover-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  align-items: center;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
.cover-reveal.is-animated .cover-frame {
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  outline-color: rgba(0,0,0,var(--o));
  will-change: width, height, border-radius;
}
.cover-reveal.is-animated .cover-frame > video,
.cover-reveal.is-animated .cover-frame > img { height: 100%; object-fit: cover; }
body.dark .cover-reveal.is-animated .cover-frame { outline-color: rgba(255,255,255,var(--o)); }

@media (max-width: 768px) {
  .cover-reveal { --cover-inset: var(--gutter); }
  .cover-frame { border-radius: 12px; }
}

/* ── HEADING DESCENDERS ──
   Case-study headings carry overflow:hidden for the TL;DR collapse, which clipped
   descenders (g, y, p) on the last line. Bottom padding gives them room; the matching
   negative margin keeps every gap exactly as before. Kept last so it wins over the
   per-breakpoint .split-heading margins above. */
.t-intro, .split-heading { padding-bottom: 0.2em; margin-bottom: -0.2em; }
body.tldr .t-intro, body.tldr .split-heading { padding-bottom: 0; }