/* ============================================================
   synqa.ca - pass 5 mobile composition
   The brief (section 9) treats mobile as its own composition, not a
   media-query degradation.  Several signature moves drop entirely
   (M08 pin, M11 ticker, M13 trail, M14 magnetic, M18 split, M23
   double-take); others adapt (M09 reduced translation, M19 moves
   from top to bottom of viewport); two new moves appear (M25 tap-
   to-reveal hint, M26 drawer slide).
   ============================================================ */

/* ----------------------------------------------------------------
   Hamburger button + drawer - present on every page; visible only
   under the mobile breakpoint.
   ----------------------------------------------------------------*/
.shell-nav-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.shell-nav-hamburger:focus { outline: 2px solid var(--clay); outline-offset: 2px; }
.shell-nav-hamburger-bars {
  display: flex; flex-direction: column; gap: 5px;
  width: 22px;
}
.shell-nav-hamburger-bars i {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 240ms var(--ease-standard), opacity 120ms linear;
}
[data-surface="ink"] .shell-nav-hamburger-bars i { background: var(--bone); }

/* Drawer - fixed full-height panel, slides in from the right.
   Inline transform driven by mobile.js (gotcha-1 safe). */
.shell-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: var(--bone);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 28px;
  gap: 24px;
  transform: translateX(100%);
  will-change: transform;
  visibility: hidden;
  box-shadow: var(--shadow-lg);
  /* The drawer now carries the full 8-link inventory (Home / Work /
     Theta / Holm / Rewrite / PatchPal / About / Contact) plus head
     and foot. On short viewports (landscape phones, etc.) the link
     list could overflow the panel; allow vertical scroll so every
     link is reachable. The foot stays pinned via margin-top: auto. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.shell-drawer[data-open="true"] { visibility: visible; }
.shell-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.shell-drawer-mark img { height: 22px; width: auto; }
.shell-drawer-close {
  background: none; border: none; padding: 8px;
  cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stone);
}
.shell-drawer-close .period { color: var(--clay); }
.shell-drawer-links {
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
}
/* M26 drawer · short-viewport accommodation. On phones in landscape
   (or smaller windows under 720px tall), 8 display-size links + head
   + foot can clip. Step the type + gap down so the inventory stays
   on one panel without scroll on the common cases. */
@media (max-height: 720px) {
  .shell-drawer-links { font-size: 22px; gap: 10px; }
  .shell-drawer-links a { padding: 4px 0; }
}
@media (max-height: 560px) {
  .shell-drawer-links { font-size: 18px; gap: 6px; }
  .shell-drawer { gap: 16px; padding: 20px; }
}
.shell-drawer-links a {
  color: var(--ink);
  border-bottom: none;
  padding: 8px 0;
  text-decoration: none;
}
.shell-drawer-links a .period { color: var(--clay); }
/* M15 press state (the brief: hover-italic translates to pressed
   state on tap; this fires as :active on touch). */
.shell-drawer-links a:active {
  font-style: italic;
  color: var(--clay);
}
.shell-drawer-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stone);
}
.shell-drawer-foot .period { color: var(--clay); }
.shell-drawer-foot .toronto { color: var(--clay); }
.shell-drawer-foot .capetown { color: var(--harbor); }

/* Scrim under the drawer.  Inline opacity driven by mobile.js. */
.shell-drawer-scrim {
  position: fixed;
  inset: 0;
  background: var(--bone-300);
  z-index: 59;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}
.shell-drawer-scrim[data-open="true"] { visibility: visible; }

/* M25 tap-to-reveal hint - only visible on touch, only on Ch 3
   redaction lines.  Pulses once on chapter enter; fades after the
   first tap on any line.
   position:absolute takes the hint out of normal flow so that fading
   or hiding it (display:none) causes zero layout shift on the
   .ch-03-line-body; the containing block stays the same height.
   top:-18px positions it above the bar/text; z-index:3 keeps it
   above .ch-03-line-bar (position:absolute, covers full line-body). */
.ch-03-line-mobile-hint {
  display: none;
  position: absolute;
  top: -18px;
  left: 0;
  z-index: 3;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stone);
  pointer-events: none;
  will-change: opacity;
}
.ch-03-line-mobile-hint .dot { color: var(--clay); margin-right: 6px; }

/* ----------------------------------------------------------------
   Breakpoint - mobile composition kicks in below 1024px OR on any
   touch-primary device, mirroring section 9's rule.
   ----------------------------------------------------------------*/

@media (max-width: 1023px), (pointer: coarse) {

  /* ---------- Persistent shell ---------- */

  .shell-nav {
    padding: 14px 20px;
  }
  .shell-nav-links { display: none; }
  /* Hide the desktop CTA in nav; the drawer holds the same call. */
  .shell-nav > .shell-nav-cta { display: none; }
  .shell-nav-hamburger { display: inline-flex; }

  /* Place stamps shrink to 9pt. */
  .shell-stamp { font-size: 9px; }
  /* Mobile nav height: 14px padding + 44px hamburger + 14px padding = 72px.
     Top stamps sit at 80px to clear the nav bar with an 8px gap. */
  .shell-stamp-tr { top: 80px; right: 20px; }
  .shell-stamp-bl { bottom: 20px; left: 20px; }

  .shell-chapter-stamp {
    font-size: 9px;
    top: 80px; left: 20px;
  }

  /* M11 mono ticker - disabled. */
  .shell-ticker { display: none !important; }

  /* M13 cursor period trail - disabled (CSS-side; mobile.js also
     skips creating dots when pointer: coarse). */
  .shell-trail { display: none; }

  /* M14 magnetic CTA - disabled implicitly by mobile.js (the
     pointer:fine gate already covers this), no CSS needed. */

  /* M03 carbon copy - disabled. */
  .carbon { display: none !important; }

  /* ---------- Chapter 1 · cold open ---------- */

  .ch-01 { height: 100vh; height: 100svh; }
  .ch-01-mono-top { top: 18svh; font-size: 9px; }
  .ch-01-stamp {
    bottom: 18svh; font-size: 9px; gap: 6px;
    flex-direction: column; align-items: center;
  }
  .ch-01-stamp .dot { display: none; }

  /* M01 dock wordmark sizes down for mobile + lands at the smaller
     nav slot.  HERO_W is hard-coded in site.js; the visible target
     scale stays at 0.18 but the dock target nav slot is now ~62px,
     so visually the wordmark ends up smaller anyway. */
  .dock-wordmark { width: 200px; }
  .shell-nav-brand { width: 62px; height: 22px; }
  .shell-nav-brand img { height: 22px; }

  /* ---------- Chapter 2 · the line ---------- */

  .ch-02 { padding: 18vh 0 14vh; }
  .ch-02-inner { padding: 0 24px; }
  .line-head { font-size: clamp(36px, 9vw, 56px); }
  .ch-02-foot {
    font-size: 9px; margin-top: 32px;
    flex-wrap: wrap;
  }

  /* ---------- Chapter 3 · the chair ---------- */

  .ch-03 {
    min-height: 0; padding: 16vh 0 12vh;
  }
  .ch-03-inner { padding: 0 24px; gap: 36px; }
  .ch-03-head { font-size: clamp(28px, 7.4vw, 42px); }
  .ch-03-lines { gap: 36px; }
  .ch-03-line { flex-direction: column; align-items: flex-start; gap: 0; }
  .ch-03-line .lead { transform: none; font-size: 18px; }
  .ch-03-line-text { font-size: clamp(18px, 4.8vw, 24px); }
  /* Hide the desktop cursor-proximity hint, show the tap-to-read
     hint instead.  mobile.js handles the pulse + fade-out. */
  .ch-03-line-hint { display: none; }
  .ch-03-line-mobile-hint { display: block; }

  /* ---------- Chapter 4 - the turn (M18 vertical sticky split) ---------- */

  /* The chapter scroll runway: 230svh keeps the JS budget working on mobile. */
  .ch-04 {
    height: 230svh; min-height: unset;
    background: var(--bone);
  }

  /* Sticky stage - the whole visible area for the pin duration.
     overflow:hidden clips the sliding halves as they depart.
     No overflow/transform/filter on any ancestor (body uses overflow-x:clip
     which is safe and does not break sticky). */
  .ch-04-pin {
    position: sticky; top: 0; height: 100svh; overflow: hidden;
    background: var(--bone);
  }

  /* Bone half - top 50svh of the stage. GPU-composited for the slide.
     Explicit 50svh (not 50%) avoids any ambiguity from the desktop base
     rule .ch-04-half { top:0; bottom:0 } which would otherwise stretch
     the half to full height before the mobile override lands.
     right: auto ensures the desktop .ch-04-half-left { right: 50% } rule
     is cleared so this half spans the full width of the pin. */
  .ch-04-half-left {
    position: absolute; top: 0; bottom: auto; left: 0; right: auto; width: 100%; height: 50svh;
    z-index: 2;
    padding: 32px 24px clamp(36px, 7vh, 64px);
    border-right: none; border-bottom: none;
    display: flex; flex-direction: column; justify-content: flex-end;
    will-change: transform;
  }

  /* Ink half - bottom 50svh of the stage. GPU-composited for the slide.
     Explicit 50svh and top: auto mirror the Bone half for a perfect 50/50
     split. left: 0 overrides the desktop .ch-04-half-right { left: 50% }. */
  .ch-04-half-right {
    position: absolute; top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 50svh;
    z-index: 2;
    background: var(--ink); color: var(--bone);
    padding: clamp(36px, 7vh, 64px) 24px 32px;
    display: flex; flex-direction: column; justify-content: flex-start;
    will-change: transform;
  }

  /* Shared half base - reset the desktop generic rule */
  .ch-04-half {
    position: absolute;
  }

  /* Unified Ink composition sits BEHIND the halves and is revealed as they part */
  .ch-04-unified {
    position: absolute; inset: 0; z-index: 1;
    padding: 24px;
    opacity: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
    background: var(--ink); color: var(--bone);
  }

  .ch-04-half-left-stamp,
  .ch-04-half-right-stamp { position: relative; top: 0; left: 0; right: 0; padding: 0; text-align: left; margin-bottom: 16px; }
  .ch-04-half-right-stamp { margin-top: 16px; margin-bottom: 0; }
  .ch-04-words { position: relative; padding: 0; gap: 10px; }
  .ch-04-word { opacity: 1; transform: none; font-size: clamp(20px, 5.5vw, 30px); }
  .ch-04-right-head { position: relative; padding: 0; }
  .ch-04-right-head-line { font-size: clamp(28px, 7.5vw, 48px); }
  .ch-04-right-word { opacity: 1; transform: none; }
  .ch-04-unified-head { font-size: clamp(28px, 7.5vw, 48px); text-align: center; }
  .ch-04-unified-body { font-size: clamp(14px, 3.8vw, 18px); text-align: center; max-width: 32ch; }
  .ch-04-phase { display: none; }

  /* ---------- Chapter 5 · services (M08 pin disabled) ---------- */

  .ch-05 { height: auto; }
  .ch-05-pin { position: relative; height: auto; overflow: visible; }
  .ch-05-header { position: relative; top: 0; padding: 80px 24px 24px; }
  .ch-05-peel { white-space: normal; font-size: clamp(28px, 7vw, 40px); }
  .ch-05-peel .peel-char { clip-path: none !important; }
  .ch-05-track {
    position: relative; flex-direction: column; gap: 24px;
    /* Full-width stacked tiles - reset the desktop centre alignment used
       by the horizontal track. */
    align-items: stretch;
    padding: 0 24px 64px;
    transform: none !important;
  }
  .ch-05-tile {
    /* Reset the desktop fit-cap (its 100% resolves against the auto-height
       mobile pin, which is meaningless here). */
    flex: 1 1 auto; height: auto; min-height: 0; max-height: none;
    data-revealed: "true"; /* not actually used; just CSS marker */
  }
  .ch-05-tile-inner { padding: 32px; gap: 18px; }
  .ch-05-tile-head { font-size: clamp(22px, 5vw, 28px); }
  .ch-05-tile-border rect { stroke-dashoffset: 0 !important; }
  .ch-05-tile-num,
  .ch-05-tile-head,
  .ch-05-tile-body,
  .ch-05-tile-foot {
    opacity: 1 !important; transform: none !important;
  }
  .ch-05-paging { display: none; }

  /* ---------- Chapter 6 · the proof (M08 disabled, M19 bottom) ---------- */

  .ch-06 { height: auto; }
  .ch-06-pin { position: relative; height: auto; overflow: visible; }
  .ch-06-header { position: relative; top: 0; padding: 64px 24px 24px; }
  .ch-06-bg { display: none; } /* M17 reverse parallax off on phones */
  .ch-06-track {
    position: relative; flex-direction: column; width: 100%;
    transform: none !important;
  }
  .ch-06-panel { flex: 1 1 auto; height: auto; min-height: 0; }
  .case-panel { padding: 80px 24px; }
  .case-panel-inner { grid-template-columns: 1fr; gap: 40px; }
  .case-headline { font-size: clamp(28px, 6.5vw, 36px); }
  .case-metrics { padding-left: 0; padding-top: 32px; border-left: none; border-top: 1px solid var(--border); }
  .case-metric .value { font-size: clamp(56px, 14vw, 84px); }
  .wipe-panel { padding: 80px 24px; }
  .wipe-panel-quote { position: relative; inset: auto; padding: 0; }
  .wipe-panel-quote p { font-size: clamp(28px, 7vw, 40px); }
  .wipe-panel-stamp { position: relative; bottom: auto; left: auto; margin-top: 64px; }
  .ch-06-paging { display: none; }
  .peel-headline { white-space: normal; font-size: clamp(28px, 7vw, 40px); text-align: left; padding: 0 24px; }

  /* ---------- Chapter 7 · Theta. (M09 reduced) ---------- */

  /* Reset the desktop full-viewport hero so it sizes to content on mobile. */
  .ch-07 { min-height: 0; padding: 14vh 0; }
  .ch-07-inner { grid-template-columns: 1fr; padding: 0 24px; gap: 48px; }
  .ch-07-head { font-size: clamp(36px, 8.5vw, 56px); }
  .ch-07-card { padding: 20px; }

  /* ---------- Chapter 8 · two continents ---------- */

  .ch-08 { padding: 14vh 0; min-height: 0; }
  .ch-08-inner { padding: 0 24px; gap: 56px; }
  .ch-08-head { font-size: clamp(32px, 8vw, 48px); }
  .ch-08-grid { display: none; } /* dot-grid + M17 parallax off on phones */
  .ch-08-cols { grid-template-columns: 1fr; gap: 40px; }
  .ch-08-arc-wrap {
    aspect-ratio: 1280 / 520;
    min-height: 120px;
  }

  /* ---------- Chapter 9 · the close ---------- */

  .ch-09 { padding: 14vh 0 8vh; }
  .ch-09-inner { grid-template-columns: 1fr; padding: 0 24px; gap: 48px; }
  .ch-09-head { font-size: clamp(36px, 8.5vw, 56px); }
  .ch-09-form { padding: 28px; }
  .ch-09-form-foot { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* ---------- Chapter wipes - work as-is, just tighten ---------- */
  .chapter-wipe { height: 100vh; height: 100svh; }
  .chapter-wipe-weave .weave-period { font-size: 48px; }

  /* ---------- Sub-pages - single column ---------- */
  .subpage-hero { padding: 18vh 0 8vh; }
  .subpage-hero-inner,
  .case-hero-inner,
  .theta-section-inner,
  .theta-waitlist-inner,
  .case-section-inner,
  .case-cta-block-inner,
  .about-section-inner,
  .contact-grid,
  .subpage-footer-inner,
  .work-grid {
    padding-left: 24px; padding-right: 24px;
  }
  .subpage-hero-head { font-size: clamp(40px, 10vw, 64px); }
  .work-grid { padding-top: 0; padding-bottom: 10vh; }
  .work-row {
    grid-template-columns: 1fr; gap: 18px; padding: 32px 0;
  }
  .work-row-metric-wrap,
  .work-row-cta { justify-self: start; }
  .work-row-head { font-size: clamp(22px, 5.4vw, 28px); }

  .case-hero { padding: 18vh 0 4vh; }
  .case-hero-head { font-size: clamp(36px, 8.5vw, 56px); }
  .case-metric-band { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }

  .case-section { padding: 10vh 0; }
  .case-section-inner { grid-template-columns: 1fr; gap: 24px; }
  .case-section-head { font-size: clamp(26px, 6.4vw, 36px); }

  .theta-section { padding: 10vh 0; }
  .theta-section-head { font-size: clamp(28px, 7vw, 40px); }
  .theta-steps { grid-template-columns: 1fr; }
  .theta-step { padding: 28px; min-height: 0; }
  .theta-step-num { font-size: 48px; }
  .theta-why { grid-template-columns: 1fr; gap: 16px; }
  .theta-why-body { font-size: 20px; }
  .theta-channels-grid { grid-template-columns: 1fr; }
  .theta-waitlist { padding: 10vh 0; }
  .theta-waitlist-inner { grid-template-columns: 1fr; gap: 40px; }
  .theta-waitlist-head { font-size: clamp(36px, 8vw, 56px); }
  .theta-form { padding: 24px; }
  .theta-form-row-grid { grid-template-columns: 1fr; }
  .theta-form-foot { flex-direction: column; align-items: flex-start; gap: 16px; }

  .about-section { padding: 10vh 0; }
  .about-section-inner { grid-template-columns: 1fr; gap: 24px; }
  .about-section-head { font-size: clamp(28px, 7vw, 40px); }
  .about-hiring-grid { grid-template-columns: 1fr; }
  .about-hiring-card { padding: 28px; }

  .contact-grid { grid-template-columns: 1fr; gap: 48px; padding-bottom: 12vh; }
  .contact-offices { grid-template-columns: 1fr; gap: 24px; }
  .ch-09-form { padding: 24px; }

  .subpage-footer { padding: 64px 0 32px; }
  .subpage-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .subpage-footer-bottom {
    flex-direction: column; gap: 14px; padding: 16px 24px 0;
  }
}

/* ----------------------------------------------------------------
   Phone-only - extra M17 drop + tighter type
   ----------------------------------------------------------------*/
@media (max-width: 640px) {
  .ch-08-grid,
  .ch-06-bg { display: none; }
  .shell-nav-brand { width: 56px; height: 20px; }
  .shell-nav-brand img { height: 20px; }
  .dock-wordmark { width: 168px; }
}