/* Winter Ball Updates · friends.css: the masthead's free banners (friends.js). A 300x250 card, scaled by masthead.css into the slot's box at each width.
   The two faces turn edge-on in turn: never backface-visibility, never preserve-3d. Each turn also shrinks the face just enough that its near edge never
   leaves the box (the perspective makes that edge taller), so no frame is clipped. Each face is one solid colour behind its art, so no seam shows the plate. */
.fb { --fb-bg:#14213D; --fb-fg:#F7F1E3; --fb-nm:#F7F1E3; --fb-go:#F26B1D; --fb-gf:#14213D; --fb-ln:#F26B1D; --fb-bbg:#F7F1E3; --fb-bfg:#14213D; --fb-bgo:#14213D; --fb-bgf:#F7F1E3;
  cursor:pointer; font-family:var(--fb, "Inter"), system-ui, sans-serif; background:#0D1830; }
.fb.face-c { --fb-bg:#F7F1E3; --fb-fg:#14213D; --fb-nm:#14213D; --fb-go:#14213D; --fb-gf:#F7F1E3; --fb-bbg:#14213D; --fb-bfg:#F7F1E3; --fb-bgo:#F26B1D; --fb-bgf:#14213D; }
.fb.face-o { --fb-bg:#F26B1D; --fb-fg:#14213D; --fb-nm:#14213D; --fb-go:#14213D; --fb-gf:#F7F1E3; --fb-ln:#14213D; --fb-bbg:#14213D; --fb-bfg:#F7F1E3; --fb-bgo:#F26B1D; --fb-bgf:#14213D; }
.fb.face-no { --fb-nm:#F26B1D; }
.fb, .fb:hover, .fb:focus, .fb:visited { color:var(--fb-fg); text-decoration:none; }
.fb .art { position:absolute; left:0; top:0; display:block; width:300px; height:124px; }
.fb b, .fb i { font-style:normal; }
/* the two faces */
.fb-in { position:absolute; inset:0; perspective:1400px; }
.fb-s { position:absolute; inset:0; overflow:hidden; visibility:hidden; transform:rotateY(90deg); transform-origin:50% 50%; }
.fb-in[data-side="front"] .fb-fr, .fb-in[data-side="back"] .fb-bk { visibility:visible; transform:none; }
.fb-fr { background:var(--fb-bg); }
.fb-bk { background:var(--fb-bbg); color:var(--fb-bfg); }
/* the turn: out to edge-on, then in from edge-on, always the same way round */
@keyframes fb-out { 0% { transform:rotateY(0deg) scale(1); } 45% { transform:rotateY(-30deg) scale(.932); } 75% { transform:rotateY(-60deg) scale(.882); } 100% { transform:rotateY(-90deg) scale(.864); } }
@keyframes fb-in { 0% { transform:rotateY(90deg) scale(.864); } 25% { transform:rotateY(60deg) scale(.882); } 55% { transform:rotateY(30deg) scale(.932); } 100% { transform:rotateY(0deg) scale(1); } }
.fb-in.to-back .fb-fr, .fb-in.to-front .fb-bk { visibility:visible; animation:fb-out .3s linear both; }
.fb-in.to-back .fb-bk, .fb-in.to-front .fb-fr { visibility:visible; animation:fb-in .34s linear .3s both; }
/* the front: the approved art, the name under it */
.fb-nm { position:absolute; left:0; right:0; top:124px; bottom:0; padding:0 12px; box-sizing:border-box; border-top:3px solid var(--fb-ln); display:flex; flex-direction:column; justify-content:center; color:var(--fb-nm); font-family:var(--fd, "Saira"), "Arial Narrow", sans-serif; font-weight:800; font-stretch:76%; line-height:.98; white-space:nowrap; }
.fb-nm b { display:block; font-weight:800; }
.fb-hint { position:absolute; right:10px; bottom:6px; font:700 18px/1 var(--fb, "Inter"), system-ui, sans-serif; color:var(--fb-nm); opacity:0; transition:opacity .15s; }
/* the back: who, the line, where, and the way in */
.fb-bk { display:flex; flex-direction:column; padding:14px 12px 11px; box-sizing:border-box; }
.fb-bh { flex:none; padding-bottom:7px; border-bottom:3px solid #F26B1D; font-family:var(--fd, "Saira"), "Arial Narrow", sans-serif; font-weight:800; font-stretch:76%; line-height:1.05; white-space:nowrap; color:inherit; }
.fb-ln { flex:1 1 auto; display:flex; align-items:center; margin:0; font:600 19px/25px var(--fb, "Inter"), system-ui, sans-serif; color:inherit; text-wrap:balance; }
.fb-foot { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; height:30px; }
.fb-tag { min-width:0; font:600 13.5px/30px var(--fb, "Inter"), system-ui, sans-serif; white-space:nowrap; color:inherit; }
.fb-go { flex:none; height:30px; padding:0 10px; border-radius:4px; box-sizing:border-box; background:var(--fb-bgo); color:var(--fb-bgf); font:700 14px/30px var(--fb, "Inter"), system-ui, sans-serif; white-space:nowrap; transition:background-color .15s, color .15s; }
/* the still card: reduced motion or the dial off; the approved layout, everything on one face */
.fb-still { background:var(--fb-bg); }
.fb-pn { position:absolute; left:0; right:0; top:124px; height:126px; padding:0 12px; box-sizing:border-box; border-top:3px solid var(--fb-ln); }
.fb-pt { display:block; margin-top:5px; height:33px; font:800 33px/33px var(--fd, "Saira"), "Arial Narrow", sans-serif; font-stretch:76%; color:var(--fb-nm); white-space:nowrap; }
.fb-pt.lg { font-size:31px; } .fb-pt.xl { font-size:26px; font-stretch:66%; }
.fb-pn p { margin:2px 0 0; height:38px; overflow:hidden; font:500 15px/19px var(--fb, "Inter"), system-ui, sans-serif; color:var(--fb-fg); }
.fb-pn .fb-foot { position:absolute; left:12px; right:12px; bottom:9px; height:24px; }
.fb-pn .fb-tag { line-height:24px; color:var(--fb-fg); }
.fb-pn .fb-go { height:24px; padding:0 9px; font-size:13.5px; line-height:24px; background:var(--fb-go); color:var(--fb-gf); }
/* hover and keyboard: the arrow on the front, the button on the back; a ring inside the card, above both faces */
.fb::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow:inset 0 0 0 0 #FFC14D; }
.fb:focus { outline:none; }
.fb:focus-visible::after { box-shadow:inset 0 0 0 4px #FFC14D; }
@media (hover:hover) {
  .fb:hover .fb-hint { opacity:1; }
  .fb:hover .fb-go { background:#FFD27A; color:#14213D; }
}
.fb:focus-visible .fb-hint { opacity:1; }
.fb:focus-visible .fb-go { background:#FFD27A; color:#14213D; }
/* the 228 px card in the 229 px box (1100 to 1320): the width alone comes up that last pixel, so the plate never shows down its sides */
@media (min-width: 1100px) and (max-width: 1320px) { .ad-box > .fb { transform:scale(calc(229 / 300), var(--sb-card)); } }