/* Mobile compaction layer (phones). Loaded after v3/v4. Desktop untouched. */
@media (max-width:720px){
  /* 1. Section rhythm: ~260px of dead space per section down to ~64px */
  .sec{padding-top:64px!important;margin-top:0!important}
  .band,.band-wheat,.band-blush,.band-plum,.alcband,.cta2,.tex{margin-top:56px!important;padding-top:64px!important;padding-bottom:64px!important}
  .dks{margin-top:56px!important;padding-top:64px!important;padding-bottom:40px!important}
  .brk{margin-top:56px!important}
  .patfan>.sec:first-child{padding-top:64px!important}
  .story{min-height:64vh!important;margin-top:56px!important}
  .story .in{padding:64px 24px!important}
  .hero+.press+.story,.press+.story{margin-top:0!important}
  .phero{min-height:52vh}
  /* 2. Type scale */
  .big{font-size:30px!important;line-height:1.05}
  .lede{font-size:15px}
  .eye{margin-bottom:14px}
  h2.big+*{margin-top:28px!important}
  .tgrid,.jgrid,.steps{margin-top:28px!important}
  /* 3. Swipe rows instead of long stacks */
  .tgrid,.jgrid,.steps{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;margin-left:-24px!important;margin-right:-24px!important;padding:0 24px 8px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tgrid::-webkit-scrollbar,.jgrid::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none}
  .jgrid>*{flex:0 0 84%;scroll-snap-align:start;margin-top:0!important}
  .tgrid>*,.steps>li{flex:0 0 80%;scroll-snap-align:start;margin-top:0!important}
  .steps>li{border:1px solid var(--line)!important;padding:28px 22px!important}
  .tgrid>.tg{padding-top:28px!important}
  .tgrid .qmk{height:auto;font-size:64px;line-height:.8}
  .swipehint{display:block;margin-top:10px;font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.5}
  /* collections: stacked, compact cards (no sideways scroll) */
  .pks{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;margin-top:28px!important;overflow:visible!important}
  .pk{transform:none!important}
  .pk .cap1{aspect-ratio:auto!important;height:150px!important}
  .pk .hdp{padding:18px 20px 14px!important;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px}
  .pk .hdp .mkp{width:26px!important;height:26px!important;margin:0!important}
  .pk .hdp h3{margin:0!important;font-size:17px!important}
  .pk .pr{margin:0!important;font-size:28px!important;text-align:right;grid-column:3;grid-row:1}
  .pk .pr small{margin-top:4px!important;font-size:8px!important;letter-spacing:.16em!important;white-space:nowrap}
  .pk ul{padding:14px 20px 16px 20px!important;gap:6px!important}
  .pk li{font-size:13.5px!important;line-height:1.4!important;padding-left:20px!important}
  .pk li:before{top:5px!important}
  .pk .ft2{padding:0 20px 20px!important}
  .pk .flag{font-size:8.5px}
  /* 4. Split sections: smaller media */
  .tale .ph,.jake .ph{aspect-ratio:4/3!important;height:auto!important;max-height:300px}
  .tale,.s8,.jake,.duo{gap:28px!important}
  .band .bph{max-height:280px;overflow:hidden}
  .band .bph img{height:280px;width:100%;object-fit:cover}
  .kwmoon{display:none}
  .dphoto{gap:10px!important}
  /* 5. Footer */
  footer.ft{padding-top:44px!important}
  footer.ft .fam{display:none}
  footer.ft .top{padding-top:24px!important;margin-top:0!important;gap:24px!important}
  footer.ft .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  footer.ft .cols .col:last-child{grid-column:1/-1}
  /* 6. Header must not overflow */
  .hd .row{padding-left:20px!important;padding-right:20px!important;max-width:100vw;box-sizing:border-box}
}
@media (max-width:720px){
  /* Journal index keeps its list; only the home teaser swipes */
  .jgrid{display:grid!important;overflow:visible;margin-left:0!important;margin-right:0!important;padding:0!important;gap:32px!important}
  [data-screen-label="Journal teaser"] .jgrid{display:flex!important;overflow-x:auto;margin-left:-24px!important;margin-right:-24px!important;padding:0 24px 8px!important;gap:14px!important}
  /* Experience timeline: thumbnail beside text */
  .tl{margin-top:28px!important}
  .tl li{display:grid!important;grid-template-columns:92px 1fr!important;column-gap:16px!important;row-gap:6px!important;padding-top:22px!important;padding-bottom:22px!important;align-items:start}
  .tl li>*:first-child:not(.tph){grid-column:1/-1}
  .tl li .tph{width:92px!important;height:92px!important;aspect-ratio:1!important;margin:0!important}
  .tl li h3{margin-top:0!important;font-size:13px}
  .tl li p{font-size:13px;line-height:1.5;margin-top:4px}
  /* A day in frames: shorter panels */
  .acc .P{aspect-ratio:16/9!important}
  .acc{margin-top:28px!important;gap:8px!important}
  /* Pinned polaroids swipe */
  .polas{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;margin:28px -24px 0!important;padding:0 24px 12px!important;scrollbar-width:none;height:auto!important}
  .polas>*{flex:0 0 72%;scroll-snap-align:center;position:relative!important;left:auto!important;top:auto!important;right:auto!important;margin:0!important}
}
@media (max-width:720px){
  /* What arrives: uniform rows, photo left, text right */
  .dphoto{display:flex!important;flex-direction:column;gap:10px!important;margin-top:28px!important}
  .dphoto .d{display:grid!important;grid-template-columns:104px 1fr;align-items:stretch;transform:none!important;margin:0!important;min-height:0}
  .dphoto .d{min-height:136px}
  .dphoto .d .ph{aspect-ratio:auto!important;height:auto!important;min-height:136px;width:104px;margin:0!important}
  .dphoto .d .ph .zoom{height:100%}
  .dphoto .tx{padding:14px 16px!important;display:flex;flex-direction:column;justify-content:center}
  .dphoto .len{margin-bottom:8px!important;padding:3px 8px!important;font-size:8.5px;align-self:flex-start}
  .dphoto h3{font-size:12.5px!important;letter-spacing:.1em!important;margin-bottom:4px!important;line-height:1.3}
  .dphoto p{font-size:13px!important;line-height:1.45!important}
}
@media (max-width:720px){
  /* Remaining large gaps */
  .phero{min-height:0!important}
  .phero .in{padding-top:108px!important;padding-bottom:36px!important}
  .dkpage{padding-top:40px!important;padding-bottom:40px!important}
  .styl+.styl{margin-top:48px!important}
  .styl .sd{margin-top:12px!important;margin-bottom:16px!important}
  .mq{margin-top:40px!important;padding-top:24px!important}
  .sec.dk{padding-bottom:56px!important}
  footer.ft{margin-top:56px!important}
  .art{padding-top:40px!important}
  .related{padding-top:56px!important}
  .ahero .in,.art-hero .in{padding-top:110px!important}
}
@media (max-width:720px){
  /* Full-bleed video/photo bands: shorter */
  .story{min-height:52vh!important}
  .brk{height:52vh!important;min-height:360px!important}
  /* Photos next to copy: shorter */
  .tale .ph,.jake .ph{max-height:240px!important}
  .cside .ph.slot{aspect-ratio:auto!important;height:240px!important}
  .cside .ph.slot img{height:100%!important}
  /* Testimonial bands: quote only */
  .band .bph{display:none!important}
  .band .duo{gap:0!important}
  .quote .mk{width:40px!important;height:40px!important;margin-bottom:18px!important}
  /* Closing CTA: drop the decorative arch video */
  .cta2 .archv{display:none!important}
  .cta2 .in{gap:0!important}
  /* Footer: logo + contact + social only (menu already has the page links) */
  footer.ft .lock i{width:34px!important;height:76px!important}
  footer.ft .cols .col:first-child{display:none}
  footer.ft .cols{grid-template-columns:1fr 1fr!important}
  footer.ft .cols .col:last-child{grid-column:auto!important}
  footer.ft .base{margin-top:24px!important;padding-top:16px!important;gap:6px;flex-wrap:wrap}
  /* Journal index: compact rows */
  .jgrid{gap:0!important}
  .jgrid>a.jc{display:grid!important;grid-template-columns:104px 1fr;column-gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .jgrid>a.jc .ph{grid-row:1/span 4;width:104px!important;height:104px!important;aspect-ratio:1!important;margin:0!important}
  .jgrid>a.jc h3{margin:0!important;font-size:14px!important;line-height:1.3!important}
  .jgrid>a.jc p{display:none}
  .jgrid>a.jc .capl{margin-top:6px!important}
  [data-screen-label="Journal teaser"] .jgrid>a.jc{display:block!important;padding:0;border:0}
  [data-screen-label="Journal teaser"] .jgrid>a.jc .ph{width:auto!important;height:200px!important;aspect-ratio:auto!important}
  [data-screen-label="Journal teaser"] .jgrid>a.jc h3{margin-top:12px!important}
  /* About values: rows like "What arrives" */
  .vgrid{gap:12px!important}
  .vgrid .v{display:grid!important;grid-template-columns:96px 1fr;column-gap:16px;align-items:start;margin:0!important}
  .vgrid .v .ph{grid-row:1/span 3;width:96px!important;max-width:none!important;height:124px!important;aspect-ratio:auto!important;margin:0!important}
  .vgrid .v .num{display:none}
  .vgrid .v h3{margin-top:4px!important;font-size:13px!important}
  .vgrid .v p{font-size:13px!important;line-height:1.45!important;margin-top:4px!important}
}