@import url('/assets/site-base.css');

/* Kendall Boom / Mobile Editorial System · 2026
   Mobile only. The original desktop stylesheet and intro script remain intact. */
@media (max-width:820px){
  :root{--kb-edge:clamp(18px,5vw,30px);--kb-radius:14px;--kb-quiet:#6b6b68}
  html{scroll-padding-top:82px;-webkit-text-size-adjust:100%;scroll-behavior:auto}
  body{min-width:0;overflow-x:clip;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
  .shell{max-width:100%;padding-left:var(--kb-edge);padding-right:var(--kb-edge)}
  .site-header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(16,16,16,.085);-webkit-backdrop-filter:blur(22px) saturate(1.18);backdrop-filter:blur(22px) saturate(1.18)}
  .header-inner{height:74px;min-height:74px;gap:12px;justify-content:space-between}
  .header-inner > *{min-width:0}
  .wordmark-logo,.wordmark{min-width:0;flex:0 1 auto}
  .wordmark-logo img{width:clamp(116px,25vw,148px)!important;max-width:100%;height:auto;object-fit:contain}
  .header-right{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto}
  .lang{display:flex;align-items:center;gap:3px;white-space:nowrap}
  .lang button{min-width:28px;min-height:40px;padding:7px 2px;touch-action:manipulation}
  .header-book{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:40px;padding:10px 11px;font-size:10px;letter-spacing:.035em}
  .menu-button{display:flex!important;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;border-radius:10px;touch-action:manipulation}
  .site-nav{position:absolute;top:calc(100% + 7px);left:12px;right:12px;width:auto;max-width:none;margin:0;padding:9px 14px 14px;border:1px solid #e9e9e6;border-radius:14px;background:#fff;box-shadow:0 22px 60px rgba(0,0,0,.12);max-height:calc(100dvh - 99px);overflow-y:auto;overscroll-behavior:contain}
  .site-nav:not(.is-open){display:none!important}
  .site-nav.is-open{display:flex!important;flex-direction:column;align-items:stretch;gap:0}
  .site-nav a{display:flex;align-items:center;min-height:54px;padding:14px 10px;width:100%;white-space:normal;border-bottom:1px solid #f1f1ef;font:700 12px/1.3 var(--display);letter-spacing:.09em}
  .site-nav a:last-child{border-bottom:0}
  .site-nav a[aria-current="page"]{opacity:.48}
  .site-nav a:after{display:none}
  .site-nav a:focus-visible,.menu-button:focus-visible{outline:2px solid #111;outline-offset:3px}
  main{min-width:0}
  main :is(.shell,.container,.inner,.content-wrap){min-width:0}
  main :is(.hero,.hero-inner,.hero-grid,.page-hero,.intro-grid,.feature-layout,.split-layout,.split-grid){max-width:100%}
  main :is(.hero-grid,.intro-grid,.split-grid,.feature-layout){grid-template-columns:minmax(0,1fr)!important}
  main :is(.hero-inner,.split-layout){flex-direction:column;align-items:stretch}
  main :is(h1,.hero-title,.page-title){font-size:clamp(39px,9.8vw,67px);line-height:1.055;letter-spacing:-.065em;max-width:100%;overflow-wrap:break-word;text-wrap:balance}
  main :is(h2,.section-title){font-size:clamp(26px,6.5vw,43px);line-height:1.13;letter-spacing:-.045em;overflow-wrap:break-word}
  main h3{font-size:clamp(19px,5.3vw,28px);line-height:1.22;letter-spacing:-.025em}
  main p{overflow-wrap:break-word}
  main :is(.lead,.hero-desc,.hero-subtitle,.page-description){font-size:clamp(15px,3.7vw,17px);line-height:1.72;max-width:38rem}
  main :is(.eyebrow,.kicker,.label,.section-label,.overline){letter-spacing:.11em}
  main :is(.record-grid,.records-grid,.remix-grid,.remixes-grid,.music-grid,.music-list,.cards-grid,.card-grid,.shows-grid,.sets-grid,.release-grid,.releases-grid,.portfolio-grid,.video-grid,.stats-grid,.feature-grid,.two-col,.two-column){grid-template-columns:minmax(0,1fr)!important;gap:20px}
  main :is(.record-card,.record-item,.release-card,.music-card,.remix-card,.edit-card,.show-card,.video-card,.set-card,.project-card,.album-card,.track-card){min-width:0;max-width:100%;overflow-wrap:break-word}
  main :is(.record-card,.record-item,.release-card,.music-card,.remix-card,.edit-card,.set-card,.track-card){border-radius:var(--kb-radius)}
  main :is(.remix-card,.edit-card,.track-card,.record-card,.music-card,.set-card) :is(h2,h3){overflow-wrap:anywhere;hyphens:auto}
  main :is(.record-card,.release-card,.music-card,.remix-card,.edit-card,.track-card,.show-card,.set-card) img{max-width:100%;height:auto}
  main iframe{display:block;max-width:100%;border:0}
  main iframe[src*="soundcloud"]{width:100%!important;max-width:100%!important;border-radius:9px}
  main :is(.player,.embed,.embed-wrap,.soundcloud-embed,.soundcloud-frame,.music-embed,.video-embed){max-width:100%;min-width:0}
  main :is(.actions,.button-row,.link-row,.cta-row,.remix-actions,.card-actions,.streaming-links){max-width:100%;flex-wrap:wrap;gap:10px}
  main :is(.btn,.button,.button-primary,.button-secondary,.listen-button,.download-button,.card-button){min-height:44px;touch-action:manipulation}
  main img{max-width:100%}
  main :is(.hero-image,.portrait,.artist-photo,.artist-image){max-width:100%;object-fit:cover}
  main :is(.show-row,.show-item,.event-row){min-width:0}
  .site-footer,footer{max-width:100%}
  .site-footer .shell,footer .shell{padding-top:clamp(28px,7vw,45px);padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:540px){
  :root{--kb-edge:20px;--kb-radius:12px}
  .header-inner{height:68px;min-height:68px;gap:8px}
  .wordmark-logo img{width:128px!important}
  .header-right{gap:6px}
  .header-book{min-height:38px;padding:9px 10px;font-size:10px}
  .site-nav{left:10px;right:10px;top:calc(100% + 5px);padding-inline:12px;border-radius:12px}
  .site-nav a{min-height:56px;font-size:12px;padding-inline:12px}
  main :is(.hero,.page-hero,.hero-section){padding-top:clamp(22px,6vw,36px);padding-bottom:clamp(26px,8vw,46px)}
  main :is(h1,.hero-title,.page-title){font-size:clamp(37px,10.8vw,57px);line-height:1.01;letter-spacing:-.067em}
  main :is(h2,.section-title){font-size:clamp(25px,7.4vw,38px);line-height:1.12}
  main :is(.record-card,.release-card,.music-card,.remix-card,.edit-card,.track-card,.set-card){padding:clamp(18px,5vw,24px)}
  main :is(.record-grid,.records-grid,.remix-grid,.remixes-grid,.music-grid,.cards-grid,.card-grid,.shows-grid,.sets-grid,.release-grid,.releases-grid,.feature-grid){gap:16px}
  main :is(.actions,.button-row,.link-row,.cta-row,.remix-actions,.card-actions,.streaming-links)>a{min-height:44px}
  main :is(.record-card,.music-card,.remix-card,.edit-card,.track-card) :is(h2,h3){font-size:clamp(27px,8vw,38px);line-height:1.04;letter-spacing:-.045em}
  main iframe[src*="soundcloud"]{border-radius:7px}
}
@media(max-width:390px){
  :root{--kb-edge:17px}
  .header-inner{gap:5px}
  .wordmark-logo img{width:113px!important}
  .lang button{min-width:24px;font-size:10px}
  .header-book{display:none}
  .menu-button{width:43px;min-width:43px;flex-basis:43px}
  main :is(h1,.hero-title,.page-title){font-size:clamp(34px,10vw,46px)}
  main :is(.record-card,.release-card,.music-card,.remix-card,.edit-card,.track-card,.set-card){padding:17px}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  .site-header{position:relative}
  .site-nav{max-height:calc(100dvh - 76px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .site-header,.site-nav,.header-book,.wordmark-logo img,.menu-button{transition:none!important}
}