/* MechanicWithIQ — responsive states: mobile stacked flow (approved), medium art-directed
   compositions (640–1099), reduced motion, tap targets. */

/* ============================================================
   NARROW (≤639px) — simple vertical continuity, no pin, no scrub
   ============================================================ */
@media (max-width: 639px) {
  :root { --margin: 28px; }
  html { scroll-padding-top: 64px; }
  /* intro owns the header slot on mobile: the working nav establishes only after leaving Intro */
  .hdr { height: 64px; padding: 0 var(--margin); font-size: 10px; z-index: 1000; isolation: isolate; transition: color var(--dur-standard) var(--ease-out); }
  .hdr.ready { background: var(--base); border-bottom: 1px solid var(--hair); }
  .hdr.ready:not(.suppressed) { opacity: 1 !important; } /* the working header owns a stable Palette A surface — readable over any project media */
  .hdr.suppressed { opacity: 0; }
  .hdr.suppressed .hdr-nav { pointer-events: none; }
  .hdr-word { font-size: 11px; }
  .hdr-nav { gap: 16px; }
  .hdr-nav button { position: relative; }
  .hdr-nav button::after { content: ""; position: absolute; inset: -8px 0; } /* ≥40px tap target without moving the underline */
  .journey { height: auto; }
  .stage { position: static; height: auto; overflow: visible; }
  .layer { position: relative; inset: auto; min-height: 100vh; }
  .l-index { display: none; } /* the in-flow index is the only index on mobile */

  /* intro */
  .l-intro { padding: 0 var(--margin); }
  .intro-topbar { height: 64px; font-size: 10px; }
  .intro-topbar .right { display: none; }
  .intro-topbar .right-m { display: inline; }
  h1.monument { font-size: 56px; }
  h1.monument .l2 { margin-left: 20px; }
  h1.monument .l3 { margin-left: 40px; }
  .descriptor { margin-top: 28px; font-size: 14px; }
  .intro-bottombar { min-height: 96px; flex-direction: column; justify-content: center; gap: 10px; font-size: 10px; }
  .intro-bottombar .caps { flex-wrap: wrap; gap: 4px 10px; }
  .intro-bottombar .caps b { font-size: 11px; }
  .intro-bottombar .caps span { font-size: 9px; }

  /* elite — media leads (approved m01); the frame stays phone-width, centered */
  .l-elite { padding: 64px 0 0; display: flex; flex-direction: column; }
  .elite-main { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: 0; }
  .l-elite .info { order: 2; flex: 1 0 auto; justify-content: center; padding: 0 var(--margin); }
  .l-elite h2 { font-size: 44px; margin-top: 12px; }
  .l-elite .meta { margin-top: 12px; font-size: 11px; }
  .l-elite .view { margin-top: 18px; font-size: 10px; }
  .l-elite .media { order: 1; align-self: center; width: min(100%, 520px); height: 520px; flex: none; border: none; border-bottom: 1px solid var(--hair); }
  .l-elite .media img { object-position: top center; }
  .layer-bottombar { height: 48px; padding: 0 var(--margin); font-size: 9px; }

  /* bespalove */
  .l-bespalove { height: 100vh; min-height: 100vh; }
  .title-over { left: 28px; right: 28px; bottom: 96px; }
  .title-over h2 { font-size: 52px; }
  .title-over .sub { font-size: 10px; margin-top: 12px; }
  .l-bespalove .view { right: 28px; bottom: 56px; font-size: 10px; }
  .besp-bottombar { left: 28px; right: 28px; bottom: 20px; }
  .besp-bottombar span:last-child { display: none; }

  /* tissucare — the complete mobile home (390:844, ratio-matched, zero crop) as the exhibit */
  .l-tissucare { padding: 64px 0 0; display: flex; flex-direction: column; }
  .tissu-main { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: 0; }
  .l-tissucare .info { order: 2; flex: 1 0 auto; justify-content: center; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 var(--margin); }
  .l-tissucare h2 { font-size: 44px; margin-top: 12px; }
  .l-tissucare .meta { margin-top: 12px; font-size: 11px; }
  .l-tissucare .view { margin-top: 18px; margin-left: 0; font-size: 10px; }
  .l-tissucare .media-desktop { display: none; }
  .l-tissucare .media-mobile {
    position: relative; right: auto; bottom: auto; order: 1; align-self: center;
    width: min(100%, 390px); height: auto; aspect-ratio: 390 / 844;
    flex: none; border: none; border-bottom: 1px solid var(--hair);
  }
  .l-tissucare .layer-bottombar { height: 48px; padding: 0 var(--margin); font-size: 9px; }

  /* monsi — one expressive mobile hero; no product-wall tile in the primary viewport */
  .l-monsi { padding: 64px 0 0; display: flex; flex-direction: column; }
  .monsi-main { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: 0; }
  .l-monsi .monsi-id { display: contents; }
  .l-monsi .kicker-row { order: 2; padding: 20px var(--margin) 0; }
  .l-monsi .media-hero { order: 1; align-self: center; width: min(100%, 520px); height: auto; aspect-ratio: 390 / 560; flex: none; border: none; border-bottom: 1px solid var(--hair); }
  .l-monsi .media-hero img { object-fit: contain; object-position: center top; }
  .l-monsi .title { order: 3; padding: 0 var(--margin); }
  .l-monsi h2 { font-size: 44px; }
  .l-monsi .meta-v { order: 4; display: block; padding: 0 var(--margin); }
  .l-monsi .meta { font-size: 11px; }
  .l-monsi .view { margin-top: 16px; font-size: 10px; }
  .l-monsi .tile-b { display: none; }
  .l-monsi .layer-bottombar { height: 48px; padding: 0 var(--margin); font-size: 9px; }

  /* index */
  .index-wrap { height: auto; min-height: 100vh; }
  .index-view { height: auto; min-height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 64px var(--margin) 0; }
  .list { width: 100%; }
  .row { grid-template-columns: 44px 1fr; padding: 16px 14px; }
  .row .cat { display: none; }
  .row .name { font-size: 24px; }
  .preview-col { display: none; }
  .index-bottombar { position: static; height: 48px; margin: 28px 0 0; font-size: 9px; }

  /* mobile reveals: opacity+small rise only, mobile.js toggles .in (one-shot) */
  [data-reveal] { opacity: 0; transform: translateY(16px); }
  [data-reveal].in { opacity: 1; transform: translateY(0); }
  [data-reveal="media"] { transform: scale(1.03); }
  [data-reveal="media"].in { transform: scale(1); }
  [data-reveal], [data-reveal].in {
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
}

/* ============================================================
   MEDIUM (640–1099px) — project-specific art direction.
   Elite/Bespalove keep their approved medium rules.
   ============================================================ */
@media (min-width: 640px) and (max-width: 1099px) {
  .title-over h2 { font-size: clamp(56px, 8.5vw, 104px); }
  .l-elite .info { grid-column: 1 / 5; }
  .l-elite h2 { font-size: clamp(32px, 5vw, 48px); }
  .l-elite .media { grid-column: 5 / 13; align-self: center; height: min(48vw, calc(100vh - 200px)); }

  .index-view { column-gap: 32px; }
  .row { padding-top: 18px; padding-bottom: 18px; }
  .row .name { font-size: clamp(28px, 4vw, 34px); }
}

/* PORTRAIT TABLET — one centered mobile exhibit at gallery scale, compact identity above it. */
@media (min-width: 640px) and (max-width: 1099px) and (orientation: portrait) {
  .l-tissucare .tissu-main,
  .l-monsi .monsi-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }

  .l-tissucare .info {
    grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 1fr auto;
    grid-template-rows: auto auto; align-items: end; gap: 6px 24px; padding: 0;
  }
  .l-tissucare .info .kicker { grid-column: 1; grid-row: 1; }
  .l-tissucare h2 { grid-column: 1; grid-row: 2; font-size: clamp(42px, 6vw, 54px); margin: 0; }
  .l-tissucare .meta { grid-column: 2; grid-row: 1; margin: 0; align-self: end; font-size: 11px; }
  .l-tissucare .view { grid-column: 2; grid-row: 2; margin: 0; align-self: end; }
  .l-tissucare .media-desktop { display: none; }
  /* the complete mobile home, ratio-matched and height-budgeted against the stage */
  .l-tissucare .media-mobile {
    position: relative; right: auto; bottom: auto; grid-column: 1; grid-row: 2;
    align-self: center; justify-self: center;
    width: min(46vw, 400px, calc((100vh - 255px) * 0.462)); height: auto;
    aspect-ratio: 390 / 844;
  }

  /* MONSI: compact identity band above the exhibit — kicker line, then title (left) + meta/CTA (right) */
  .l-monsi .monsi-main { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); row-gap: 10px; }
  .l-monsi .kicker-row { grid-column: 1; grid-row: 1; }
  .l-monsi .monsi-id {
    grid-column: 1; grid-row: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
    margin-top: 18px;
  }
  .l-monsi h2 { font-size: clamp(42px, 6vw, 54px); }
  .l-monsi .meta-v { display: flex; align-items: baseline; gap: 18px; }
  /* the expressive mobile hero (390:760), height-budgeted against the stage */
  .l-monsi .media-hero {
    grid-column: 1; grid-row: 3; align-self: center; justify-self: center;
    width: min(47vw, 410px, calc((100vh - 250px) * 0.513)); height: auto; aspect-ratio: 390 / 760;
  }
  .l-monsi .tile-b { display: none; }

  .index-view { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-bottom: 64px; }
  .list { width: 100%; flex: none; }
  .preview-col { width: min(100%, 560px); align-self: center; }
  .preview { width: min(100%, calc((100vh - 170px) * var(--preview-ratio-num, 1.5))); height: auto; max-height: none; }
}

/* LANDSCAPE TABLET / SMALL LAPTOP — desktop primary + smaller overlapping mobile.
   The supporting-object sizing shares its fluid formula with the desktop block
   (exhibits.css), so the 1099→1100 boundary is continuous, not a cliff. */
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
  .index-view .row { grid-template-columns: 52px 1fr; }
  .index-view .row .cat { display: none; }
}

@media (min-width: 640px) and (max-width: 1099px) and (orientation: landscape) {
  .l-tissucare .tissu-main,
  .l-monsi .monsi-main { grid-template-rows: auto minmax(0, 1fr); row-gap: 10px; }

  .l-tissucare .info { grid-column: 1 / 13; grid-row: 1; padding: 0 0 4px; }
  .l-tissucare h2 { font-size: clamp(34px, 4.6vw, 46px); }
  .l-tissucare .media-desktop {
    grid-column: 1 / 13; grid-row: 2; align-self: center; justify-self: center;
    height: min(52vw, calc(100vh - 220px)); width: auto; aspect-ratio: 8 / 5; max-width: 100%;
  }
  /* same 390:660 hero-region crop and fluid height as desktop (54% of the field) */
  .l-tissucare .media-mobile {
    position: absolute; right: 3%; bottom: 24px;
    height: min(calc(52vw * 0.54), calc((100vh - 220px) * 0.54)); width: auto; aspect-ratio: 390 / 660;
  }

  .l-monsi .kicker-row { grid-column: 1 / 4; grid-row: 1; }
  .l-monsi .monsi-id { grid-column: 4 / 13; grid-row: 1; display: flex; justify-content: flex-end; align-items: baseline; gap: 22px; }
  .l-monsi h2 { font-size: clamp(34px, 4.6vw, 46px); }
  .l-monsi .meta-v { display: flex; align-items: baseline; gap: 18px; }
  .l-monsi .media-hero {
    grid-column: 1 / 13; grid-row: 2; align-self: center; justify-self: center;
    height: min(52vw, calc(100vh - 220px)); width: auto; aspect-ratio: 8 / 5; max-width: 100%;
  }
  .l-monsi .tile-b {
    display: block; position: absolute; right: 3%; bottom: 24px;
    height: min(calc(52vw * 0.54), calc((100vh - 220px) * 0.54)); width: auto; aspect-ratio: 390 / 560;
  }

  .index-view { grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); padding-bottom: 64px; }
  .preview { max-height: none; }
}

/* ---------- reduced motion — gentler variant, everything functional ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 0; transform: none; }
  [data-reveal].in { opacity: 1; }
  [data-reveal], [data-reveal].in { transition: opacity 200ms var(--ease-out); }
  .preview .pv { transition: opacity 200ms var(--ease-out); }
  .hdr { transition: color 200ms var(--ease-out), opacity 200ms var(--ease-out); }
}