/* ---------- PHONE / TABLET (from the 390 artboard) ----------
   ponytail: art blocks keep their desktop px geometry and get zoomed to fit (data-w, set in app.js) */
@media (max-width:699px),(orientation:portrait) and (max-width:1099px){
  .wrap{width:auto;max-width:720px;margin-inline:auto;zoom:1}
  .screen{min-height:0;display:block}
  [data-w]{zoom:var(--fz,1)}

  .nav-in{padding:12px 16px}
  .mark{width:150px;height:30px}
  .mark span{font-size:30px;line-height:30px}
  .links{display:none}
  .status{font:700 11px/14px var(--mono);gap:6px}
  .status i{width:8px;height:8px}
  .status .long{display:none}
  .nav-right{display:flex;align-items:center;gap:14px}
  .menu{display:block;position:relative;width:28px;height:18px;border:0;background:none;padding:0;cursor:pointer}
  .menu i{position:absolute;left:0;width:28px;height:3px;mix-blend-mode:multiply;transition:transform .45s var(--spring),top .45s var(--spring)}
  .menu i:first-child{top:3px;background:var(--red)}
  .menu i:last-child{top:12px;left:2px;background:var(--blue)}
  .open .menu i:first-child{top:8px;transform:rotate(45deg)}
  .open .menu i:last-child{top:8px;transform:rotate(-45deg)}
  .drawer[hidden]{display:none}
  .drawer{display:flex;flex-direction:column;gap:6px;padding:8px 16px 24px;border-top:1.5px solid var(--ink)}
  .drawer a{font:56px/56px var(--display);animation:slL .6s var(--spring) both}
  .drawer a:nth-child(even){color:var(--blue);animation-name:slR}
  .drawer a:nth-child(odd){color:var(--red)}

  .hero{height:auto;display:flex;flex-direction:column;gap:20px;padding:24px 16px 40px}
  .hero .h-art,.hero .h-head,.hero .h-copy{position:relative;left:auto;right:auto;top:auto}
  .h-art{order:0;align-self:flex-end;margin-right:-16px}
  .h-head{order:1;margin-top:-4px}
  .h-copy{order:2;width:100%;gap:16px}
  .lede{font-size:30px;line-height:32px}
  .body{font-size:14px;line-height:21px}
  .ctas{flex-direction:column;align-items:stretch;gap:20px}
  .btn{justify-content:center}
  .ul{align-self:flex-start}

  .ticker{height:52px}
  .track span{font-size:30px;line-height:30px}

  .friday .wrap{padding:64px 16px 56px;gap:28px;max-width:none}
  .s-head{flex-direction:column;align-items:stretch;gap:16px}
  .h2{font-size:72px;line-height:70px}
  .acc{font-size:28px;line-height:32px}
  .s-note{width:auto;font-size:14px;line-height:22px}
  .posters{justify-content:flex-start;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:24px 45px 32px;scrollbar-width:none}
  .posters::-webkit-scrollbar{display:none}
  .poster{scroll-snap-align:center;padding-top:0!important}
  .dots{display:flex;align-items:center;gap:8px}
  .dots i{width:8px;height:4px;background:var(--ink);opacity:.25;transition:width .4s var(--spring),opacity .3s,background .3s}
  .dots i.on{width:22px;opacity:1;background:var(--red)}
  .dots span{padding-left:8px;font:12px/16px var(--mono);letter-spacing:.12em}

  .res .wrap{flex-direction:column;gap:32px;padding:0 16px 64px}
  .r-art{align-self:center}
  .r-copy{width:auto;gap:22px}
  .quote{font-size:30px;line-height:35px}
  .r-copy .body{font-size:14px;line-height:23px}
  .stats{gap:16px;flex-wrap:wrap}
  .stat b{font-size:32px;line-height:32px}
  .stat span{font-size:11px}

  .print .wrap{height:auto;display:flex;flex-direction:column;align-items:center;gap:28px;padding:24px 16px 32px}
  .corners{display:flex;justify-content:space-between;width:100%}
  .corner{position:static;font-size:44px;line-height:44px}
  .beasts{position:relative;left:auto;right:auto;top:auto}
  .p-menu{position:static;width:100%;gap:28px}
  .p-intro{width:auto;font-size:14px;line-height:22px}
  .items{flex-direction:column;align-items:center;gap:20px}
  .item{width:auto}
  .item b{font-size:48px;line-height:48px}
  .item span{font-size:13px}

  .visit .wrap{flex-direction:column;align-items:stretch;gap:32px;padding:64px 16px}
  .v-art{align-self:center}
  .v-copy{width:auto;gap:28px}
  .v-copy h2{font-size:64px;line-height:60px}
  .drow{flex-direction:column;gap:4px;padding-block:12px}
  .drow b{width:auto;font-size:11px;line-height:14px;color:var(--red)}
  .drow span{font-size:15px;line-height:22px}
  .mail p{font-size:28px;line-height:32px}
  .mail form{flex-direction:column;gap:12px}
  .mail .btn{justify-content:center;padding-block:16px;margin-right:6px}

  .foot-wrap .wrap{padding:24px 16px 32px;gap:20px}
  .foot{flex-direction:column;align-items:flex-start;gap:12px}
  .foot nav{gap:20px;flex-wrap:wrap}
}