/* Continuous LP; main.js settles the character sequence at each portrait. */
:root{--ink:#160f19;--paper:#f6ead6;--yellow:#f0ca80;--gold:#f0ca80}
.release-art{display:block;width:100%;aspect-ratio:1;background-repeat:no-repeat;border-radius:7px;box-shadow:0 12px 24px #0005}
.album-grid>a[hidden]{display:none!important}
.music-cast-interlude{position:relative;height:180px;margin-top:-50px;overflow:hidden;pointer-events:none;isolation:isolate}
.music-cast-interlude::after{content:'';position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(transparent,#160f19);z-index:2}
.interlude-cast{position:absolute;top:25px;width:230px;height:290px;transform:translateY(180px) rotate(-12deg);transition:transform .85s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 8px 20px #0006)}
.interlude-cast img{width:100%;height:100%;object-fit:contain;object-position:top}
.interlude-crazy{left:16%}.interlude-panda{right:16%;transform:translateY(180px) rotate(12deg);transition-delay:.14s}
.is-visible .interlude-crazy{transform:translateY(0) rotate(-12deg)}.is-visible .interlude-panda{transform:translateY(20px) rotate(12deg)}
@media(max-width:550px){.music-cast-interlude{height:135px;margin-top:-25px}.interlude-cast{width:160px;height:220px;top:12px}.interlude-crazy{left:3%}.interlude-panda{right:3%}}
@media(prefers-reduced-motion:reduce){.interlude-cast{transition:none!important;transform:translateY(0)!important}}
.character-portrait .duo-portraits{position:relative;display:block;width:115%;height:115%;flex-shrink:0}
.character-portrait .duo-portraits img{position:absolute;object-fit:contain;width:70%;height:88%;max-width:none;max-height:none;inset:0 auto auto -2%}
.character-portrait .duo-portraits img+img{inset:auto -2% 0 auto}
.character-tabs .duo-portraits{position:relative;display:block;width:48px;height:54px}
.character-tabs .duo-portraits img{position:absolute;left:0;top:0;width:32px;height:45px;object-fit:contain}
.character-tabs .duo-portraits img+img{left:auto;right:0;top:9px}
.is-pinned .character-slide[data-name="ブレーメン"] .character-portrait img{width:116%;height:116%;max-width:none;max-height:none}
.character-copy{min-width:0}.character-copy .character-description{overflow-wrap:anywhere}
@media(min-width:801px) and (max-width:1100px){.is-pinned .character-slide{padding-left:6vw;padding-right:6vw;gap:4vw}.character-copy .character-description{font-size:12px;line-height:1.8}}
@media(max-width:550px){.is-pinned .character-slide{grid-template-rows:minmax(100px,1fr) auto!important;padding:145px 27px 128px!important;gap:12px!important}.character-portrait .duo-portraits{width:100%;height:108%;max-width:310px}.is-pinned .character-slide[data-name="ブレーメン"] .character-portrait img{height:110%;width:110%}.character-copy .character-description{font-size:12px;line-height:1.7;margin-top:10px}.character-copy .cast-category{margin-bottom:6px}.character-copy .character-jp{margin-top:6px}.is-pinned .character-copy h3{font-size:clamp(29px,8vw,42px)!important}.character-copy h3 br{display:none!important}}
@media(max-height:650px) and (max-width:550px){.is-pinned .character-slide{padding-top:125px!important;padding-bottom:112px!important;grid-template-rows:minmax(80px,1fr) auto!important}.character-copy .character-description{font-size:11px;line-height:1.5}.is-pinned .character-copy h3{font-size:27px!important}}
.section-head>*,.radio-layout>*,.music-grid>*,.album-grid>*{min-width:0}.album-grid h3{overflow-wrap:anywhere}
html,html:has(.characters){scroll-snap-type:none!important;background:var(--ink)}
body{background:var(--ink)}
main{background:radial-gradient(ellipse at 0 62%,#52213c55,transparent 35%),radial-gradient(ellipse at 100% 85%,#723a1e55,transparent 30%),#160f19}
.panel,.character-stop{scroll-snap-align:none!important;scroll-snap-stop:normal!important}
.site-header{background:linear-gradient(#160f19ee,#160f19c9);border:0;backdrop-filter:blur(12px)}
.at-hero .site-header{backdrop-filter:none}.global-nav a{color:#f6ead6}
.circus-backdrop img{filter:brightness(.9) saturate(1.05)}
.circus-hero{background:#160f19}.circus-hero::after{content:'';position:absolute;inset:auto 0 0;height:21%;background:linear-gradient(transparent,#160f19);z-index:8;pointer-events:none}
.circus-front-shade{background:linear-gradient(0deg,#160f19,transparent)}
.circus-footer{bottom:35px}.circus-enter{background:#20101ac9}.circus-title{display:none}
main>.characters{background:#160f19;color:var(--paper)}
.character-stage{background:#160f19!important}
.character-worlds{position:absolute;inset:0;pointer-events:none;z-index:-2;overflow:hidden}
.character-world{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:brightness(.7) saturate(.9)}
.character-world.active{opacity:1}
.character-worlds::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#160f19 0%,#160f1950 21%,transparent 38%,#160f1966 72%,#160f19 100%),linear-gradient(90deg,#160f191a 20%,#160f1933 45%,#160f19bd 100%)}
.character-slide,.is-pinned .character-slide{background:transparent;color:var(--paper)}
.character-heading{color:#f5deab}.character-heading h2 span{color:#eab86e}.skip-characters{border-color:#f0ca8055;background:#160f1955}
.character-giant-number{color:#f3d3910b}.character-orbit{display:none}
.character-portrait img{filter:drop-shadow(0 24px 22px #0008) drop-shadow(0 -2px 2px #f0ca8033);transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg));transition:transform .25s ease-out}
.character-portrait:hover img{transform:translateX(var(--cast-drift,0px)) translateY(-6px)}
.portrait-54q .character-portrait img{object-fit:contain;max-height:100%;mask-image:linear-gradient(#000 82%,transparent)}
.character-copy{text-shadow:0 2px 18px #000}.character-copy h3{color:#ffe4b6}.character-description{color:#e8ddda}.cast-category{color:#f0ca80}
.character-tabs button{border-color:#f0ca8022;background:#160f1999}.character-tabs button:hover{background:#70412b99}.character-tabs [aria-pressed=true]{background:#9e6b3b70;border-color:#f0ca80;box-shadow:0 0 22px #eec37622}
.character-controls>button{background:#1e1226bb;border-color:#f0ca8066;color:#f0ca80}.character-controls>button:hover{background:#764b36}
.character-bottom,.character-bottom>span:last-child{color:#d6c6b7}.character-progress span{background:linear-gradient(90deg,#a35246,#f0ca80)}
.cast-peek{position:absolute;z-index:5;top:42%;width:clamp(70px,10vw,155px);height:210px;border:0;background:none;padding:0;overflow:visible;transition:opacity .3s,transform .65s var(--ease);filter:drop-shadow(0 8px 8px #0006)}
.cast-peek[hidden]{display:none}.cast-peek img{height:100%;width:100%;object-fit:contain;pointer-events:none;transition:transform .6s var(--ease)}
.cast-peek span{position:absolute;bottom:0;font-size:20px;color:#f0ca80;background:#221524cc;border:1px solid #f0ca8055;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}
.peek-left{left:-5%;transform:rotate(16deg)}.peek-right{right:-5%;transform:rotate(-16deg)}
.peek-left span{right:5px}.peek-right span{left:5px}.peek-left:hover img,.peek-left:focus-visible img{transform:translateX(18%) rotate(7deg)}.peek-right:hover img,.peek-right:focus-visible img{transform:translateX(-18%) rotate(-7deg)}
.cast-peek.peeking img{animation:peek-in .7s var(--ease)}
@keyframes peek-in{from{opacity:0;transform:translateX(var(--peek-start,50%))}to{opacity:1;transform:none}}
.peek-left{--peek-start:-50%}
.music-section,.discography-section,.radio-section{background:transparent;color:var(--paper);min-height:0;padding-top:130px;padding-bottom:130px}
.section-top{border:0}.section-head .eyebrow{color:#ccad82}.section-head h2{color:#f8e5bf}.section-head h2 span,.music-section h2 span,.discography-section .section-head h2 span{color:#efba78}
.music-section{position:relative}.music-section::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 55%,#6a233e2e,transparent 70%)}
.music-card img{border-radius:16px;border:1px solid #f0ca8026;box-shadow:0 18px 35px #0004}.music-card h3{border-bottom-color:#e1bd7926}.music-footnote{margin-top:40px;color:#bba591}
.record-filters{display:flex;gap:10px;margin:42px 0 50px;flex-wrap:wrap}.record-filters button{min-height:44px;padding:12px 26px;border:1px solid #dabd7e55;border-radius:40px;background:#201824;color:#e6d4bc;font-size:11px;font-weight:700;letter-spacing:.12em;transition:background .2s,color .2s}
.record-filters button[aria-pressed=true]{background:#f0ca80;color:#271626;border-color:#f0ca80;box-shadow:0 0 30px #f0ca801a}
.record-group[hidden]{display:none}.record-group+.record-group{margin-top:60px}.record-group-heading{display:flex;align-items:center;gap:22px}.record-group-heading h3{font-size:16px;letter-spacing:.16em;color:#f0ca80}.record-group-heading::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#f0ca8040,transparent)}.record-group-heading span{font-size:9px;letter-spacing:.1em;color:#bc9d86}
.album-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:28px 0 0;gap:28px}.album-grid>a{padding:12px 12px 20px;border-radius:15px;background:linear-gradient(145deg,#ffffff09,#ffffff02);border:1px solid #f0ca801c;transition:background .3s,transform .3s}
.album-grid img,.album-grid a:nth-child(n) img{transform:none;border-radius:7px;box-shadow:0 12px 24px #0005}.album-grid a:hover{transform:translateY(-5px);background:#f0ca8010}.album-grid a:hover img{transform:none;box-shadow:0 12px 24px #0005}.album-grid p{color:#d1aa76}.album-grid h3{color:#f4e2cc}.single-grid img{object-fit:contain;background:#0d0a10}
.record-more{display:block;margin:25px auto 0;border:1px solid #f0ca8055;background:transparent;color:#f0ca80;border-radius:30px;padding:12px 30px;min-height:44px}.record-more[hidden]{display:none}
.radio-section{background:radial-gradient(ellipse at 80% 50%,#752a2159,transparent 65%);padding-bottom:30px}.radio-label{color:#f0ca80}.radio-label i,.onair-dot{background:#ff5d42;box-shadow:0 0 12px #ff5d42}
.radio-layout{grid-template-columns:.82fr 1.18fr;gap:5vw;margin:45px 0 110px}.radio-copy h2{font-size:clamp(64px,6.7vw,108px);color:#f3d599}.radio-copy h2 span{color:#e88062}.radio-copy h3{color:#fff0d8}.radio-play{background:#f0ca80;color:#281523;border-color:#f0ca80;box-shadow:0 0 28px #efab4220}.radio-play:hover{background:#ffe7b0}.radio-copy>p{color:#dcc8bc}
.radio-studio{position:relative;padding:14px 0 70px;isolation:isolate}.radio-studio::before{content:'';position:absolute;inset:-5% -6%;background:radial-gradient(ellipse,#ee6d252b,transparent 68%);z-index:-1}.studio-marquee{display:flex;align-items:center;gap:10px;width:max-content;margin:0 auto -14px;position:relative;z-index:3;padding:12px 25px;background:#351b20;border:1px solid #e7b978;border-radius:9px;box-shadow:0 0 30px #ff963b33;font-size:15px;letter-spacing:.18em;font-weight:800;color:#ffc37b}.onair-dot{width:7px;height:7px;border-radius:50%}
.studio-main{padding:9px;background:#261923;border:1px solid #bd8849;border-radius:18px;box-shadow:0 24px 65px #0006}.studio-main>img{width:100%;border-radius:11px;aspect-ratio:1.5;object-fit:cover}.studio-main figcaption{padding:15px 12px 9px;display:flex;justify-content:space-between;color:#f0ca80;font-size:12px;font-weight:700;letter-spacing:.08em}.studio-main figcaption span{font-size:8px;align-self:center}
.studio-postcard{position:absolute;width:39%;right:-4%;bottom:-15px;padding:7px 7px 0;background:#f4e4c8;transform:rotate(7deg);box-shadow:0 12px 25px #0006;border-radius:3px}.studio-postcard img{width:100%;aspect-ratio:1.5;object-fit:cover}.studio-postcard figcaption{padding:10px 2px;font-size:8px;color:#39231f;letter-spacing:.09em;font-weight:700}
.equalizer{display:flex;gap:3px;height:17px;align-items:center;margin-left:12px}.equalizer i{width:3px;height:14px;background:#f0ca80;animation:eq 1s ease-in-out infinite alternate}.equalizer i:nth-child(2){animation-delay:-.3s}.equalizer i:nth-child(3){animation-delay:-.8s}.equalizer i:nth-child(4){animation-delay:-.5s}.equalizer i:nth-child(5){animation-delay:-.2s}@keyframes eq{to{transform:scaleY(.25)}}
.lab-footer{border-top-color:#f0ca8029}.lab-footer small{color:#bca99a}.lab-footer a:hover{color:#f0ca80}
@media(max-width:800px){.music-section,.discography-section,.radio-section{padding-top:85px;padding-bottom:80px}.radio-section{padding-bottom:26px}.radio-layout{grid-template-columns:1fr;gap:38px;margin-bottom:100px}.radio-studio{width:100%;max-width:620px;justify-self:center}.studio-postcard{right:0;bottom:-12px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.album-grid>a{padding:8px 8px 15px}.record-filters{margin:30px 0 35px}.record-filters button{padding:12px 22px}.record-group+.record-group{margin-top:42px}.record-group-heading h3{font-size:13px}.record-group-heading span{font-size:8px}.music-grid{gap:30px}.character-worlds::after{background:linear-gradient(180deg,#160f19,#160f1930 28%,#160f1940 50%,#160f19eb 82%,#160f19)}.character-world{object-position:35% center}.character-copy h3{color:#ffe4b6}.character-copy{text-shadow:0 2px 12px #000}.cast-peek{top:32%;width:85px;height:140px}.peek-left{left:-43px}.peek-right{right:-43px}.cast-peek span{width:26px;height:26px;font-size:15px}.character-bottom>span:last-child{display:none}.character-portrait img{max-width:94%}.circus-footer{bottom:20px}.studio-main figcaption{font-size:10px}.radio-copy h2{font-size:clamp(65px,15vw,100px)}}
@media(max-height:520px) and (min-width:551px){.cast-peek{top:37%;height:120px;width:85px}.peek-left{left:-35px}.peek-right{right:-35px}.character-description{max-width:100%}.character-copy .text-link{min-height:26px}}
@media(prefers-reduced-motion:reduce){.character-world{transition:none}.character-portrait img,.cast-peek,.cast-peek img{transform:none!important;animation:none!important}.equalizer i{animation:none}.cast-peek{opacity:.8}}

/* Digital noise typography */
.character-heading h2,.character-copy h3,.section-head h2,.radio-copy h2{
  position:relative;isolation:isolate;letter-spacing:-.035em;
  text-shadow:1px 0 #d959b6aa,-1px 0 #3dcdffaa,0 0 14px #cfb07a38;
  animation:noise-type 8s steps(1,end) infinite;
}
@keyframes noise-type{
  0%,91%,95%,100%{text-shadow:1px 0 #d959b655,-1px 0 #3dcdff66,0 0 14px #cfb07a38;transform:translateX(0)}
  92%{text-shadow:-3px 0 #ff317e,3px 0 #04d9ff;transform:translateX(1px)}
  93%{text-shadow:2px 0 #ff317e,-2px 0 #04d9ff;transform:translateX(-1px)}
  94%{text-shadow:1px 0 #d959b655,-1px 0 #3dcdff66;transform:translateX(0)}
}
.radio-episodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.radio-episode{min-width:0;display:block;text-align:left;border:1px solid #f0ca804d;border-radius:12px;background:#241827;color:#f0ca80;padding:8px;cursor:pointer;transition:transform .2s,border-color .2s}
.radio-episode:hover,.radio-episode:focus-visible{transform:translateY(-3px);border-color:#f0ca80}
.radio-episode-art{position:relative;display:block;overflow:hidden;border-radius:7px;aspect-ratio:16/9;background:#130e17}
.radio-episode-art img{display:block;width:100%;height:100%;object-fit:cover}
.radio-episode-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f0ca80dd;color:#1c101c;font-size:17px}
.radio-episode-title{display:flex;justify-content:space-between;gap:5px;font-size:10px;font-weight:800;letter-spacing:.06em;margin:9px 2px 3px}
.lab-footer .social-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #f0ca8060;border-radius:50%;color:#f0ca80}
.lab-footer .social-icon svg{width:19px;height:19px}
.lab-footer .social-icon:hover{background:#f0ca8022}
@media(max-width:550px){.radio-episodes{gap:9px}.radio-episode{padding:6px}.radio-episode-title{font-size:9px}.radio-episode-play{width:34px;height:34px}.lab-footer .social-icon{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.character-heading h2,.character-copy h3,.section-head h2,.radio-copy h2{animation:none!important}}

/* Footer social icons — explicit visibility across JIN:R and mobile */
.lab-footer > div:has(> a.social-icon){display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.lab-footer a.social-icon{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid rgba(240,202,128,.45);border-radius:50%;color:#f0ca80;text-decoration:none;line-height:1}
.lab-footer a.social-icon svg{display:block!important;flex:none;width:20px;height:20px;fill:currentColor}
.lab-footer a.social-icon[aria-label="Instagram"] svg{fill:none;stroke:currentColor}
.lab-footer a.social-icon:focus-visible{outline:2px solid #f0ca80;outline-offset:4px}
@media(max-width:550px){.lab-footer a.social-icon{flex-basis:40px;width:40px;height:40px}}

/* 904 CAST — consistent single-line character names on desktop and mobile */
.character-copy h3,
.is-pinned .character-copy h3,
.is-pinned .character-slide .character-copy h3 {
  font-size:clamp(34px, 4.65vw, 72px);
  line-height:1.06;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  max-width:100%;
}
.character-copy h3 br{display:none!important}
@media (min-width:801px) and (max-width:1100px){
  .character-copy h3,
  .is-pinned .character-copy h3,
  .is-pinned .character-slide .character-copy h3 {font-size:clamp(34px, 4.2vw, 48px)}
}
@media (max-width:800px){
  .character-copy h3,
  .is-pinned .character-copy h3,
  .is-pinned .character-slide .character-copy h3 {font-size:clamp(23px, 6.6vw, 40px);letter-spacing:-.045em}
}
@media (max-width:380px){
  .character-copy h3,
  .is-pinned .character-copy h3,
  .is-pinned .character-slide .character-copy h3 {font-size:clamp(22px, 6.4vw, 25px)}
}

/* 904 LAB — TYPE DESIGN v4 | industrial digital / glitch typography */
/* Keep existing animation; change the actual letterforms and static graphic treatment. */
.character-heading h2,
.character-copy h3,
.section-head h2,
.radio-copy h2 {
  font-family: Impact, 'Arial Narrow', 'Helvetica Neue Condensed Black', 'Arial Black', sans-serif !important;
  font-weight:900 !important;
  font-stretch:condensed;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:-.035em;
  -webkit-text-stroke:.65px currentColor;
  paint-order:stroke fill;
  text-shadow: 2px 1px 0 rgba(255,44,123,.75), -2px -1px 0 rgba(21,216,255,.75), 4px 5px 0 rgba(11,7,18,.45);
}
/* High contrast, angular highlights and broadcast-style annotation. */
.character-heading h2,
.section-head h2,
.radio-copy h2 {letter-spacing:-.045em;line-height:.93}
.character-heading h2::after,
.section-head h2::after,
.radio-copy h2::after {
  content:'';display:block;width:36%;max-width:140px;height:5px;
  margin-top:11px;transform:skewX(-35deg);
  background:repeating-linear-gradient(90deg,#ee4391 0 16px,transparent 16px 19px,#23dcf2 19px 31px,transparent 31px 34px);
  box-shadow:2px 2px 0 rgba(0,0,0,.25);
}
/* Preserve single-line character names and consistent sizing across all characters. */
.character-copy h3,
.is-pinned .character-copy h3,
.is-pinned .character-slide .character-copy h3 {
  white-space:nowrap;word-break:normal;overflow-wrap:normal;
  font-size:clamp(34px,4.65vw,72px);
  letter-spacing:-.015em;
  line-height:1.08;
}
.character-copy h3 br{display:none!important}
@media (min-width:801px) and (max-width:1100px){
  .character-copy h3,.is-pinned .character-copy h3,.is-pinned .character-slide .character-copy h3{font-size:clamp(34px,4.2vw,48px)}
}
@media(max-width:800px){
  .character-copy h3,.is-pinned .character-copy h3,.is-pinned .character-slide .character-copy h3{font-size:clamp(23px,6.6vw,40px);letter-spacing:-.025em}
  .character-heading h2::after,.section-head h2::after,.radio-copy h2::after{height:4px;margin-top:7px}
}
@media(max-width:380px){
  .character-copy h3,.is-pinned .character-copy h3,.is-pinned .character-slide .character-copy h3{font-size:clamp(22px,6.4vw,25px)}
}

/* v5 — unified section heading font/size; character NAMES untouched */
/* A digital mono-industrial title face with hard cuts, RGB offsets and scanline glyph texture. */
#characters-title,#music-title,#disco-title,#radio-title {
  font-family:'Arial Black','DejaVu Sans Mono','Liberation Mono',monospace!important;
  font-weight:900!important;
  font-size:clamp(38px, 6vw, 82px)!important;
  font-style:normal!important;
  line-height:.98!important;
  letter-spacing:-.075em!important;
  font-variant-ligatures:none;
  -webkit-text-stroke:1px currentColor;
  text-shadow:2px 0 rgba(0,232,255,.85),-2px 0 rgba(255,39,124,.8),3px 4px rgba(0,0,0,.24)!important;
  background-image:repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.13) 4px 5px, transparent 5px 8px);
  background-clip:text;
  -webkit-background-clip:text;
  position:relative;
  display:table;
  max-width:100%;
}
/* Angled fragment echoed through the letterforms at intermittent intervals. */
#characters-title::before,#music-title::before,#disco-title::before,#radio-title::before{
  content:attr(data-glitch);
  position:absolute;
  left:0;top:0;
  width:100%;height:100%;
  color:#20e2ed;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  font:inherit;
  line-height:inherit;
  white-space:nowrap;
  clip-path:inset(44% 0 43% 0);
  transform:translateX(5px);
  animation:lab-title-slice 9s steps(1,end) infinite;
}
@keyframes lab-title-slice {0%,92%,94%,97%,100%{opacity:0} 93%,96%{opacity:.85}}
/* Title decoration only, not character name decoration. */
#characters-title::after,#music-title::after,#disco-title::after,#radio-title::after{
  content:'';display:block;height:4px;width:34%;max-width:140px;margin-top:11px;
  transform:skewX(-26deg);
  background:repeating-linear-gradient(90deg,#ed438f 0 12px,transparent 12px 16px,#27cde0 16px 28px,transparent 28px 33px);
}
/* Restore original character-name face, maintaining preceding one-line/size rules. */
.character-copy h3,.is-pinned .character-copy h3,.is-pinned .character-slide .character-copy h3{
  font-family:var(--display)!important;
  -webkit-text-stroke:0!important;
  paint-order:normal;
  text-shadow:none!important;
}
@media(max-width:550px){
  #characters-title,#music-title,#disco-title,#radio-title{font-size:clamp(31px,8vw,44px)!important;letter-spacing:-.08em!important}
  #characters-title::after,#music-title::after,#disco-title::after,#radio-title::after{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  #characters-title::before,#music-title::before,#disco-title::before,#radio-title::before{animation:none!important}
}

/* 904 LAB: Desktop character layout, copy left / portrait right. Mobile unchanged. */
@media (min-width: 801px) {
  .characters .character-slide,
  .characters.is-pinned .character-slide {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
  .characters .character-slide > .character-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .characters .character-slide > .character-portrait {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
}

/* 904 LAB mobile: keep MENU label horizontal and position scroll cue at screen center. */
@media (max-width: 800px) {
  .site-header .menu-toggle {
    box-sizing: border-box;
    width: 78px;
    min-width: 78px;
    height: 48px;
    min-height: 48px;
    padding: 8px 2px 8px 38px;
    margin-left: auto;
    flex: 0 0 78px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
  }
  .site-header .menu-toggle > span {
    display: block;
    flex: 0 0 1px;
    width: 25px;
    height: 1px;
    margin: 0;
  }
  .site-header .menu-toggle em {
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    width: 34px;
    transform: translateY(-50%);
    display: block;
    white-space: nowrap;
    word-break: keep-all;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .04em;
    text-align: right;
  }
  .circus-hero .circus-footer {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    margin: 0;
    pointer-events: none;
  }
  .circus-hero .circus-scroll {
    position: absolute;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: max-content;
    align-items: center;
    text-align: center;
    pointer-events: auto;
  }
}


/* mobile fix — Fujin/Raijin thumb size + larger overlapped duo presentation */
@media(max-width:550px){
  /* main character visual: bigger and overlapped like the reference */
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait{
    position:relative;
    min-height:320px;
  }
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait .duo-portraits{
    width:122%;
    height:122%;
    max-width:390px;
    margin:0 auto;
    left:50%;
    transform:translateX(-50%);
  }
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait .duo-portraits img{
    width:64%;
    height:auto;
    max-height:none;
  }
  /* left = raijin, bigger and slightly front */
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait .duo-portraits img:first-child{
    left:-3%;
    top:2%;
    z-index:2;
    transform:rotate(-3deg);
  }
  /* right = fujin, a bit lower and behind */
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait .duo-portraits img+img{
    right:-1%;
    top:23%;
    z-index:1;
    transform:rotate(4deg);
  }

  /* bottom thumbnail: make 06 visually match the other characters */
  .character-tabs button[data-character="5"]{padding:7px 4px 3px}
  .character-tabs button[data-character="5"] .duo-portraits{
    width:29px;
    height:34px;
    margin-inline:auto;
  }
  .character-tabs button[data-character="5"] .duo-portraits img{
    width:16px;
    height:24px;
    top:0;
  }
  .character-tabs button[data-character="5"] .duo-portraits img+img{
    right:0;
    top:6px;
  }
}

@media(max-width:380px){
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait{
    min-height:300px;
  }
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait .duo-portraits{
    width:118%;
    height:118%;
    max-width:350px;
  }
  .is-pinned .character-slide[data-name="風神雷神"] .character-portrait .duo-portraits img{
    width:63%;
  }
  .character-tabs button[data-character="5"] .duo-portraits{
    width:27px;
    height:32px;
  }
  .character-tabs button[data-character="5"] .duo-portraits img{
    width:15px;
    height:22px;
  }
}

/* 904 RADIO mobile order: introduction → studio image → two YouTube thumbnails */
@media (max-width:800px) {
  #radio .radio-layout {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  #radio .radio-copy { display:contents; }
  #radio .radio-copy > .eyebrow {order:1;margin-bottom:8px;}
  #radio .radio-copy > h2 {order:2;margin-bottom:18px;}
  #radio .radio-copy > p:not(.eyebrow) {order:3;margin-bottom:0;}
  #radio .radio-studio {order:4;margin-top:42px;margin-bottom:100px;}
  #radio .radio-episodes {order:5;margin-top:0;width:100%;}
}

/* 904 Fujin/Raijin: actual markup uses .duo-hero (NOT .duo-portraits).
   Both devices: Raijin on the left/front, Fujin on the right/behind. */
.character-slide-duo .character-portrait-duo{min-width:0;overflow:visible}
.character-slide-duo .duo-hero{
  position:relative!important;display:block!important;
  width:min(112%,710px)!important;
  max-width:none!important;
  aspect-ratio:1.08!important;
  height:auto!important;
  padding:0!important;
  margin:0 auto!important;
  overflow:visible!important;
  isolation:isolate;
}
.character-slide-duo .duo-hero img{
  display:block!important;position:absolute!important;
  height:96%!important;width:69%!important;
  max-width:none!important;max-height:none!important;
  object-fit:contain!important;
  margin:0!important;
  filter:drop-shadow(0 18px 19px #0008)!important;
}
.character-slide-duo .duo-hero .duo-hero-raijin{
  left:-4%!important;right:auto!important;top:-7%!important;bottom:auto!important;
  z-index:2!important;transform:rotate(-5deg)!important;
}
.character-slide-duo .duo-hero .duo-hero-fujin{
  left:auto!important;right:-7%!important;top:19%!important;bottom:auto!important;
  z-index:1!important;transform:rotate(5deg)!important;
}
/* The smaller duo thumbnail is a separate .duo-portraits element. */
.character-tabs button[data-character="5"] .duo-portraits{width:42px;height:49px;max-width:100%;margin:0 auto}
.character-tabs button[data-character="5"] .duo-portraits img{width:23px;height:35px;max-width:none;object-fit:contain;top:0;left:0}
.character-tabs button[data-character="5"] .duo-portraits img+img{top:9px;left:auto;right:0}
@media(max-width:800px){
  .character-slide-duo .character-portrait-duo{max-height:none!important;min-height:0!important}
  .character-slide-duo .duo-hero{
    width:min(118%,480px)!important;
    aspect-ratio:1.08!important;
    left:50%;transform:translateX(-50%);
    margin:0!important;
  }
  .character-slide-duo .duo-hero img{width:70%!important;height:97%!important}
  .character-slide-duo .duo-hero .duo-hero-raijin{left:-5%!important;top:-8%!important}
  .character-slide-duo .duo-hero .duo-hero-fujin{right:-7%!important;top:20%!important}
  .character-tabs button[data-character="5"] .duo-portraits{width:30px;height:35px}
  .character-tabs button[data-character="5"] .duo-portraits img{width:17px;height:25px}
  .character-tabs button[data-character="5"] .duo-portraits img+img{top:6px}
}
@media(max-width:550px){
  .character-slide-duo .duo-hero{width:min(122%,420px)!important;aspect-ratio:1.08!important}
}
@media(max-width:380px){
  .character-slide-duo .duo-hero{width:120%!important}
}


/* v-next — character portraits: stronger, balanced visual scale.
   Keeps the specially layered Fujin/Raijin duo unchanged. */
@media (min-width:801px){
  .is-pinned .character-slide:not(.character-slide-duo) .character-portrait > img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.17)!important;
    transform-origin:center center;
  }
  .is-pinned .character-slide:not(.character-slide-duo) .character-portrait:hover > img{
    transform:translateX(var(--cast-drift,0px)) translateY(-6px) rotate(var(--cast-tilt,0deg)) scale(1.17)!important;
  }
  /* Characters whose artwork is tall or already fills the frame */
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="イジィー＆ボラ"] .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.10)!important;
  }
}
@media (max-width:800px){
  .is-pinned .character-slide:not(.character-slide-duo) .character-portrait > img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.13)!important;
    transform-origin:center center;
  }
  .is-pinned .character-slide:not(.character-slide-duo) .character-portrait:hover > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.13)!important;
  }
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="イジィー＆ボラ"] .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.07)!important;
  }
}
@media (max-width:550px){
  /* Preserve headroom above captions and thumbnail bar on narrow phones. */
  .is-pinned .character-slide:not(.character-slide-duo) .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.12)!important;
  }
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="イジィー＆ボラ"] .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.06)!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .is-pinned .character-slide:not(.character-slide-duo) .character-portrait > img{
    transform:scale(1.10)!important;
    transition:none!important;
  }
}

/* 2026-10-23: enlarge Izzy & Bora, Bremen, and Monkey King only. */
@media (min-width:801px){
  .is-pinned .character-slide:is([data-name="イジィー＆ボラ"],[data-name="ブレーメン"],[data-name="孫悟空"]) .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.25)!important;
    transform-origin:center center;
  }
  .is-pinned .character-slide:is([data-name="イジィー＆ボラ"],[data-name="ブレーメン"],[data-name="孫悟空"]) .character-portrait:hover > img{
    transform:translateX(var(--cast-drift,0px)) translateY(-6px) rotate(var(--cast-tilt,0deg)) scale(1.25)!important;
  }
}
@media (max-width:800px){
  .is-pinned .character-slide:is([data-name="イジィー＆ボラ"],[data-name="ブレーメン"],[data-name="孫悟空"]) .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.19)!important;
    transform-origin:center center;
  }
}
@media (max-width:550px){
  .is-pinned .character-slide:is([data-name="イジィー＆ボラ"],[data-name="ブレーメン"],[data-name="孫悟空"]) .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.16)!important;
  }
}

/* v6: Bremen enlargement + 4-up MUSIC + centered ALL MUSIC + Spotify beside SINGLE */
@media(min-width:801px){
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
   transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.35)!important;
   transform-origin:center center;
 }
}
@media(min-width:551px) and (max-width:800px){
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img{transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.26)!important}
}
@media(max-width:550px){
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img{transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.22)!important}
}
.music-section .music-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}
.music-section .music-card h3{font-size:clamp(14px,1.65vw,21px);overflow-wrap:anywhere}
.music-section .music-card>div{font-size:9px;gap:6px}
.music-all-link{display:flex;justify-content:center;align-items:center;padding:12px 0 0}
.music-all-icon{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#f0ca80;border:1px solid #f0ca8066;border-radius:999px;padding:12px 20px;min-height:46px;font-size:11px;font-weight:800;letter-spacing:.08em;text-decoration:none}
.music-all-icon svg{display:block;width:23px;height:23px}
.music-all-icon:hover,.record-spotify-icon:hover{background:#f0ca8020}
.record-filters .record-spotify-icon{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid #dabd7e55;border-radius:40px;padding:9px 15px;color:#f0ca80;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap}
.record-spotify-icon svg{width:23px;height:23px;flex:none}
@media(max-width:800px){.music-section .music-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.music-section .music-card h3{font-size:clamp(12px,3.6vw,18px)}.music-section .music-card>div{font-size:8px;margin:10px 0 7px}.record-filters .record-spotify-icon{padding:8px 10px;font-size:10px}}
@media(max-width:380px){.record-filters{gap:6px}.record-filters button{padding:10px 13px}.record-filters .record-spotify-icon{padding:8px}}

/* Spotify filter link: icon only, keyboard accessible aria-label stays on the anchor */
.record-filters .record-spotify-icon{width:44px;height:44px;min-height:44px;padding:0!important;gap:0;border-radius:50%;flex:0 0 44px}
.record-filters .record-spotify-icon svg{width:24px;height:24px}

/* CRAZY RADIO: single label above the main headline */
.radio-copy .radio-copy-label{display:inline-flex;align-items:center;gap:10px;color:#f0ca80;font-weight:800;letter-spacing:.17em}
.radio-live-dot{display:inline-block;flex:0 0 9px;width:9px;height:9px;background:#ff604e;border-radius:50%;box-shadow:0 0 9px #ff604e66}

/* Bremen only: 110% of the previous v6 display size; preserve scroll drift. */
@media (min-width:801px){
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.485)!important;
  }
}
@media (min-width:551px) and (max-width:800px){
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.386)!important;
  }
}
@media (max-width:550px){
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img{
    transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.342)!important;
  }
}


/* Mobile navigation — robust single-line MENU and full-screen nav */
@media(max-width:800px){
 .site-header .menu-toggle{
   position:relative!important;display:flex!important;align-items:center!important;
   justify-content:flex-start!important;flex-direction:row!important;
   flex:0 0 96px!important;width:96px!important;min-width:96px!important;
   height:48px!important;min-height:48px!important;
   margin:0 0 0 auto!important;padding:0 36px 0 6px!important;
   gap:0!important;box-sizing:border-box!important;
   border:0!important;background:transparent!important;
   overflow:visible!important;white-space:nowrap!important;
 }
 .site-header .menu-toggle em{
   position:static!important;transform:none!important;display:block!important;
   width:auto!important;max-width:none!important;min-width:0!important;
   margin:0!important;padding:0!important;
   font-size:11px!important;line-height:1!important;font-style:normal!important;
   text-align:left!important;letter-spacing:.06em!important;
   writing-mode:horizontal-tb!important;text-orientation:mixed!important;
   word-break:normal!important;overflow-wrap:normal!important;white-space:nowrap!important;
 }
 .site-header .menu-toggle>span{
   position:absolute!important;right:5px!important;left:auto!important;
   width:25px!important;height:2px!important;flex:none!important;
   background:currentColor!important;border-radius:2px!important;
   transform:none!important;transition:transform .2s ease!important;
 }
 .site-header .menu-toggle>span:first-child{top:18px!important}
 .site-header .menu-toggle>span:nth-child(2){top:27px!important}
 .site-header .menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(4.5px) rotate(45deg)!important}
 .site-header .menu-toggle[aria-expanded=true]>span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)!important}
 .site-header .global-nav{
   position:fixed!important;top:var(--header)!important;bottom:0!important;
   left:0!important;right:0!important;width:100vw!important;
   height:calc(100dvh - var(--header))!important;
   max-height:none!important;overflow-y:auto!important;
   padding:26px max(24px,6vw) 45px!important;
   box-sizing:border-box!important;z-index:101!important;
 }
 .site-header .global-nav:not(.open){display:none!important}
 .site-header .global-nav.open{display:flex!important}
 .site-header .global-nav a:last-child span{display:none!important}
}

/* 904 RADIO: keep HELLO CRAZY on one line on phones only */
@media (max-width:550px){
  #radio-title{
    font-size:clamp(25px,7.2vw,38px)!important;
    line-height:1.1!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
    width:max-content;
    max-width:100%;
  }
  #radio-title br{display:none!important}
  #radio-title > span::before{content:" ";white-space:pre}
}

/* MUSIC section / 4 YouTube videos */
.music-section .music-video-art{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#18111b}
.music-section .music-video-art>img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}
.music-section .music-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:34px;border-radius:9px;background:#e52d36;color:white;font-size:16px;line-height:1;transition:background .2s}
.music-section .music-video-card:hover .music-video-play{background:#bd1822}
.music-section .music-video-card h3{margin-top:14px;font-size:clamp(13px,1.4vw,18px)}
@media(max-width:800px){.music-section .music-video-play{width:40px;height:29px;font-size:13px}.music-section .music-video-card h3{font-size:12px;margin-top:10px}}


/* hero side mini-casts — move upward and enlarge for better visibility */
@media(min-width:801px){
  .circus-hero .cast-izzy{left:4.5%!important;width:26%!important;height:31%!important;bottom:58%!important}
  .circus-hero .cast-bremen{right:0%!important;width:29%!important;height:34%!important;bottom:56%!important}
}
@media(min-width:551px) and (max-width:800px){
  .circus-hero .cast-izzy{left:3%!important;width:30%!important;height:34%!important;bottom:57%!important}
  .circus-hero .cast-bremen{right:-1%!important;width:32%!important;height:36%!important;bottom:55%!important}
}
@media(max-width:550px){
  .circus-hero .cast-izzy{left:4%!important;width:27%!important;height:32%!important;bottom:59%!important}
  .circus-hero .cast-bremen{right:0%!important;width:30%!important;height:35%!important;bottom:57%!important}
}
@media(max-width:380px){
  .circus-hero .cast-izzy{left:3%!important;width:28%!important;height:33%!important;bottom:60%!important}
  .circus-hero .cast-bremen{right:-1%!important;width:31%!important;height:36%!important;bottom:58%!important}
}

/* v8 — visibly enlarge the side ensembles at all viewport widths */
@media(min-width:801px){
 .circus-hero .cast-izzy{left:4%!important;width:28%!important;height:50%!important;bottom:48%!important}
 .circus-hero .cast-bremen{right:-1%!important;width:31%!important;height:53%!important;bottom:45%!important}
}
@media(min-width:551px) and (max-width:800px){
 .circus-hero .cast-izzy{left:0%!important;width:31%!important;height:45%!important;bottom:53%!important}
 .circus-hero .cast-bremen{right:-2%!important;width:34%!important;height:48%!important;bottom:50%!important}
}
@media(max-width:550px){
 .circus-hero .cast-izzy{left:-1%!important;width:35%!important;height:42%!important;bottom:55%!important}
 .circus-hero .cast-bremen{right:-4%!important;width:38%!important;height:47%!important;bottom:51%!important}
 /* Character showcase: Bremen's tall original has large internal negative space. */
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait{overflow:visible!important}
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
   width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
   object-fit:contain!important;transform-origin:center center!important;
   transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.7)!important;
 }
}
@media(max-width:380px){
 .circus-hero .cast-izzy{left:-3%!important;width:37%!important;height:44%!important;bottom:55%!important}
 .circus-hero .cast-bremen{right:-5%!important;width:40%!important;height:48%!important;bottom:51%!important}
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
 .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
   transform:translateX(var(--cast-drift,0px)) rotate(var(--cast-tilt,0deg)) scale(1.58)!important;
 }
}

/* v9 — mobile CHARACTER slide: Bremen larger and raised (not the circus hero) */
@media (max-width:550px){
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-38px,0) rotate(var(--cast-tilt,0deg)) scale(1.88)!important;
    transform-origin:center center!important;
  }
}
@media (max-width:380px){
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-26px,0) rotate(var(--cast-tilt,0deg)) scale(1.73)!important;
  }
}


/* v10: make four peripheral circus characters prominent on mobile only.
   Separate from CHARACTERS section; keep central cast and desktop unchanged. */
@media (max-width:550px) and (orientation:portrait){
  .circus-hero .cast-izzy{
    left:-4%!important; width:49%!important; height:49%!important;
    bottom:45%!important;
  }
  .circus-hero .cast-bremen{
    right:-5%!important; width:51%!important; height:51%!important;
    bottom:43%!important;
  }
  .circus-hero .cast-reaper{
    left:-23%!important; width:63%!important; height:53%!important;
    bottom:0%!important;
  }
  .circus-hero .cast-panda{
    right:-20%!important; width:60%!important; height:52%!important;
    bottom:-1%!important;
  }
}
@media (max-width:380px) and (orientation:portrait){
  .circus-hero .cast-izzy{left:-6%!important; width:51%!important; height:48%!important; bottom:45%!important}
  .circus-hero .cast-bremen{right:-6%!important; width:53%!important; height:50%!important; bottom:43%!important}
  .circus-hero .cast-reaper{left:-25%!important; width:65%!important; height:52%!important; bottom:0%!important}
  .circus-hero .cast-panda{right:-21%!important; width:62%!important; height:51%!important; bottom:-1%!important}
}

/* v11 — reduce collision with Gigigi and Jackie while keeping upper groups prominent. */
@media (max-width:550px) and (orientation:portrait){
 .circus-hero .cast-izzy{left:-5%!important;width:43%!important;height:42%!important;bottom:57%!important}
 .circus-hero .cast-bremen{right:-5%!important;width:45%!important;height:43%!important;bottom:56%!important}
}
@media (max-width:380px) and (orientation:portrait){
 .circus-hero .cast-izzy{left:-6%!important;width:44%!important;height:42%!important;bottom:57%!important}
 .circus-hero .cast-bremen{right:-6%!important;width:46%!important;height:43%!important;bottom:56%!important}
}

/* v12 — slightly shift the central CRAZY cast left on desktop and mobile.
   Keep size, height, parallax and sway animations unchanged. */
.circus-hero .circus-cast .cast-crazy {
  margin-left: clamp(-44px, -3vw, -12px);
}


/* v13 — smartphone TOP and CHARACTER Bremen balance, PC unchanged */
@media (max-width:550px) and (orientation:portrait){
  /* TOP: Izzy & Bora about 80% of v12 dimensions. */
  .circus-hero .cast-izzy{
    left:-3%!important;
    width:34.4%!important;
    height:33.6%!important;
    bottom:61%!important;
  }
  /* TOP: move Bremen inward so the entire ensemble is visible. */
  .circus-hero .cast-bremen{
    right:5%!important;
    width:45%!important;
    height:43%!important;
    bottom:56%!important;
  }
  /* CHARACTER slide: reduce Bremen to about 80% of previous 1.88 scale. */
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-30px,0) rotate(var(--cast-tilt,0deg)) scale(1.50)!important;
  }
}
@media (max-width:380px) and (orientation:portrait){
  .circus-hero .cast-izzy{
    left:-4%!important;width:35.2%!important;height:33.6%!important;bottom:61%!important;
  }
  .circus-hero .cast-bremen{
    right:4%!important;width:46%!important;height:43%!important;bottom:56%!important;
  }
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-21px,0) rotate(var(--cast-tilt,0deg)) scale(1.38)!important;
  }
}

/* v14 — mobile portrait adjustments relative to v13; desktop unaffected */
@media (max-width:550px) and (orientation:portrait){
  /* TOP: Izzy & Bora 90% of v13, moved right */
  .circus-hero .cast-izzy{
    left:2%!important;
    width:30.96%!important;
    height:30.24%!important;
    bottom:62%!important;
  }
  /* TOP: move both lower decorative characters toward the left */
  .circus-hero .cast-panda{right:-11%!important;}
  .circus-hero .cast-reaper{left:-29%!important;}
  /* CHARACTER: Bremen 85% of the current v13 scale */
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-30px,0) rotate(var(--cast-tilt,0deg)) scale(1.275)!important;
  }
}
@media (max-width:380px) and (orientation:portrait){
  .circus-hero .cast-izzy{left:1%!important;width:31.68%!important;height:30.24%!important;bottom:62%!important;}
  .circus-hero .cast-panda{right:-12%!important;}
  .circus-hero .cast-reaper{left:-31%!important;}
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-21px,0) rotate(var(--cast-tilt,0deg)) scale(1.173)!important;
  }
}

/* v15 — smartphone TOP Omukae Taro slightly right;
   CHARACTER Bremen slightly down. All other layouts unchanged. */
@media (max-width:550px) and (orientation:portrait){
  .circus-hero .cast-reaper{left:-23%!important;}
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-12px,0) rotate(var(--cast-tilt,0deg)) scale(1.275)!important;
  }
}
@media (max-width:380px) and (orientation:portrait){
  .circus-hero .cast-reaper{left:-25%!important;}
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait > img,
  .is-pinned .character-slide[data-name="ブレーメン"] .character-portrait:hover > img{
    transform:translate3d(var(--cast-drift,0px),-6px,0) rotate(var(--cast-tilt,0deg)) scale(1.173)!important;
  }
}


/* snapshot stream section */
.snapshot-stream{
  position:relative;
  padding:clamp(72px,9vw,120px) 0 clamp(52px,7vw,92px);
  background:
    radial-gradient(circle at 15% 25%, rgba(255,129,84,.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,59,128,.12), transparent 24%),
    linear-gradient(180deg, #14060f 0%, #160713 44%, #0f0814 100%);
  overflow:hidden;
}
.snapshot-stream::before,
.snapshot-stream::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,193,120,.5), transparent);
}
.snapshot-stream::before{top:0}
.snapshot-stream::after{bottom:0}
.snapshot-intro{
  width:min(1180px, calc(100% - 48px));
  margin:0 auto 34px;
  text-align:center;
}
.snapshot-intro .eyebrow{margin:0 0 10px;color:var(--gold-soft);letter-spacing:.24em}
.snapshot-intro h2{margin:0;font-size:clamp(42px,6vw,96px)}
.snapshot-copy{max-width:760px;margin:12px auto 0;color:rgba(255,245,225,.78);font-size:clamp(14px,1.4vw,18px)}
.snapshot-lanes{display:grid;gap:24px;position:relative}
.snapshot-lanes::before,
.snapshot-lanes::after{
  content:"";
  position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none;
}
.snapshot-lanes::before{left:0;background:linear-gradient(90deg, #12070f 0%, rgba(18,7,15,0) 100%)}
.snapshot-lanes::after{right:0;background:linear-gradient(270deg, #12070f 0%, rgba(18,7,15,0) 100%)}
.snapshot-lane{display:flex;gap:20px;width:max-content;min-width:100%;will-change:transform}
.snapshot-lane.lane-a{animation:snapshot-marquee 42s linear infinite}
.snapshot-lane.lane-b{animation:snapshot-marquee-reverse 48s linear infinite;transform:translateX(-18%)}
.snapshot-track{display:flex;gap:20px;padding-inline:10px}
.snapshot-card{
  position:relative;
  flex:0 0 auto;
  width:auto;
  height:220px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(232,193,120,.28);
  background:rgba(30,12,22,.72);
  box-shadow:0 26px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  transform:rotate(var(--tilt, -1.8deg));
}
.snapshot-card:nth-child(2n){--tilt:1.8deg}
.snapshot-card:nth-child(3n){--tilt:-2.4deg}
.snapshot-card:nth-child(4n){--tilt:.9deg}
.snapshot-card.is-tall{height:260px}
.snapshot-card.is-wide{height:210px}
.snapshot-card img{display:block;height:100%;width:auto;object-fit:cover}
.snapshot-card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(180deg, rgba(5,2,8,0) 0%, rgba(5,2,8,.78) 72%, rgba(5,2,8,.96) 100%);
}
.snapshot-card figcaption{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:grid;gap:8px}
.snapshot-chip{
  width:max-content;padding:4px 10px;border-radius:999px;background:rgba(255,76,76,.2);
  border:1px solid rgba(255,120,120,.35);color:#ffd7bf;font-size:11px;letter-spacing:.18em;text-transform:uppercase
}
.snapshot-card strong{display:block;color:#fff5e1;font-size:13px;line-height:1.45;text-shadow:0 6px 18px rgba(0,0,0,.45)}
@keyframes snapshot-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes snapshot-marquee-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){
  .snapshot-lane.lane-a,.snapshot-lane.lane-b{animation:none;transform:none}
}
@media(max-width:800px){
  .snapshot-stream{padding:64px 0 48px}
  .snapshot-intro{width:min(100% - 28px, 720px);margin-bottom:26px}
  .snapshot-intro h2{font-size:clamp(34px,10vw,54px)}
  .snapshot-copy{font-size:13px;line-height:1.7}
  .snapshot-lanes{gap:16px}
  .snapshot-track{gap:14px;padding-inline:8px}
  .snapshot-card{height:164px;border-radius:20px}
  .snapshot-card.is-tall{height:188px}
  .snapshot-card.is-wide{height:156px}
  .snapshot-card figcaption{left:10px;right:10px;bottom:10px;gap:6px}
  .snapshot-card strong{font-size:11px}
  .snapshot-chip{padding:3px 8px;font-size:9px}
  .snapshot-lane.lane-a{animation-duration:34s}
  .snapshot-lane.lane-b{animation-duration:38s}
  .snapshot-lanes::before,.snapshot-lanes::after{width:42px}
}


/* SNAP SHOTS v2 — seamless transitions, no text, uniform image sizes */
.snapshot-stream{
 background:#160f19!important;
 border:0!important;
 padding:clamp(26px,4vw,56px) 0!important;
 margin:0!important;
 min-height:0!important;
 isolation:isolate;
}
.snapshot-stream::before,.snapshot-stream::after{display:none!important;content:none!important}
.snapshot-lanes{gap:22px!important}
.snapshot-lanes::before{background:linear-gradient(90deg,#160f19,transparent)!important}
.snapshot-lanes::after{background:linear-gradient(270deg,#160f19,transparent)!important}
.snapshot-track{align-items:center;gap:16px!important}
.snapshot-card,.snapshot-card.is-tall,.snapshot-card.is-wide{
 box-sizing:border-box;
 flex:0 0 216px!important;
 width:216px!important;
 height:216px!important;
 border-radius:16px!important;
 overflow:hidden!important;
 transform:none!important;
 border:0!important;
 box-shadow:none!important;
 background:#160f19;
}
.snapshot-card img{width:100%!important;height:100%!important;object-fit:cover!important;display:block}
.snapshot-card::after,.snapshot-card figcaption,.snapshot-intro{display:none!important}
/* Same background on adjacent sections, with no separating rule. */
.circus-hero{border-bottom:0!important}
main>.characters,.character-stage{border-top:0!important}
@media(max-width:800px){
 .snapshot-stream{padding:22px 0 30px!important}
 .snapshot-lanes{gap:12px!important}
 .snapshot-track{gap:12px!important}
 .snapshot-card,.snapshot-card.is-tall,.snapshot-card.is-wide{
   flex-basis:154px!important;width:154px!important;height:154px!important;border-radius:12px!important;
 }
}
@media(prefers-reduced-motion:reduce){.snapshot-lane{animation:none!important;transform:none!important;}}


/* v3 snapshot stream: rectangular cards */
.snapshot-card{
  width: 320px !important;
  height: 196px !important;
  aspect-ratio: 16 / 10;
}
.snapshot-card img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
@media(max-width:800px){
  .snapshot-card{
    width: 232px !important;
    height: 142px !important;
    aspect-ratio: 16 / 10;
  }
}


/* v4 snapshot stream: cheki / instant-photo style */
.snapshot-card{
  position: relative;
  width: 320px !important;
  height: auto !important;
  aspect-ratio: auto;
  padding: 10px 10px 22px !important;
  border-radius: 10px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, #fffdfa 0%, #f4efe8 100%) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 20px 40px rgba(0,0,0,.34),
    0 6px 18px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(0,0,0,.04) !important;
}
.snapshot-card::before{
  content:"";
  position:absolute;
  inset:8px 8px auto auto;
  width:56px;
  height:14px;
  border-radius:4px;
  background:rgba(255,244,196,.28);
  transform:rotate(8deg);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
  z-index:3;
  pointer-events:none;
}
.snapshot-card::after{
  content:"";
  position:absolute;
  inset:auto 18px 10px 18px;
  height:22px;
  border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 46%, rgba(0,0,0,0) 76%);
  z-index:-1;
  pointer-events:none;
}
.snapshot-card img{
  display:block;
  width:100% !important;
  height:196px !important;
  object-fit:cover;
  border-radius:4px;
  background:#12070f;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
}
.snapshot-card figcaption,
.snapshot-card .snapshot-chip,
.snapshot-card strong{
  display:none !important;
}
.snapshot-track{align-items:flex-start}
.snapshot-card:nth-child(2n){transform:rotate(2.6deg) translateY(18px)}
.snapshot-card:nth-child(3n){transform:rotate(-3.4deg) translateY(6px)}
.snapshot-card:nth-child(4n){transform:rotate(1.4deg) translateY(24px)}
.snapshot-card:nth-child(5n){transform:rotate(-2deg) translateY(12px)}
.snapshot-card:nth-child(6n){transform:rotate(3.2deg) translateY(20px)}
@media(max-width:800px){
  .snapshot-card{
    width: 232px !important;
    padding: 8px 8px 18px !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.04) !important;
  }
  .snapshot-card::before{
    width:44px;
    height:11px;
    inset:6px 6px auto auto;
  }
  .snapshot-card::after{inset:auto 14px 8px 14px;height:18px}
  .snapshot-card img{
    height:142px !important;
    border-radius:3px;
  }
  .snapshot-card:nth-child(2n){transform:rotate(2.4deg) translateY(14px)}
  .snapshot-card:nth-child(3n){transform:rotate(-3deg) translateY(4px)}
  .snapshot-card:nth-child(4n){transform:rotate(1.2deg) translateY(18px)}
  .snapshot-card:nth-child(5n){transform:rotate(-1.8deg) translateY(10px)}
  .snapshot-card:nth-child(6n){transform:rotate(2.8deg) translateY(16px)}
}


/* v5 FIX: override legacy square dimensions including flex-basis and variants */
.snapshot-stream .snapshot-card,
.snapshot-stream .snapshot-card.is-tall,
.snapshot-stream .snapshot-card.is-wide {
  box-sizing:border-box!important;
  flex:0 0 320px!important;
  width:320px!important;
  min-width:320px!important;
  height:228px!important;
  min-height:228px!important;
  aspect-ratio:auto!important;
  padding:10px 10px 22px!important;
  background:#faf7f1!important;
  border:1px solid #eee8df!important;
  border-radius:7px!important;
  overflow:visible!important;
  box-shadow:0 15px 30px rgba(0,0,0,.3)!important;
}
.snapshot-stream .snapshot-card img{
  display:block!important;
  width:100%!important;
  height:196px!important;
  aspect-ratio:3/2!important;
  object-fit:cover!important;
  border-radius:2px!important;
}
.snapshot-stream .snapshot-card:nth-child(2n){transform:rotate(2.6deg) translateY(14px)!important}
.snapshot-stream .snapshot-card:nth-child(3n){transform:rotate(-2.6deg) translateY(4px)!important}
.snapshot-stream .snapshot-card:nth-child(4n){transform:rotate(1.4deg) translateY(19px)!important}
.snapshot-stream .snapshot-card:nth-child(5n){transform:rotate(-2deg) translateY(9px)!important}
.snapshot-stream .snapshot-track{align-items:center!important}
.snapshot-stream .snapshot-lanes{gap:32px!important}
@media(max-width:800px){
  .snapshot-stream .snapshot-card,
  .snapshot-stream .snapshot-card.is-tall,
  .snapshot-stream .snapshot-card.is-wide {
    flex:0 0 232px!important;
    width:232px!important;
    min-width:232px!important;
    height:168px!important;
    min-height:168px!important;
    padding:8px 8px 18px!important;
    border-radius:6px!important;
  }
  .snapshot-stream .snapshot-card img{height:142px!important}
  .snapshot-stream .snapshot-lanes{gap:25px!important}
}

/* v6: portrait instant-photo frames — overrides earlier square/landscape rules */
.snapshot-stream .snapshot-card,
.snapshot-stream .snapshot-card.is-wide,
.snapshot-stream .snapshot-card.is-tall {
  box-sizing:border-box !important;
  flex:0 0 228px !important;
  width:228px !important;
  height:335px !important;
  min-width:228px !important;
  min-height:335px !important;
  aspect-ratio:auto !important;
  padding:10px 10px 37px !important;
  border-radius:5px !important;
  overflow:visible !important;
}
.snapshot-stream .snapshot-card > img {
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:288px !important;
  aspect-ratio:unset !important;
  object-fit:cover !important;
  border-radius:2px !important;
}
@media(max-width:800px){
  .snapshot-stream .snapshot-card,
  .snapshot-stream .snapshot-card.is-wide,
  .snapshot-stream .snapshot-card.is-tall {
    flex-basis:172px !important;
    width:172px !important;
    min-width:172px !important;
    height:253px !important;
    min-height:253px !important;
    padding:8px 8px 29px !important;
  }
  .snapshot-stream .snapshot-card > img {
    height:216px !important;
  }
}

/* Discography: live jacket imagery / proportional cover images */
.discography-section .album-grid img.release-cover-live{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#170d18;border-radius:7px;box-shadow:0 12px 24px #0005} 

/* 904 official cover assets */
.discography-section .album-grid img.release-official-cover{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:inherit;}