/* V2 art direction: Yali navy, liquid-glass lighting and squad portraits.
   Loaded after styles.css. All media and labels remain accessible without motion. */
:root {
  --bg:#010d2b;
  --surface:#071735;
  --surface-raised:#102344;
  --text:#f1f4f5;
  --muted:#abbad0;
  --subtle:#8295b0;
  --accent:#c2d4ec;
  --line:rgba(187,210,243,.17);
  --glass:rgba(12,30,61,.66);
  --yali-gold:#ffda2b;
  --yali-red:#be1d32;
}
body {
  background:radial-gradient(ellipse at 100% 25%,#021b4726,transparent 40%),var(--bg);
}
.chrome-text,.hero h1 span {
  color:#d7e4f2;
  background:linear-gradient(165deg,#fff 0%,#edf4ff 22%,#91a9c5 48%,#e7f2ff 67%,#9badc4 100%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.site-header {
  background:linear-gradient(125deg,#51678926,#0b1b3e88 45%,#35568126);
  border-color:#c0d8ff3b;
  border-radius:24px;
  box-shadow:inset 0 1px 0 #fff3,inset 0 -1px 0 #abc7f210,0 20px 65px #00091c66;
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.site-header.compact{background:linear-gradient(115deg,#203655cc,#071633eb);}
.site-header nav{gap:23px;}
.site-header nav>a[aria-current]{background:#afcaff13;border-radius:24px;padding-inline:13px;}
.site-header nav>a[aria-current]:after{background:#d4e4ff;bottom:2px;}
.brand img{width:42px;height:44px;}
.brand>span{font-size:14px;}
.button{border-radius:999px;}
.button.primary {
  background:linear-gradient(135deg,#f0f6ff,#c8d8ec 65%,#f1f6fc);
  box-shadow:inset 0 1px 0 #fff,0 4px 18px #020a214d,0 0 22px #97c3ff0d;
  color:#06152c;
}
.button.nav-join{border-radius:999px;background:linear-gradient(120deg,#d7e8ff26,#ffffff08);box-shadow:inset 0 1px 0 #fff3;}
.liquid-surface{--light-x:50%;--light-y:15%;position:relative;isolation:isolate;}
.liquid-surface::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 420px 240px at var(--light-x) var(--light-y),#d0e7ff16,transparent 65%);
  box-shadow:inset 0 1px 0 #ebf4ff40,inset 1px 0 0 #b7d0ed13,inset 0 -1px 0 #b7d0ed10;
}
.hero{background:#010d2b;min-height:820px;clip-path:inset(0 var(--hero-inset,0px) 0 round 0 0 var(--hero-radius,0px) var(--hero-radius,0px));}
.hero-media img{filter:saturate(.4) brightness(.75);}
.hero-shade{
  background:linear-gradient(90deg,#010d2baa,#010d2b22 90%),linear-gradient(0deg,#010d2b 0%,#010d2b05 43%,#010d2b55);
}
.hero-content{z-index:2;}
.hero h1{font-size:clamp(90px,9.5vw,146px);letter-spacing:-.025em;line-height:.94;}
.hero-kicker{color:#d1e0f4;}
.hero-glass{
  background:linear-gradient(122deg,#c2d5ee2e,#152d5259 40%,#7ea3d315);
  border:1px solid #c3dcff55;border-radius:20px;
  box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #bdd7ff1a,0 20px 55px #00091a66;
  backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);
}
.hero-aura{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 76% 24%,#8cc5ff1a,transparent 34%);}
.hero-lens{
  position:absolute;right:4%;top:29%;width:310px;height:310px;border-radius:50%;
  border:1px solid #d0e4ff22;background:radial-gradient(circle at 20% 10%,#c2dcff21,transparent 60%);
  box-shadow:inset 12px 16px 40px #c1dcff08,inset -10px -15px 30px #010a223d;
  transform:translateY(var(--lens-y,0px)) rotate(var(--lens-turn,-12deg));pointer-events:none;
}
.lens-ring{position:absolute;inset:14px;border-radius:50%;border:1px solid #d1e5ff24;box-shadow:0 0 0 12px #c4dcff05;}
.lens-orbit{position:absolute;inset:-28px;border:1px solid #d1e5ff10;border-radius:50%;transform:rotateX(58deg) rotate(-25deg);}
.lens-type{position:absolute;inset:0;display:grid;place-items:center;font:600 115px/1 var(--heading);letter-spacing:-.04em;color:#bfd4ee0f;-webkit-text-stroke:1px #c9dfff42;}
.hero-lens small{position:absolute;bottom:62px;left:0;width:100%;text-align:center;font-size:7px;letter-spacing:.25em;color:#b9cfe65c;}
.club-ribbon{display:flex;gap:28px;align-items:center;padding:27px 0;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.2em;color:#aebfd6;}
.club-ribbon i{height:3px;width:3px;flex:none;background:var(--yali-gold);border-radius:50%;}
.club-ribbon a{margin-left:auto;letter-spacing:0;font-size:10px;display:flex;align-items:center;gap:20px;color:#d5dfed;}
.club-ribbon a svg{width:14px;}
.story-visual{border-color:#c2daff3d;border-radius:150px 24px 24px 24px;box-shadow:0 30px 90px #00051a80;}
.story-photo img{filter:saturate(.4) brightness(.8);}
.story-visual-shade{background:linear-gradient(0deg,#010d2bf5,#010d2b00 85%);}
.chapter h2{font-size:clamp(54px,5.5vw,80px);}
.chapter .eyebrow{color:#bfd3ed;}
.story-progress span{background:linear-gradient(90deg,#8fa8cb,#e0eeff);box-shadow:0 0 12px #c3e1ff88;}
.editorial-event{background:linear-gradient(125deg,#102346,#06132e);border-radius:24px;border-color:#c2dbff38;}
.editorial-copy h3{font-size:76px;}
.image-tag{background:#010d2bba;border-color:#c2d4ef33;border-radius:999px;}
.event-card,.contact-card,.event-facts{background:linear-gradient(145deg,#11264a,#06142f);border-radius:20px;border-color:#c3dbff2e;}
.event-card{transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;}
.event-card:hover{transform:translateY(-7px);border-color:#c6ddff66;box-shadow:0 22px 40px #00091b66;}
.content-notice{background:#10254c77;border-color:#bfd5f329;border-radius:13px;}
.featured-scene,.detail-photo,.photo-open{border-radius:20px;border-color:#c8dfff33;}
.featured-scene:after{background:linear-gradient(0deg,#010d2bf5,transparent 95%);}
.featured-overlay h2{font-size:76px;}
.filter-pills{border-radius:999px;background:#071735cc;border-color:#bfd6f433;padding:6px;}
.filter-pills button{border-radius:999px;}
.filter-pills button.selected{background:linear-gradient(120deg,#c6dbf42e,#a6c7f218);border-color:#c2dbff3d;box-shadow:inset 0 1px 0 #f2f8ff29;}
select{background:#071735;border-radius:999px;}
.photo-expand,.circle-arrow{background:#0c2346b8;border-color:#d1e4ff66;box-shadow:inset 0 1px 0 #fff4;}
.join-band{background:radial-gradient(ellipse at 90% 0,#547cb440,transparent 65%),linear-gradient(125deg,#0e244a,#061330);border-radius:28px;border-color:#c5ddff3d;box-shadow:inset 0 1px 0 #ffffff30,0 25px 60px #00091d40;}
.join-band h2{font-size:84px;}
.crest-panel{background:radial-gradient(ellipse,#0c2753,#010d2b 70%);border-radius:24px;min-height:610px;}
.crest-panel .club-yali-stripes{width:240px;height:auto;margin-top:-30px;}
.crest-panel>.eyebrow{margin-top:20px;position:relative;z-index:1;}
.squad-placeholder{display:none;}
.empty-state{background:linear-gradient(140deg,#152b4e70,#03112e);border-color:#bed6f333;border-radius:20px;}
dialog{background:linear-gradient(145deg,#0b2041f7,#020e28fa);border-color:#d0e3ff50;border-radius:24px;}
dialog::backdrop{background:#00071cde;}
.lightbox-image-wrap{background:#010a20;border-radius:14px;}
.icon-button{background:#0c2343;}
.icon-button:hover{background:#233c5d;}
.contact-card textarea{background:#010c24a3;}
.kinetic-type{width:100%;overflow:hidden;padding:45px 0 55px;pointer-events:none;border-block:1px solid #c2d8f011;}
.kinetic-type span{display:block;white-space:nowrap;font:600 clamp(110px,16vw,240px)/.9 var(--heading);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px #bed6f333;transform:translateX(var(--kinetic-x,-6%));}
/* Portrait cards: an actual card prototype, with no invented member information. */
.squad-showcase{padding-block:60px 120px;}
.squad-showcase .section-heading h2{font-size:clamp(54px,6.1vw,88px);line-height:.98;}
.squad-showcase .section-heading{align-items:flex-end;}
.squad-showcase .section-heading .button{font-size:11px;}
.squad-disclosure{font-size:11px;max-width:630px;line-height:1.8;margin-top:-12px;margin-bottom:40px;}
.squad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;perspective:1600px;padding-block:10px 42px;}
.squad-card{
  --tilt-x:0deg;--tilt-y:0deg;--deck-progress:1;
  position:relative;height:590px;border:1px solid #d0e4ff55;border-radius:24px;
  background:#05132c;overflow:hidden;isolation:isolate;
  transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(calc((1 - var(--deck-progress)) * 60px));
  box-shadow:inset 0 1px 0 #fff5,0 25px 65px #00061580;
  transition:transform .25s var(--ease),border-color .4s,box-shadow .4s;
}
.squad-card:nth-child(2){margin-top:42px;}
.squad-card:hover,.squad-card:focus-within{border-color:#daecffb3;box-shadow:0 30px 70px #00071999,0 0 35px #a5cfff0c;z-index:4;}
.squad-portrait{position:absolute;inset:0;overflow:hidden;}
.squad-portrait img{position:absolute;top:0;width:300%;height:auto;max-width:none;left:var(--portrait-position);filter:saturate(.5) contrast(1.04);transition:filter .6s,transform .8s var(--ease);}
.squad-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#010b23 2%,#010d2be6 14%,#010d2b22 53%,#010d2b00 75%,#010d2b4d);}
.squad-card:hover .squad-portrait img{filter:saturate(.75) contrast(1.04);}
.squad-position{position:absolute;top:28px;left:25px;z-index:2;font:600 34px/1 var(--heading);text-shadow:0 2px 15px #0008;}
.squad-position small{display:block;font:600 7px/1.5 var(--body);letter-spacing:.16em;margin-top:5px;}
.squad-badge{position:absolute;z-index:2;right:25px;top:25px;width:35px;height:auto;}
.squad-index{position:absolute;top:80px;left:18px;font:600 148px/1 var(--heading);color:transparent;-webkit-text-stroke:1px #d4e6ff26;pointer-events:none;}
.squad-glint{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(120deg,transparent 15%,#e3f3ff00 35%,#d7ebff13 46%,#fff2 48%,#c6e0ff08 50%,transparent 63%);background-size:220% 100%;background-position:var(--foil-x,60%) 0;opacity:.45;mix-blend-mode:screen;}
.squad-caption{position:absolute;z-index:5;bottom:42px;left:25px;right:25px;}
.squad-caption .eyebrow{font-size:7px;color:#c0d1e6;letter-spacing:.13em;margin-bottom:9px;}
.squad-caption h3{font:600 clamp(38px,4.1vw,60px)/.98 var(--heading);letter-spacing:-.02em;}
.squad-caption>p{color:#bbcce1;font-size:11px;line-height:1.7;margin-top:10px;}
.squad-toggle{width:100%;margin-top:23px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 17px;min-height:45px;border-radius:999px;border:1px solid #d4e7ff50;background:linear-gradient(120deg,#e0eeff22,#d3e7ff05);backdrop-filter:blur(16px);font-size:10px;box-shadow:inset 0 1px 0 #ffffff40;}
.squad-toggle:hover{background:#a2bfe833;}
.squad-toggle svg{height:16px;width:16px;transition:transform .35s var(--ease);}
.squad-toggle[aria-expanded="true"] svg{transform:rotate(45deg);}
.concept-stamp{position:absolute;bottom:16px;left:25px;right:25px;font-size:6px;letter-spacing:.1em;color:#9fb2cf;z-index:6;}
.squad-profile{position:absolute;inset:85px 14px 107px;padding:25px;z-index:4;border:1px solid #d6e9ff42;border-radius:18px;background:linear-gradient(135deg,#314965c9,#071731eb);backdrop-filter:blur(24px) saturate(130%);box-shadow:inset 0 1px 0 #fff4,0 20px 55px #0006;overflow:auto;animation:profile-open .42s var(--ease) both;}
.squad-profile .eyebrow{font-size:7px;}
.squad-profile h4{font:600 38px/1.02 var(--heading);margin:16px 0;}
.squad-profile>p{font-size:10px;line-height:1.8;}
.squad-profile dl{margin:20px 0;}
.squad-profile dl>div{border-top:1px solid #d0e2ff24;padding:8px 0;display:flex;justify-content:space-between;gap:15px;font-size:9px;}
.squad-profile dt{color:#a4bad4;}
.squad-profile dd{margin:0;text-align:right;}
.squad-profile .profile-footnote{font-size:8px;}
.squad-card.expanded .squad-caption h3,.squad-card.expanded .squad-caption>.eyebrow,.squad-card.expanded .squad-caption>p{visibility:hidden;}
.squad-card.expanded .squad-portrait img{filter:saturate(.1) brightness(.55);}
.squad-card.expanded .squad-caption{bottom:42px;}
.squad-catalog{padding-block:5px 70px;}
.squad-catalog>.filter-pills{display:inline-flex;}
.squad-catalog .squad-grid{padding-top:20px;}
.squad-grid.filtered .squad-card:nth-child(n){margin-top:0;}
.squad-editorial{display:flex;justify-content:space-between;gap:30px;border-block:1px solid var(--line);padding:35px 0;margin-top:35px;}
.squad-editorial p{max-width:550px;font-size:12px;}
.footer-brand{font-size:32px;}
.squad-profile[hidden]{display:none;}
@keyframes profile-open{from{opacity:0;transform:translateY(25px) scale(.96);clip-path:inset(18% 0 0 round 18px)}to{opacity:1;transform:none;clip-path:inset(0 round 18px)}}
@media(min-width:1101px){.site-header{max-width:1360px;}.site-header nav>a:not(.button){font-size:10px;}}
@media(max-width:1100px){
  .site-header nav{gap:15px;}.site-header nav>a[aria-current]{padding-inline:9px;}
  .hero h1{font-size:10.3vw;}.hero-lens{width:240px;height:240px;top:35%;right:2%;opacity:.6;}.lens-type{font-size:90px;}
  .squad-grid{gap:18px;}.squad-card{height:530px;}.squad-caption{left:20px;right:20px;}.squad-caption h3{font-size:43px;}
  .squad-position{top:22px;left:20px;}.squad-badge{right:20px;top:20px;}.squad-profile{padding:20px;}.squad-profile h4{font-size:32px;}.squad-profile dl>div{flex-direction:column;gap:3px;}.squad-profile dd{text-align:left;}
  .join-band h2{font-size:70px;}
}
@media(max-width:850px){
  .site-header nav{background:linear-gradient(130deg,#11284afa,#03112bfa);backdrop-filter:blur(24px);}
  .site-header nav>a[aria-current]{padding-inline:12px;}.site-header nav>a[aria-current]:after{bottom:50%;}
  .site-header{border-radius:18px;}.hero-lens{display:none;}.hero h1{font-size:10.5vw;}
  .club-ribbon{gap:20px;font-size:8px;letter-spacing:.12em;}.club-ribbon a{font-size:8px;gap:10px;}
  .squad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}.squad-card{height:570px;}.squad-card:nth-child(2){margin-top:35px;}.squad-card:nth-child(3){margin-top:0;}
  .squad-caption h3{font-size:50px;}.squad-showcase .section-heading{align-items:flex-start;flex-direction:column;gap:18px;}.squad-showcase .section-heading .button{padding:0;min-height:40px;}
  .squad-profile h4{font-size:38px;}.squad-profile dl>div{flex-direction:row;gap:10px;}.squad-profile dd{text-align:right;}
  .join-band h2{font-size:60px;}.featured-overlay h2{font-size:65px;}
}
@media(max-width:600px){
  .hero{height:850px;min-height:850px;clip-path:none;}.hero h1{font-size:clamp(54px,12.2vw,73px);letter-spacing:-.025em;}
  .hero-content{padding-top:167px;}.hero-glass{border-radius:18px;}.hero-bottom{bottom:62px;}
  .brand img{width:35px;height:37px;}.site-header{background:linear-gradient(130deg,#233c5b77,#071737cc);backdrop-filter:blur(18px);}
  .club-ribbon{padding:23px 0;gap:12px;justify-content:space-between;font-size:7px;letter-spacing:.1em;flex-wrap:wrap;}.club-ribbon a{width:100%;justify-content:space-between;margin-top:7px;font-size:10px;}
  .story-visual{border-radius:85px 18px 18px 18px;}.chapter h2{font-size:54px;}
  .squad-showcase{padding-block:35px 55px;}.squad-showcase .section-heading h2{font-size:clamp(43px,10.9vw,62px);}.squad-disclosure{font-size:10px;margin-bottom:25px;margin-top:0;}
  .squad-grid{grid-template-columns:1fr;gap:25px;padding-bottom:5px;}.squad-card{height:580px;max-width:420px;width:100%;margin-inline:auto;transform:none!important;}.squad-card:nth-child(n){margin-top:0;}
  .squad-caption h3{font-size:58px;}.squad-caption{left:25px;right:25px;}.squad-position{left:25px;top:26px;}.squad-badge{right:25px;top:25px;}.squad-profile{inset:85px 16px 107px;padding:24px;}
  .squad-profile h4{font-size:38px;}.squad-profile>p{font-size:11px;}.squad-profile dl>div{font-size:10px;}.squad-profile .profile-footnote{font-size:9px;}
  .squad-catalog>.filter-pills{display:flex;flex-wrap:wrap;border-radius:18px;}.squad-catalog .filter-pills button{flex:1 1 40%;}
  .squad-editorial{flex-direction:column;gap:18px;margin-top:25px;padding:28px 0;}.squad-editorial p{font-size:11px;}
  .kinetic-type{padding:28px 0 35px;}.kinetic-type span{font-size:104px;transform:translateX(var(--kinetic-x,-5%));}
  .editorial-copy h3{font-size:67px;}.editorial-event{border-radius:20px;}.featured-overlay h2{font-size:53px;}
  .join-band{border-radius:22px;padding:36px 25px;}.join-band h2{font-size:60px;}.footer-brand{font-size:25px;}
  .crest-panel{min-height:550px;}.crest-panel .club-yali-stripes{width:220px;margin-top:-20px;}
  body[data-page="squad"] .page-title-row h1{font-size:clamp(51px,13.6vw,73px);}
}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
  .hero-media{transform:scale(var(--hero-scale,1.035)) translateY(var(--hero-y,0px))!important;}
  .hero-content{transform:translateY(var(--hero-text-y,0px))!important;}
  .motion-pending{opacity:0;translate:0 22px;}
  .motion-enter{animation:phone-entrance .65s cubic-bezier(.2,.7,.2,1) both;}
  .motion-pending:focus-within,.motion-enter:focus-within{opacity:1;translate:none;animation:none;}
}
@keyframes phone-entrance{
  from{opacity:0;translate:0 22px;}
  to{opacity:1;translate:0 0;}
}
.squad-rotation-controls{display:flex;align-items:center;gap:20px;padding:0 0 20px;}
.squad-rotation-controls button{border:1px solid #d0e4ff55;border-radius:999px;background:#b7d7ff0d;color:inherit;min-height:44px;padding:10px 19px;font-size:12px;cursor:pointer;}
.squad-rotation-controls button:focus-visible{outline:2px solid #e5f2ff;outline-offset:4px;}
.squad-rotation-controls button:disabled{opacity:.5;cursor:default;}
.rotation-status{font-size:12px;color:#bbcee5;margin:0;}
.rotation-arrows{display:flex;gap:10px;margin-left:auto;}
.rotation-arrows button{font-size:22px;line-height:1;min-width:48px;}
.squad-carousel .squad-grid{grid-template-columns:repeat(var(--rotation-columns,3),minmax(0,1fr));width:100%;max-width:calc(var(--rotation-columns,3)*420px + (var(--rotation-columns,3) - 1)*24px);margin-inline:auto;touch-action:pan-y pinch-zoom;}
.squad-carousel .squad-card{--deck-progress:1!important;margin-top:0;}
.squad-carousel .squad-card[hidden]{display:none!important;}
.squad-carousel .motion-pending{opacity:1;translate:none;}
.squad-carousel .rotation-enter{animation:squad-arrive .45s ease-out;}
.squad-rotation-hint{display:none;}
@keyframes squad-arrive{from{opacity:.25;translate:0 12px;}to{opacity:1;translate:0 0;}}
@media(max-width:850px){
  .squad-carousel .squad-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}
  .squad-carousel .squad-card{height:570px;width:100%;margin-top:0;}
  .squad-rotation-controls{gap:12px;flex-wrap:wrap;}
  .squad-rotation-controls .rotation-toggle{font-size:11px;padding-inline:14px;}
  .rotation-status{font-size:11px;}
  .rotation-arrows{gap:6px;}
  .rotation-arrows button{padding-inline:10px;min-width:44px;}
  .squad-rotation-hint{display:block;text-align:center;font-size:11px;color:#bbcee5;margin-top:16px;}
}
@media(prefers-reduced-motion:reduce){
  .squad-carousel .rotation-enter{animation:none;}
  .motion-pending,.motion-enter{opacity:1;translate:none;animation:none!important;}
  .hero{clip-path:none;}.hero-lens,.squad-card,.kinetic-type span{transform:none!important;}
  .squad-card,.event-card{transition:none!important;}.squad-glint{display:none;}
  .squad-profile{animation:none!important;}.liquid-surface::before{background:none;}
}
@supports not (backdrop-filter:blur(1px)){
  .site-header,.hero-glass,.squad-profile,.squad-toggle{background:#102443f5;}
}