/* v18: tablet + phone. The making-of card becomes a horizontal strip card directly under the film. */
@media (max-width:1000px){
  .world-grid,.world--flip .world-grid{display:flex;flex-direction:column;min-height:0;gap:0}
  .world-media{order:-1}
  .world .world-text,.world--flip .world-text{padding:28px 0 0;justify-self:auto}
  .world-outcome{max-width:none}
  .pip-card{position:static;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:14px 0 0;padding:6px 14px 6px 6px;min-height:68px;border-radius:8px;box-shadow:0 1px 1px rgba(36,36,31,.06),0 6px 14px rgba(36,36,31,.12);-webkit-tap-highlight-color:transparent}
  .pip-frame{width:84px;aspect-ratio:3/2;border-radius:5px}
  .pip-frame img{object-position:50% 37%}
  .pip-play{display:none}
  .pip-cap{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;font-size:15px}
  .pip-label{font-size:15px;line-height:1.2}
  .pip-dur{font-size:13px}
  .pip-go{display:block;width:32px;height:32px;padding:10px 10px 10px 12px;border-radius:50%;background:var(--pip-ink);fill:#FDFBF5}
}
@media (min-width:721px) and (max-width:1000px){
  .world{padding:64px 4.15vw 72px}
  .world-media,.world--flip .world-media{max-width:760px}
  .world .world-text{max-width:620px}
  .world h2{font-size:clamp(2.6rem,6vw,3.6rem)}
}
@media (max-width:720px){
  .pip-card{margin:12px 20px 0;width:calc(100% - 40px)}
  .world .world-text,.world--flip .world-text{padding-top:24px}
  .world-head{margin-bottom:16px}
  .world-outcome{margin-top:16px;font-size:1.3rem}
  .world-why{margin-top:18px}
  .world-actions{margin-top:26px}
  .world .world-play,.world .world-process{flex:1 1 auto}
  .pip-card:active{scale:.985;transition:scale 120ms var(--ease)}
}
@media (max-width:360px){
  .pip-card{margin-left:16px;margin-right:16px;width:calc(100% - 32px);gap:10px}
  .pip-frame{width:72px}
  .pip-label{font-size:14px}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){.pip-card:active{scale:1}}