/* KRAYONZ V27.10.1 — site-wide visual polish + framing utilities
   This layer fixes composition/overflow without redesigning finished rooms. */

/* Reusable media roles. Apply intentionally — never force all images to cover. */
.kr-media{position:relative;overflow:hidden;min-width:0}
.kr-media>img,.kr-media>video,
img.kr-media,video.kr-media{display:block;width:100%;max-width:100%}
.kr-media--cover>img,.kr-media--cover>video,
img.kr-media--cover,video.kr-media--cover{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--focus-x,50%) var(--focus-y,50%);
}
.kr-media--contain>img,.kr-media--contain>video,
img.kr-media--contain,video.kr-media--contain{
  width:100%;height:100%;object-fit:contain;object-position:center;
}
.kr-frame--hero{aspect-ratio:16/9}
.kr-frame--portrait{aspect-ratio:4/5}
.kr-frame--square{aspect-ratio:1/1}
.kr-frame--art{height:auto;aspect-ratio:auto}

/* Shared polish: predictable sizing and accessible interactive chrome. */
:is(.hud,.studio-nav) :is(a[href],button){min-height:40px;display:inline-flex;align-items:center}
:is(.hud,.studio-nav) nav{min-width:0}
img,video{max-width:100%}

/* The old ticker used an intentional rotated overscan that created page-level overflow. */
.artist-page .signal-marquee,
body:has(.signal-marquee) .signal-marquee{max-width:100%;width:100%;transform:none;contain:inline-size}
body:has(.signal-marquee){overflow-x:clip}

/* Battle Arena: preserve the Canvas City art's native 4:3 composition instead of stretching it. */
.arena276-city{align-items:center}
.arena276-city>img{
  width:100%;height:auto!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;
  aspect-ratio:auto!important;
}

/* Comic story cards are grid children: force min-width to zero so text cannot expand the grid. */
.comic-pages{min-width:0;max-width:100%}
.comic-story-caption,
.comic-panel{min-width:0;max-width:100%;width:100%}
.comic-story-caption>*{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* Evolution: a large unbreakable title used to establish a wider grid track on small phones. */
.evo-hero,.evo-hero-copy{min-width:0;max-width:100%}
.evo-hero-copy h1{max-width:100%}

/* Supply: keep the hero copy inside the grid track and preserve the full headline. */
.ps-hero-grid,.ps-hero-grid>*{min-width:0;max-width:100%}
.ps-hero h1{max-width:100%;overflow-wrap:normal}

/* FLOW top navigation remains complete but becomes an intentional horizontal rail on phones. */
.flow-world .studio-nav{min-width:0}
.flow-world .studio-nav nav{min-width:0;max-width:100%;flex-wrap:nowrap}

/* Art + Murals has legacy decorative transforms; prevent sub-pixel page overscan without clipping content. */
body[data-kz-room="hq"] main{min-width:0}

/* Focus-in transition: restrained and disabled for reduced motion. */
@keyframes kr-room-focus{from{opacity:.86;filter:blur(2px)}to{opacity:1;filter:none}}
:is(.kz-world-hero,.inner-hero,.arena276-hero,.wear-hero,.flow-party-hero,.ps-hero){animation:kr-room-focus .32s ease-out both}

@media(max-width:700px){
  .kr-media--cover>img,.kr-media--cover>video,
  img.kr-media--cover,video.kr-media--cover{
    object-position:var(--focus-x-mobile,var(--focus-x,50%)) var(--focus-y-mobile,var(--focus-y,50%));
  }

  .flow-world .studio-nav{gap:10px;overflow:hidden}
  .flow-world .studio-nav>a{flex:0 0 auto}
  .flow-world .studio-nav nav{
    flex:1 1 auto;overflow-x:auto;overscroll-behavior-inline:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .flow-world .studio-nav nav::-webkit-scrollbar{display:none}
  .flow-world .studio-nav nav>*{flex:0 0 auto;white-space:nowrap}

  .evo-hero-copy h1{font-size:clamp(3.35rem,16vw,4.15rem)!important;letter-spacing:-.055em}

  .ps-hero h1{font-size:clamp(2.85rem,15vw,4.15rem)!important;line-height:.88}
  .ps-hero-grid{width:min(100% - 32px,1180px)!important}

  .comic-story-caption{padding-inline:20px!important}
  .comic-story-caption h2{font-size:clamp(2.15rem,13vw,3.7rem)}
  .comic-story-copy{overflow-wrap:anywhere}
}

@media(prefers-reduced-motion:reduce){
  :is(.kz-world-hero,.inner-hero,.arena276-hero,.wear-hero,.flow-party-hero,.ps-hero){animation:none}
}

/* Hidden global drawer must not contribute off-canvas width while closed. */
.kz-v25-nav:not(.open){overflow:hidden;pointer-events:none}
.kz-v25-nav.open{overflow:hidden}

/* Comfortable touch targets on high-frequency interactive rails. */
.arena276-tabs a,
.canvas276-tabs a,
.episode-order-nav a,
.flow-cast-rail button,
.ps-btn.small,
.tl-btn,
.inner-back{min-height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}

@media(max-width:700px){
  .evo-era-nav a{min-height:40px;display:inline-flex;align-items:center;padding-block:8px}
  .arena276-tabs a,.canvas276-tabs a{padding-block:11px}
}

/* Decorative slash transition stays inside the viewport even when its strokes overscan by design. */
.slash-transition{overflow:hidden;max-width:100vw}

@media(max-width:700px){
  .inner-title,.inner-title>div{min-width:0;max-width:100%}
  .inner-title h2{max-width:100%;font-size:clamp(3rem,15vw,4.25rem);overflow-wrap:anywhere}
}

/* Final touch-target pass: keep compact visual language while meeting comfortable interaction sizes. */
.kz-v25-menu-btn{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
.kz-v25-close{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
.kz-synth-close{width:40px;height:40px;display:grid;place-items:center}
.kz-v25-menu-group a,.kz-v25-menu-actions a{min-height:42px;display:flex;align-items:center}
.site-header .brand,.site-header nav a,.canvas276-header>a,.canvas276-header nav a{min-height:40px;display:inline-flex;align-items:center}
.world278-actions .secondary{min-height:42px}
.comic-reader-controls button{width:42px;height:42px;min-width:42px;min-height:42px}
.comic-story-caption .quiet-link,.chapter-index .ig-source{min-height:40px;display:inline-flex;align-items:center}
.motion-grid button{min-width:52px;min-height:42px}
.transform-copy a{min-height:42px;display:inline-flex;align-items:center}
[data-kz-transition-skip]{min-height:42px;min-width:52px}
.studio-footer a{min-height:40px;display:inline-flex;align-items:center}