/* Short landscape viewports use the compact one-card story from social-story.js.
 * Load after motion.css and social-journey.css. The room/background layers and
 * reduced-motion document flow are deliberately outside this layout override. */
@media (max-height:560px) and (min-width:701px) and (prefers-reduced-motion:no-preference) {
  .journey-enhanced .social-head {
    top:18px;
    left:var(--pad);
    right:auto;
    width:calc(50% - var(--pad) - 18px);
  }

  .journey-enhanced .social-head .eyebrow {
    font-size:10px;
    letter-spacing:.09em;
    line-height:1.4;
  }

  .journey-enhanced .social-stage .social-head h2 {
    max-width:none;
    font-size:clamp(24px,3.15vw,34px);
    line-height:1.1;
    letter-spacing:-.045em;
    margin:10px 0 0;
  }

  /* A real left-column box is measured by measureArtwork(), so the full frame
   * and its notebook anchor retain their proportions and travel coordinates. */
  .journey-enhanced .social-stage .character,
  .journey-enhanced .social-stage[data-media-layout="landscape"] .character {
    left:0;
    right:auto;
    top:clamp(94px,26dvh,130px);
    bottom:72px;
    width:52%;
    height:auto;
    transform:none;
  }
  .journey-enhanced .social-stage[data-media-layout="landscape"] .character :is(img,canvas,video) {
    mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  }

  /* Every card shares this destination; JS supplies the reversible arrival
   * and replacement transforms. Never add a CSS translate to this same slot. */
  .journey-enhanced .social-scene .glass {
    left:54%;
    right:var(--pad);
    top:clamp(26px,13dvh,66px);
    bottom:auto;
    width:auto;
    max-width:none;
    max-height:calc(87dvh - 84px);
    overflow:auto;
    scrollbar-width:thin;
    padding:15px 18px;
    border-radius:16px;
  }

  .journey-enhanced .social-scene .glass-top { gap:9px; }
  .journey-enhanced .social-scene .glass-top h3 {
    font-size:16px;
    line-height:1.15;
    letter-spacing:-.02em;
  }
  .journey-enhanced .social-scene .platform-logo { width:28px; height:28px; }
  .journey-enhanced .social-scene .brand-card-mark { width:28px; font-size:30px; }
  .journey-enhanced .social-scene .glass-line { margin:9px 0; }
  .journey-enhanced .social-scene .glass-kicker {
    font-size:9px;
    line-height:1.4;
    letter-spacing:.065em;
  }
  .journey-enhanced .social-scene .glass p {
    font-size:22px;
    line-height:1.14;
    margin:10px 0 12px;
  }
  .journey-enhanced .social-scene .glass-bottom { padding-top:10px; }
  .journey-enhanced .social-scene .glass-bottom > span:first-child {
    font-size:10px;
    line-height:1.35;
  }

  /* Keep channel navigation in its own full-width band, below artwork/cards. */
  .journey-enhanced .social-footer {
    left:var(--pad);
    right:var(--pad);
    bottom:14px;
    flex-direction:row;
    align-items:center;
    gap:0;
  }
  .journey-enhanced .channel-buttons { width:100%; }
  .journey-enhanced .channel-buttons button {
    min-height:44px;
    font-size:11px;
    padding:10px 13px;
  }
  .journey-enhanced .scene-caption,
  .journey-enhanced .motion-note { display:none; }
}