/* ============================================================================
   MGNTION — ARCHITECTURE & CASE STUDY ON HANDHELDS
   The two deep experiences, redesigned for touch rather than reflowed.
   Loaded after responsive.css.
   ========================================================================= */

/* ============================================================================
   ARCHITECTURE — a native-feeling explorer
========================================================================== */
@media (max-width: 833px) {

  /* the bar becomes two rows: identity, then the lens as a full-width segment */
  .arch__bar {
    height: auto; flex-wrap: wrap; padding-block: .55rem;
    gap: .5rem 1rem; align-items: center;
  }
  .arch__back { order: 1; }
  .arch__mark { display: none; }
  .lens {
    order: 3; width: 100%; border: 1px solid var(--rule);
    background: rgba(255,255,255,.02);
  }
  .lens button { flex: 1; min-height: 46px; padding-inline: .3rem; font-size: 10px; letter-spacing: .08em; }
  [data-lang='he'] .lens button, [data-lang='ar'] .lens button { font-size: var(--t-sm); }

  .ah { padding-top: 2.5rem; }
  .ah__n, .ah__a { font-size: clamp(2.2rem, 13vw, 4rem); }
  .ah__s { font-size: 1.05rem; max-width: none; }
  .am { grid-template-columns: repeat(2, 1fr); }

  /* the diagram gets real estate and a visible affordance */
  .dg { height: 62svh; touch-action: none; }
  .dg__label { font-size: 15px; }
  .dg__hint {
    display: block; inset-inline: 0; bottom: .7rem; text-align: center;
    inset-inline-start: 0; font-size: 9px;
  }
  .dg__zoom { inset-inline-end: .7rem; bottom: 2.4rem; }

  /* the detail panel becomes a bottom sheet with a grip */
  /* explicit longhands: the base rule sets inset-block, and mixing that with
     the `inset` shorthand left the sheet 24px past the frame and clipped */
  .dg__panel {
    inset-block-start: auto; inset-block-end: 0; inset-inline: 0;
    width: auto; max-height: 68%;
    border-inline-start: 0; border-top: 1px solid rgba(var(--acc-rgb), .45);
    border-radius: 14px 14px 0 0; padding-top: 1.6rem;
    animation: sheetIn 380ms var(--e-out);
  }
  @keyframes sheetIn { from { transform: translateY(24px); opacity: 0 } }
  .dgp__grip {
    position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 99px; background: rgba(242,237,227,.28);
  }
  .dgp__x { top: 1.3rem; min-width: 44px; min-height: 44px; display: grid; place-items: center; }

  /* subsystem rows read as a list, not a table */
  .sub__h { grid-template-columns: 2.4rem 1fr 1.4rem; gap: .8rem; padding-block: 1.1rem; }
  .sub__t { font-size: 1.15rem; }
  .sub__tag { grid-column: 2; text-align: var(--logical-start); font-size: 9px; }
  .sub__l { grid-template-columns: 1fr; }

  .caps, .pcs { grid-template-columns: 1fr; }
  .sec__t { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
  .sgs { gap: 2rem; }
  .tok { font-size: .8rem; padding: .6rem 1rem; }
  .arch__foot { flex-direction: column; }
}

@media (min-width: 600px) and (max-width: 833px) {
  .am { grid-template-columns: repeat(3, 1fr); }
  .caps, .pcs { grid-template-columns: repeat(2, 1fr); }
  .sub__l { grid-template-columns: repeat(2, 1fr); }
}

.dgp__grip { display: none; }
@media (max-width: 833px) { .dgp__grip { display: block; } }

/* ============================================================================
   CASE STUDY — editorial storytelling that survives a phone
========================================================================== */
@media (max-width: 833px) {

  .cs { --csbar: 54px; }
  .cs__bar { gap: .6rem; }
  .cs__mark { display: none; }
  .cs__j { min-height: 44px; display: inline-flex; align-items: center; }

  .chero__kind { font-size: .72rem; }
  .chero__s { font-size: 1.05rem; max-width: none; }
  .chero__meta { gap: .8rem 1.2rem; }

  /* chapters: generous rhythm, comfortable measure, no walls of text */
  .ch { padding-block: clamp(3.2rem, 11vh, 6rem) !important; }
  .ch__head { gap: .8rem; }
  .ch__lead { font-size: clamp(1.5rem, 7.4vw, 2.4rem); max-width: none; }
  .ch__body { max-width: 40ch; }
  .ch__body p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25em; }
  .ch--open .ch__body p:first-child { font-size: 1.18rem; line-height: 1.6; }

  /* Pull quotes stay enormous. No negative margin: .pullq already sits outside
     .cwrap and spans the full width, so pulling it further overflowed the
     scroller by exactly two gutters. Only the text is inset. */
  .pullq { padding-block: clamp(2.4rem, 8vh, 4rem); }
  .pullq p {
    font-size: clamp(1.6rem, 8.4vw, 2.6rem); line-height: 1.2; max-width: none;
  }
  [data-lang='ar'] .pullq p, [data-lang='he'] .pullq p { font-size: clamp(1.4rem, 7vw, 2.2rem); line-height: 1.4; }

  .cclose { font-size: clamp(1.6rem, 8.6vw, 2.6rem); max-width: none; }

  /* principles and moments become full-width rows */
  .prin { grid-template-columns: 1fr; }
  .prin__c { padding: 1.4rem 1.3rem 1.8rem; }
  .mom__c { grid-template-columns: 2.6rem 1fr; gap: .9rem; padding-block: 1.6rem; }
  .mom__c h4 { font-size: clamp(1.2rem, 5.8vw, 1.7rem); }
  .mom__c p { grid-column: 2; font-size: 1rem; }

  /* imagery goes full bleed: an editorial page has no side rails */
  .cstrip { padding-inline: 0; gap: 1px; }
  .cstrip--3, .cstrip--4 { grid-template-columns: 1fr; }
  /* the desktop rule spans the third image across two columns; in a single
     column that invents an empty 0px track */
  .cstrip--3 .cstrip__i:nth-child(3) { grid-column: auto; }
  .cstrip__i { aspect-ratio: 16 / 10; }
  [data-tone='warm'] .cstrip__i { aspect-ratio: 4 / 3; }
  .cplate { padding-block: 1.5rem; }
  .cplate__frame { aspect-ratio: 4 / 5; border-inline: 0; }

  .cs__footin { flex-direction: column; }
  .cs__nextl { grid-template-columns: 1fr; }
  .cs__nextl a { min-height: 62px; align-content: center; }
}

@media (min-width: 600px) and (max-width: 833px) {
  .prin { grid-template-columns: repeat(2, 1fr); }
  .cstrip--3, .cstrip--4 { grid-template-columns: repeat(2, 1fr); }
  .cs__nextl { grid-template-columns: repeat(2, 1fr); }
  .ch__body { max-width: 56ch; }
  .cplate__frame { aspect-ratio: 16 / 10; }
}

/* ============================================================================
   The film overlay is a fullscreen player on a handset
========================================================================== */
@media (max-width: 599px) {
  .film { padding: 0; }
  .film video { width: 100%; max-height: 100svh; border: 0; }
  .film__x {
    top: auto; bottom: 1.2rem; inset-inline: 0; text-align: center;
    justify-content: center; width: 100%;
  }
}

/* ============================================================================
   REDUCED MOTION — the deep surfaces stop moving, they do not stop working
========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
  .menu__nav a, .menu__foot { opacity: 1 !important; transform: none !important; }
  .dg__panel { animation: none; }
}