/* Native single-finger previews; browsers may still handle a pinch to zoom. */
#ring,#home,#home canvas,#home .photo-frame{touch-action:pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mobile-social-phone[hidden],.social-feed-controls[hidden]{display:none!important}
.mobile-social-phone,.social-feed-controls{display:none}

@media(max-width:700px){
  #overlay.project-overlay .case-marketing{padding:70px 6vw 18px;gap:14px;grid-template-rows:minmax(250px,1fr) auto}
  #overlay.project-overlay .marketing-stage.has-mobile-feed{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:1;isolation:isolate;min-height:0}
  .mobile-social-phone{display:block;position:relative;flex:none;height:calc(100% - 44px);max-height:550px;aspect-ratio:9/19.5;width:auto;max-width:76vw;box-sizing:border-box;border:3px solid #606268;border-radius:28px;background:#070708;box-shadow:0 0 0 1px #000,12px 18px 36px #0007;overflow:hidden}
  .social-feed-viewport{position:absolute;inset:5px;border-radius:21px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;outline:none}
  .social-feed-viewport:active{cursor:grabbing}
  .social-feed-viewport:focus-visible{outline:2px solid white;outline-offset:-3px}
  .social-feed-track{position:relative;width:100%;height:100%}
  #overlay.project-overlay .marketing-stage.has-mobile-feed .reel{position:absolute;inset:0;display:block;box-sizing:border-box;width:100%;height:100%;max-height:none;aspect-ratio:auto;padding:0;border:0;border-radius:0;box-shadow:none;animation:none;translate:none;will-change:transform;overflow:hidden}
  .has-mobile-feed .reel .reel-screen,.has-mobile-feed .reel video{width:100%;height:100%;border-radius:0;object-fit:cover;pointer-events:none}
  .has-mobile-feed .reel .reel-social-ui,.has-mobile-feed .reel .reel-record{display:none}
  .social-feed-ui{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:21px;pointer-events:none;z-index:2}
  .mobile-social-phone>.reel-record{z-index:3;pointer-events:none}
  .mobile-social-phone.is-playing>.reel-record{animation-play-state:running}
  .social-feed-status{position:absolute;left:12px;right:12px;top:45%;z-index:4;padding:12px;background:#08090bd9;border:1px solid #ffffff25;color:white;text-align:center;font-size:10px;line-height:1.5;pointer-events:none}
  .social-feed-status[hidden]{display:none}
  .social-feed-controls{display:flex;align-items:center;justify-content:center;gap:15px;height:32px;flex:none;color:#e3e3e0}
  .social-feed-controls p{margin:0;text-align:center;font-size:10px;line-height:1.5;letter-spacing:.04em}
  .social-feed-count{display:block;color:#8c9095;font-size:8px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
  .social-feed-controls button{height:44px;width:44px;border:1px solid #ffffff30;background:#0a0b0c;color:#eee;font-size:18px;cursor:pointer;touch-action:manipulation}
  .social-feed-controls button:focus-visible{outline:2px solid white;outline-offset:2px}
  #overlay.project-overlay .case-marketing .case-bottom{z-index:2}
  #overlay.project-overlay .case-marketing:has(.social-process[open]){grid-template-rows:minmax(120px,1fr) auto}
  #overlay.project-overlay .case-marketing h2{font-size:clamp(29px,7.5vw,43px);margin-bottom:12px}
  #overlay.project-overlay .case-marketing .social-intro{font-size:12px;line-height:1.45;margin:0;color:#b8b9bc}
  #overlay.project-overlay .case-marketing .case-eyebrow{font-size:8px;margin-bottom:10px}
  .social-process{margin-top:11px;border-top:1px solid #ffffff22;font-size:11px;line-height:1.5;color:#b8b9bc}
  .social-process summary{display:flex;align-items:center;justify-content:space-between;list-style:none;padding-top:10px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:#e3e3e0}
  .social-process summary::-webkit-details-marker{display:none}
  .social-process summary span{font-size:17px;line-height:1;transition:rotate .2s}
  .social-process[open] summary span{rotate:45deg}
  .social-process .story-continuation{max-height:100px;overflow-y:auto;margin:10px 0 0;overscroll-behavior:contain;touch-action:pan-y}
}
@media(max-width:700px) and (max-height:680px){
  #overlay.project-overlay .case-marketing{padding-top:60px;padding-bottom:10px;gap:10px;grid-template-rows:minmax(210px,1fr) auto}
  #overlay.project-overlay .case-marketing h2{font-size:26px;line-height:.95;margin-bottom:9px}
  #overlay.project-overlay .case-marketing .social-intro{font-size:11px;line-height:1.4}
  #overlay.project-overlay .case-marketing .case-eyebrow{margin-bottom:8px;font-size:7px}
  .social-process{margin-top:7px}.social-process summary{padding-top:7px}
}
@media(prefers-reduced-motion:reduce){.social-feed-controls *,.social-process summary span{transition:none}.mobile-social-phone>.reel-record{animation:none}}