/* ============================================================
   Shared responsive rules for inner pages (those with .topbar)
   Breakpoint: phone ≤ 768px, tablet 769–1023px
   ============================================================ */

/* Solid fallback color so tall pages don't reveal white below the gradient */
:root[data-theme="dark"]  { background-color: #0a0805; }
:root[data-theme="light"] { background-color: #f4ecdf; }

/* Hamburger button — hidden on desktop, shown on phone */
.burger {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  justify-self: end;
}
.burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--fg);
  transition: background 0.6s ease;
}
.burger span:last-child { width: 14px; }

/* Mobile overlay menu */
.m-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-grad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 32px;
}
.m-overlay.open { opacity: 1; pointer-events: auto; }

.m-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  padding: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.m-close svg { width: 22px; height: 22px; }

.m-menu {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
}
.m-menu a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--fg-rail);
}
.m-menu a .num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--fg-mute);
  min-width: 28px;
}
.m-menu a.active { color: var(--fg); }
.m-menu a.active .num { color: var(--fg); }

.m-foot {
  padding-top: 24px;
  display: flex;
  justify-content: flex-start;
}
.m-toggle-wrap .toggle { position: static; }

/* ============================================================
   PHONE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Topbar collapses */
  .topbar {
    grid-template-columns: 1fr auto !important;
    column-gap: 16px !important;
    padding: 20px 22px !important;
  }
  .topnav { display: none !important; }
  .topbar > .toggle { display: none !important; }
  .burger { display: flex; }
  .wordmark { font-size: 18px !important; letter-spacing: 0.04em !important; }

  /* Content padding shrinks */
  .container {
    padding: 32px 22px 56px !important;
  }

  /* Heading scales down */
  .h1 { font-size: 44px !important; }
  .heading {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding-bottom: 18px !important;
    margin-bottom: 28px !important;
  }
  .meta { padding-bottom: 0 !important; }
  .crumb { margin-bottom: 12px !important; font-size: 11px !important; }

  /* Footer (inner pages) */
  footer.foot,
  body > footer {
    padding: 22px !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    font-size: 10px !important;
  }

  /* Photography gallery: 1 col already handled by existing breakpoint,
     but tighten gap and tile decorations */
  .masonry { gap: 14px !important; }
  .tile .corner { width: 16px; height: 16px; }
  .frame-num { font-size: 8px !important; top: 8px !important; left: 8px !important; }

  /* Lightbox: smaller nav zones, accessible close */
  .lb .nav { width: 56px !important; }
  .lb .nav svg { width: 22px !important; height: 22px !important; }
  .lb .close { top: 16px !important; right: 18px !important; font-size: 9px !important; }
  .lb .counter { bottom: 18px !important; font-size: 10px !important; }
  #lb-img { max-width: 94vw !important; max-height: 80vh !important; }

  /* Common content patterns on case-study pages */
  .head-row,
  .two-col,
  .grid-two,
  .two,
  .columns {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .lede { font-size: 17px !important; line-height: 1.55 !important; }

  /* Tiles / cards on index pages */
  .grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* ---- AI / VFX / Photography list cards (stacked) ---- */
  /* The desktop card is `index | thumb | info`. On phone we want:
     small index label, full-width thumb, then title + sub below. */
  a.card {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 14px !important;
    padding: 22px 0 !important;
  }
  a.card:hover { padding-left: 0 !important; padding-right: 0 !important; }
  a.card .thumb { width: 100% !important; }
  a.card .index {
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
  }
  a.card .t {
    font-size: 32px !important;
    line-height: 1.02 !important;
  }
  a.card .sub {
    font-size: 13px !important;
    max-width: none !important;
  }

  /* ---- About page editorial split ---- */
  .about-ed {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .about-ed .portrait { aspect-ratio: 4 / 5 !important; max-width: 320px !important; }
  .about-ed .right .body p { font-size: 15px !important; max-width: none !important; }
  .about-ed .right .micro:not(:first-child) { margin-top: 32px !important; }

  /* ---- Demo reel / case study "below" split + credits ---- */
  .below {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 32px !important;
  }
  .below .left p { font-size: 15px !important; max-width: none !important; }
  .credits {
    grid-template-columns: 1fr !important;
    row-gap: 6px !important;
    padding-top: 0 !important;
  }
  .credits .k { margin-top: 14px !important; }
  .credits .k:first-child { margin-top: 0 !important; }
  .credits .v { font-size: 14px !important; }

  /* ---- Contact split + copy card ---- */
  .contact-split {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .contact-split .letter { font-size: 16px !important; max-width: none !important; }
  .contact-split .letter .sig { font-size: 28px !important; }
  .copy-card { padding: 22px !important; }
  .copy-card .email-val {
    font-size: 26px !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .copy-card .k { font-size: 9px !important; letter-spacing: 0.24em !important; }
  .copy-card .mailto-link { font-size: 10px !important; letter-spacing: 0.2em !important; }
}

/* ============================================================
   TABLET (769–1023px) — tighten desktop layout
   ============================================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .topbar { padding: 28px 36px !important; column-gap: 24px !important; }
  .topnav { gap: 22px !important; font-size: 12px !important; }
  .container { padding: 48px 36px 72px !important; }
  .h1 { font-size: 72px !important; }
}

/* ============================================================
   Case-study fixes that need to fire at the ≤980px collapse
   point (matches each page's own breakpoint). Covers both phone
   and small tablet so images don't disappear or shrink to a strip.
   ============================================================ */
@media (max-width: 980px) {
  /* Detective Office: when .beat switches to flex column, the desktop
     `align-items: end` becomes cross-axis end and squashes the still
     to 0 width. Force stretch + explicit 100% width on children. */
  .beat,
  .beat.reverse {
    align-items: stretch !important;
  }
  .beat .still-wrap,
  .beat.reverse .still-wrap,
  .beat .text,
  .beat.reverse .text {
    width: 100% !important;
    grid-column: auto !important;
  }

  /* AI Lifestyle: image rows and spreads are scaled down to 62% / 92%
     on desktop for a centered editorial look. On mobile that just
     makes them tiny — let them fill the container. Note the hero
     img-row sits OUTSIDE the .article wrapper with an inline
     max-width:62%, so the selector has to match bare .img-row too. */
  .img-row,
  .img-row[style] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .spread {
    max-width: 100% !important;
  }

  /* AI Turntables: 3-col hero videos, 3-up stills, and 4-col angle grid
     all stay multi-column at desktop sizes. Collapse them for phone
     so the bags are actually visible. */
  .hero-turntables {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 12px !important;
    padding: 12px 0 !important;
  }
  .triple-stills {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
  }
  .angle-grid {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Temple Moss: vertical (9:16) videos and portrait frames are sized
     for tablet (380px / 100% of a narrow column). On phone that puts
     them at ~700px tall — way too dominant. Cap to a sensible size. */
  .inline-portrait,
  .video-wrap {
    max-width: 260px !important;
  }
  .portrait-row .frame-wrap {
    width: auto !important;
    max-width: 260px !important;
  }
}

/* ============================================================
   Phone-only (≤768px) extras layered on top of the 980px block.
   ============================================================ */
@media (max-width: 768px) {
  /* Detective Office: on phone the user wants title + body to read
     BEFORE the image. Default .beat has source order still→text; the
     .reverse variant has text→still. Force flex-direction so text
     ends up first in both. */
  .beat {
    flex-direction: column-reverse !important;
  }
  .beat.reverse {
    flex-direction: column !important;
  }
  /* Frame label (absolutely positioned top:-28px above still) needs
     extra top spacing on the still in mobile so it doesn't collide
     with the body text that now sits directly above. */
  .beat .still-wrap { margin-top: 36px !important; }
}