@font-face{font-family:Armstrong;src:url("assets/fonts/Armstrong.otf") format("opentype");font-display:swap}
@font-face{font-family:Armstrong;src:url("assets/fonts/Armstrong-Extrabold.otf") format("opentype");font-weight:800;font-display:swap}
:root{--red:#b80c17;--black:#050505;--white:#fff}
*{box-sizing:border-box}html,body{margin:0;background:#fff;color:#050505;font-family:Armstrong,Arial,sans-serif}
body{min-width:1100px}.page{min-height:100vh;background:linear-gradient(to right,var(--red) 0 330px,#fff 330px 100%)}
/* LOCKED SITE SHELL: red is continuous back layer; pinstripe and masthead cross over it */
.pin-top{height:48px;position:relative;background:linear-gradient(to bottom,transparent 0 24px,var(--black) 24px 30px,transparent 30px 48px)}
.mast{height:95px;background:var(--black);position:relative;display:flex;justify-content:flex-end;align-items:center;padding-right:7vw}
.mast img{width:560px;max-height:132px;object-fit:contain;position:relative;z-index:2}
.shell{display:grid;grid-template-columns:330px 1fr;min-height:calc(100vh - 143px)}
.rail{background:transparent;padding:18px 0 0 12px}
.navmap{position:relative;width:154px}.navmap img{display:block;width:100%;height:auto}
.hit{position:absolute;left:0;right:0;display:block}.h1{top:0;height:12.31%}.h2{top:17.49%;height:12.41%}.h3{top:35.08%;height:12.36%}.h4{top:52.61%;height:12.36%}.h5{top:70.15%;height:12.41%}.h6{top:87.74%;height:12.26%}
.hit:focus-visible,.side-hit:focus-visible,.menu-hit:focus-visible{outline:4px solid #1e90ff;outline-offset:2px}
.content{padding:42px 7vw 10px 46px;min-height:calc(100vh - 143px);display:flex;flex-direction:column}
.footer{display:flex;justify-content:center;margin:auto auto 0;padding-top:28px;width:100%}.footer img{width:min(600px,62%);height:auto;display:block}

/* HOMEPAGE — approved layout, now on locked shell stacking */
.home-page{min-width:1100px;overflow-x:hidden;background:linear-gradient(to right,var(--red) 0 330px,#fff 330px 100%)}
.home-page .top-space{height:48px;background:linear-gradient(to bottom,transparent 0 24px,var(--black) 24px 30px,transparent 30px 48px)}
.home-page .home-header{height:95px;background:var(--black);padding:0 7vw 0 0;display:flex;align-items:center;justify-content:flex-end}
.home-page .home-header img{width:560px;max-height:132px;object-fit:contain}
.home-shell{display:grid;grid-template-columns:330px 1fr;min-height:calc(100vh - 143px)}
.home-rail{background:transparent;position:relative;padding:18px 0 0 12px}
.side-menu-map{position:relative;width:154px}.side-menu-map>img{display:block;width:100%;height:auto}
.side-hit,.menu-hit{position:absolute;display:block;z-index:2}
.side-home{left:0;right:0;top:0;height:12.31%}.side-baseball{left:0;right:0;top:17.49%;height:12.41%}.side-basketball{left:0;right:0;top:35.08%;height:12.36%}.side-who{left:0;right:0;top:52.61%;height:12.36%}.side-creation{left:0;right:0;top:70.15%;height:12.41%}.side-fan{left:0;right:0;top:87.74%;height:12.26%}
.home-main{position:relative;display:grid;grid-template-columns:minmax(360px,.86fr) minmax(590px,1.14fr);grid-template-rows:auto auto;column-gap:24px;align-items:start;padding:55px clamp(20px,3vw,58px) 22px}
.spinner-panel{display:flex;justify-content:center;align-items:flex-start;min-width:0;padding-top:12px;overflow:visible}.home-spinner{display:block;width:285%;max-width:none;height:auto;object-fit:contain;background:transparent;transform:translateY(-13%);pointer-events:none}
.home-menu{min-width:0;padding-top:10px}.home-menu-map{position:relative;width:100%;max-width:720px;margin:0 auto}.home-menu-map>img{display:block;width:100%;height:auto}
.menu-baseball{left:5%;top:22%;width:43%;height:9.5%}.menu-basketball{left:50%;top:22%;width:44%;height:9.5%}.menu-who{left:28%;top:43%;width:44%;height:9.5%}.menu-creation{left:28%;top:59.2%;width:44%;height:9.5%}.menu-fan{left:28%;top:75.5%;width:44%;height:9.5%}
.home-footer{grid-column:1/-1;align-self:end;display:flex;justify-content:center;padding-top:8px}.home-footer img{width:min(640px,58%);height:auto;display:block}

/* GALLERIES — approved enlarged 3-over-2 player arrangement */
.title{text-align:center;font-size:54px;line-height:1;margin:0 0 22px;font-weight:800;letter-spacing:.025em}
.gallery{width:100%;max-width:1250px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:20px 18px;align-items:start}
.player{grid-column:span 2;text-align:center;text-decoration:none;color:#050505}.player:nth-child(4){grid-column:2/span 2}.player:nth-child(5){grid-column:4/span 2}
.name{font-size:24px;font-weight:800;margin:0 0 5px;letter-spacing:.02em}.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}.card img{display:block;width:100%;height:auto}
.edition{font-family:Arial,sans-serif;font-size:12px;line-height:1.05;text-transform:uppercase;margin-top:5px}.edition strong{display:block;font-size:12px;font-weight:500}.edition .red{color:#c20d19}

/* PLAYER MULTIPLIER — approved */
.player-title{font-size:54px;line-height:1;margin:0 0 30px;font-weight:800;letter-spacing:.02em}
.versions{display:grid;grid-template-columns:1fr 1fr;gap:48px;width:100%;align-items:start}.version{min-width:0}.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pair img{display:block;width:100%;height:auto}
.edition-heading{position:relative;margin:14px 0 0;text-align:center}.edition-heading:before{content:'';position:absolute;left:0;right:0;top:15px;height:3px;background:#050505;z-index:0}
.edition-text{position:relative;z-index:1;display:inline-block;background:#fff;padding:0 12px;text-align:center;white-space:nowrap;font-size:30px;line-height:30px;font-weight:400}.edition-text small{display:block;font-size:22px;line-height:24px;margin-top:5px;background:#fff;padding:0 7px}
.price{text-align:center;font-family:Arial,sans-serif;font-weight:700;font-size:24px;color:#b80c17;margin:9px 0 10px}.order{display:block;width:210px;max-width:46%;margin:0 auto;text-decoration:none}.order img{display:block;width:100%;height:auto}

/* JANUARY 2027 BRIDGE */
.business-content{padding:42px 7vw 10px 46px;min-height:calc(100vh - 143px);display:flex;flex-direction:column}.business-message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px 0 50px}.business-message h1{margin:0;font-weight:400;letter-spacing:.015em;line-height:.92}.business-message .open{display:block;font-size:72px;margin-bottom:58px}.business-message .month{display:block;font-size:66px;margin-bottom:30px}.business-message .year{display:block;font-size:170px;font-weight:800;line-height:.75}.business-content .footer{flex:none}

/* VIDEO PAGES — NEWFRAME_02, white page is the matte */
.video-stage{width:100%;max-width:1180px;margin:0 auto}.framed-video{position:relative;width:100%;aspect-ratio:2048/1269;background:#fff}
.framed-video video{position:absolute;left:6.69%;top:10.72%;width:86.57%;height:78.57%;object-fit:cover;background:#000;display:block;z-index:1}
.framed-video::after{content:"";position:absolute;inset:0;background:url("assets/shared/NEWFRAME_02.png") center/100% 100% no-repeat;pointer-events:none;z-index:2}
.video-label{text-align:right;margin:10px 1.4% 0 auto;line-height:1;width:max-content;max-width:80%}.video-label h1{font-size:25px;font-weight:400;letter-spacing:.015em;margin:0 0 6px}.video-label p{font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;margin:0;text-transform:uppercase}

/* FAN MAIL — simple functional destination in established shell */
.fan-content{justify-content:space-between}.fan-message{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:50px}
.fan-message h1{font-size:64px;margin:0 0 30px;font-weight:800}.fan-message p{font-family:Arial,sans-serif;font-size:15px;letter-spacing:.08em;margin:0 0 20px}.fan-message a{font-family:Arial,sans-serif;font-size:22px;font-weight:700;color:#b80c17;text-decoration:none}.fan-message a:hover{text-decoration:underline}

@media(max-width:1250px){
body,.home-page{min-width:900px}.page,.home-page{background:linear-gradient(to right,var(--red) 0 240px,#fff 240px 100%)}.shell,.home-shell{grid-template-columns:240px 1fr}
.mast img,.home-page .home-header img{width:500px}.navmap,.side-menu-map{width:150px}.content,.business-content{padding-left:28px}.home-main{grid-template-columns:1fr 1.15fr;padding:38px 24px 20px}
.gallery{max-width:100%;gap:16px 10px}.title,.player-title{font-size:46px}.name{font-size:20px}.versions{gap:28px}.edition-text{font-size:24px;line-height:26px}.edition-text small{font-size:18px}.edition-heading:before{top:13px}
.business-message .open{font-size:56px}.business-message .month{font-size:52px}.business-message .year{font-size:135px}.video-label h1{font-size:21px}.video-label p{font-size:10px}
}


/* MOBILE HOMEPAGE — desktop rules above remain untouched */
.mobile-home-art{display:none}
@media (max-width:600px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 body,.home-page{min-width:0}
 .home-page{min-height:100vh;background:linear-gradient(to right,var(--red) 0 92px,#fff 92px 100%)}
 .home-page .top-space{height:30px;background:linear-gradient(to bottom,transparent 0 14px,var(--black) 14px 18px,transparent 18px 30px)}
 .home-page .home-header{height:72px;padding:0;display:flex;justify-content:center;align-items:center;overflow:visible}
 .home-page .home-header img{width:min(270px,72vw);max-height:88px;object-fit:contain}
 .home-shell{display:grid;grid-template-columns:92px minmax(0,1fr);min-height:calc(100vh - 102px)}
 .home-rail{padding:12px 6px 0;min-width:0}
 .side-menu-map{width:80px;max-width:100%;margin:0 auto}
 .home-main{display:flex;flex-direction:column;min-width:0;padding:10px 10px 16px;overflow:hidden}
 .spinner-panel{order:1;position:relative!important;width:100%;min-width:0!important;min-height:300px!important;height:300px;padding:0!important;overflow:hidden!important;z-index:1!important}
 .spinner-panel .home-spinner{position:absolute!important;width:285%!important;max-width:none!important;height:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;pointer-events:none!important}
 .home-menu{display:none!important}
 .mobile-home-art{order:2;display:flex;flex-direction:column;align-items:center;width:100%;margin:2px auto 0}
 .mobile-season{display:block;width:min(94%,255px);height:auto;margin:0 auto 10px}
 .mobile-thecard{display:block;width:min(96%,265px);height:auto;margin:0 auto}
 .home-footer{order:3;display:flex;justify-content:center;width:100%;padding:16px 0 0}
 .home-footer img{width:min(96%,265px);height:auto}
}


/* MOBILE HOMEPAGE — PASS 2: tighten spinner canvas and vertical composition */
@media (max-width:600px){
  .home-main{padding-top:0}

  .spinner-panel{
    min-height:390px !important;
    height:390px !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .spinner-panel .home-spinner{
    width:330% !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  .mobile-home-art{
    margin:-8px auto 0 !important;
  }

  .mobile-season{
    width:min(92%,250px) !important;
    margin:0 auto 8px !important;
  }

  .mobile-thecard{
    width:min(96%,265px) !important;
    margin:0 auto !important;
  }

  .home-footer{
    padding-top:12px !important;
  }
}


/* MOBILE HOMEPAGE — PASS 3: aggressive leash */
@media (max-width:600px){
  /* Keep HIM at the approved scale, but stop reserving acreage below him. */
  .spinner-panel{
    min-height:390px !important;
    height:390px !important;
    overflow:hidden !important;
  }

  /* Pull the artwork group up into the otherwise-empty spinner canvas space. */
  .mobile-home-art{
    position:relative !important;
    z-index:3 !important;
    margin:-245px auto 0 !important;
  }

  .mobile-season{
    margin-bottom:6px !important;
  }

  .home-footer{
    position:relative !important;
    z-index:3 !important;
    padding-top:10px !important;
  }
}


/* MOBILE HOMEPAGE — PASS 5: short window, move HIM inside it */
@media (max-width:600px){
  .home-main{
    padding-top:0 !important;
  }

  .spinner-panel{
    min-height:500px !important;
    height:500px !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .spinner-panel .home-spinner{
    width:330% !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-63%) !important;
  }

  .mobile-home-art{
    position:relative !important;
    z-index:3 !important;
    margin:-110px auto 0 !important;
  }

  .mobile-season{margin-bottom:6px !important}
  .home-footer{padding-top:10px !important}
}


/* MOBILE HOMEPAGE — PASS 6: burial-ground rule */
@media (max-width:600px){

  /* LOCKED: card scale stays exactly as approved.
     Move the visible spinner composition north, not left. */
  .spinner-panel .home-spinner{
    width:330% !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-86%) !important;
  }

  /* Bring the approved season artwork north with HIM. */
  .mobile-home-art{
    margin:-385px auto 0 !important;
  }

  /* Season graphic remains at its approved size. */
  .mobile-season{
    width:min(92%,250px) !important;
    margin:0 auto 8px !important;
  }

  /* THE CARD RE-IMAGINED may span the FULL phone/page width.
     It deliberately crosses the red stripe. */
  .mobile-thecard{
    position:relative !important;
    display:block !important;
    width:calc(100vw - 20px) !important;
    max-width:none !important;
    height:auto !important;
    left:calc(-1 * (25vw - 10px)) !important;
    margin:0 auto !important;
  }

  /* Copyright gets the same full-width treatment and is centered
     across the phone rather than only inside the white column. */
  .home-footer{
    position:relative !important;
    width:calc(100vw - 20px) !important;
    max-width:none !important;
    left:calc(-1 * (25vw - 10px)) !important;
    margin:0 auto !important;
    padding:12px 6px 14px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }
}


/* MOBILE HOMEPAGE — PASS 7: HIM into the waiting room */
@media (max-width:600px){

  /* Keep the approved scale; move the visible rotating card north into
     the open white space above INAUGURAL SEASON. */
  .spinner-panel .home-spinner{
    width:330% !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-103%) !important;
  }

  /* Keep INAUGURAL SEASON at its approved size and position relationship. */
  .mobile-home-art{
    margin:-385px auto 0 !important;
  }

  .mobile-season{
    width:min(92%,250px) !important;
    margin:0 auto 8px !important;
  }

  /* Slightly reduce THE CARD graphic, center across the whole phone,
     and explicitly layer it ABOVE the red rail. */
  .mobile-thecard{
    position:relative !important;
    z-index:50 !important;
    display:block !important;
    width:calc(100vw - 42px) !important;
    max-width:none !important;
    height:auto !important;
    left:calc(-1 * (25vw - 21px)) !important;
    margin:0 auto !important;
  }

  /* Same treatment for copyright: slightly smaller than Pass 6,
     centered across the full phone and above the sacred red stripe. */
  .home-footer{
    position:relative !important;
    z-index:50 !important;
    width:calc(100vw - 42px) !important;
    max-width:none !important;
    left:calc(-1 * (25vw - 21px)) !important;
    margin:0 auto !important;
    padding:10px 4px 14px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    font-size:9px !important;
    line-height:1.2 !important;
  }

  /* The rail remains underneath those two intentional full-width elements. */
  .side-rail{
    z-index:1 !important;
  }
}


/* MOBILE HOMEPAGE — PASS 8: NORTH + true foreground */
@media (max-width:600px){

  /* Sizes are LOCKED. Move only HIM north. */
  .spinner-panel .home-spinner{
    width:330% !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-123%) !important;
  }

  /* Put the two bottom elements on a genuine foreground plane,
     above the red rail, while keeping their approved sizes. */
  .mobile-home-art{
    position:relative !important;
    z-index:100 !important;
    isolation:isolate !important;
  }

  .mobile-thecard{
    position:relative !important;
    z-index:1000 !important;
  }

  .home-footer{
    position:relative !important;
    z-index:1000 !important;
  }

  /* Force the red rail/background behind the foreground copy.
     Navigation buttons themselves remain above the rail. */
  .side-rail{
    position:relative !important;
    z-index:0 !important;
  }

  .side-nav,
  .side-nav a{
    position:relative !important;
    z-index:20 !important;
  }
}


/* MOBILE HOMEPAGE — PASS 9: headphones off */
@media screen and (max-width:600px){

  /* Beat the desktop inline !important rule without changing desktop.
     SIZE stays locked; only the visible movie canvas moves north. */
  body.home-page .spinner-panel .home-spinner{
    width:330% !important;
    max-width:none !important;
    height:auto !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-123%) !important;
    margin:0 !important;
  }

  /* Allow the two approved bottom elements to cross the white-column
     boundary and sit over the red rail. */
  body.home-page .home-main{
    overflow:visible !important;
  }

  body.home-page .mobile-home-art{
    overflow:visible !important;
    position:relative !important;
    z-index:100 !important;
  }

  body.home-page .mobile-thecard,
  body.home-page .home-footer{
    z-index:1000 !important;
  }
}


/* MOBILE HOMEPAGE — PASS 10 */
@media screen and (max-width:600px){
  body.home-page .spinner-panel .home-spinner{
    width:330% !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-105%) !important;
  }
  body.home-page .mobile-thecard{
    width:calc(100vw - 68px) !important;
    left:calc(-1 * (25vw - 34px)) !important;
  }
  body.home-page .home-footer{
    width:calc(100vw - 68px) !important;
    left:calc(-1 * (25vw - 34px)) !important;
    font-size:8.5px !important;
  }
}


/* MOBILE HOMEPAGE — PASS 11: final leash */
@media screen and (max-width:600px){

  /* Slightly reduce HIM so no point in the rotation touches the red rail.
     Compensate vertically so his approved position stays essentially locked. */
  body.home-page .spinner-panel .home-spinner{
    width:310% !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-112%) !important;
  }

  /* Pull the complete approved copy group north as one unit.
     Sizes/alignment of SEASON, THE CARD and copyright remain unchanged. */
  body.home-page .mobile-home-art{
    margin:-505px auto 0 !important;
  }
}