/* =====================================================================
   absexxx.com — white / grey / green
   Full-bleed tile wall, sticky top nav, horizontal filter rail.
   No sidebar exists at any breakpoint, so there is no `order` flipping and
   none of the class-collision bugs that came with the osexxx sidebar layout.
   ===================================================================== */

:root{
  --white:#ffffff;
  --paper:#f5f7f6;
  --paper-2:#eef1f0;
  --line:#e2e7e5;
  --line-2:#d3dad7;
  --ink:#11181a;
  --ink-2:#4d5a57;
  --ink-3:#7b8784;

  --green:#12a15b;
  --green-d:#0c7d46;
  --green-l:#e6f6ed;
  --green-ring:rgba(18,161,91,.28);

  --amber:#c98a12;
  --amber-l:#fdf3e2;
  --slate:#8a9491;

  --r:10px;
  --r-s:7px;
  --shadow:0 1px 2px rgba(17,24,26,.06), 0 4px 14px rgba(17,24,26,.05);
  --shadow-h:0 2px 6px rgba(17,24,26,.09), 0 12px 28px rgba(17,24,26,.10);
  --gap:10px;
  --pad:14px;
  --bar-h:58px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.2}
p{margin:0 0 .85em}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px;border-radius:var(--r-s)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------ top bar */
.topbar{
  position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  display:flex;align-items:center;gap:18px;
  height:var(--bar-h);padding:0 var(--pad);
  max-width:2100px;margin:0 auto;
}

/* -------------------------------------------------------------- brand
   "Broadcast A": the first letter IS the mark, so the lockup stays short on
   mobile and the favicon is a symbol rather than a letter in a box. The two
   arcs breathe outward, which reads as transmitting without being loud —
   the whole animation is disabled under prefers-reduced-motion at the bottom
   of this file. */
.brand{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.brand-mark{height:27px;width:auto;flex:0 0 auto;overflow:visible}
.bm-a{fill:var(--green)}
.bm-w1,.bm-w2{fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round}
.bm-w1{opacity:.70;animation:wave1 2.8s ease-in-out infinite}
.bm-w2{opacity:.32;animation:wave2 2.8s ease-in-out .3s infinite}
@keyframes wave1{0%,100%{opacity:.46}50%{opacity:.88}}
@keyframes wave2{0%,100%{opacity:.16}50%{opacity:.48}}
.brand:hover .bm-a{fill:var(--green-d)}
.brand-word{
  font-size:21px;font-weight:800;letter-spacing:-.03em;color:#2b3634;
}

/* used by the live badges on tiles and the model page */
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--green-ring)}
  70%{box-shadow:0 0 0 7px rgba(18,161,91,0)}
  100%{box-shadow:0 0 0 0 rgba(18,161,91,0)}
}

/* category tabs */
.cats{display:flex;align-items:center;gap:2px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{
  padding:8px 14px;border-radius:999px;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.cat:hover{background:var(--paper-2);color:var(--ink)}
.cat.is-on{background:var(--green);color:#fff}

/* search */
.find{position:relative;display:flex;align-items:center;flex:0 0 auto}
.find input{
  width:230px;height:36px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--paper);
  font:inherit;font-size:14px;color:var(--ink);
}
.find input::placeholder{color:var(--ink-3)}
.find input:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 3px var(--green-ring)}
.find-lens{
  display:none;width:36px;height:36px;padding:0;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-2);border-radius:50%;
}
.find-lens svg{width:17px;height:17px;margin:auto;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}

/* ---------------------------------------------------------- page body */
.page{max-width:2100px;margin:0 auto;padding:18px var(--pad) 40px}
.head{margin:4px 0 16px;max-width:78ch}
.head h1{font-size:clamp(21px,2.4vw,29px)}
.lede{margin:8px 0 0;color:var(--ink-2);font-size:14.5px}

/* ------------------------------------------------------- filter rail */
.rail{margin:0 0 16px}
.rail-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.rail-group{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--ink-2);background:var(--white);border:1px solid var(--line);
}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.tagrail{display:flex;gap:6px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none}
.tagrail::-webkit-scrollbar{display:none}
.tagrail-wrap{flex-wrap:wrap;overflow:visible}

/* On a phone a horizontal rail is fine — you swipe it with a thumb. With a mouse it
   is a trap: the scrollbar is hidden and a wheel does not scroll sideways, so the
   tags past the right edge are effectively invisible. Wrap them onto as many rows as
   needed instead. Every tag link is then on screen, which also means every tag page
   is one plain <a> away for a crawler with nothing to scroll or click first. */
@media (min-width:701px){
  .tagrail{flex-wrap:wrap;overflow:visible}
}
.tagchip{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:5px 10px;border-radius:var(--r-s);font-size:12.5px;font-weight:600;
  background:var(--white);border:1px solid var(--line);color:var(--ink-2);
}
.tagchip span{font-weight:500;color:var(--ink-3);font-size:11px}
.tagchip:hover{border-color:var(--green);color:var(--green-d)}
.tagchip.is-on{background:var(--green-l);border-color:var(--green);color:var(--green-d)}

/* ------------------------------------------------------- the tile wall */
.wall{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(208px,1fr));
}
.tile{background:var(--white);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:box-shadow .16s,transform .16s,border-color .16s}
.tile:hover{box-shadow:var(--shadow-h);transform:translateY(-2px);border-color:var(--line-2)}
.tile-img{position:relative;display:block;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.tile-img img{width:100%;height:100%;object-fit:cover}
.tile-noimg{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:38px;font-weight:800;color:var(--line-2);text-transform:uppercase;
}
.tile-badge{
  position:absolute;left:7px;top:7px;display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--ink-2);
  backdrop-filter:saturate(1.3) blur(3px);
}
.tile-badge i{width:6px;height:6px;border-radius:50%;background:var(--slate)}
.s-live  .tile-badge{color:var(--green-d)} .s-live  .tile-badge i{background:var(--green);animation:pulse 2.2s infinite}
.s-away  .tile-badge{color:var(--amber)}   .s-away  .tile-badge i{background:var(--amber)}
.s-priv  .tile-badge{color:#7a5cc4}        .s-priv  .tile-badge i{background:#7a5cc4}
.s-off   .tile-badge{color:var(--ink-3)}
.s-off .tile-img img{filter:grayscale(.72) opacity(.82)}

.tile-hd{
  position:absolute;right:7px;top:7px;padding:2px 6px;border-radius:4px;
  font-size:10px;font-weight:800;letter-spacing:.05em;
  background:rgba(17,24,26,.72);color:#fff;
}
.tile-views{
  position:absolute;right:7px;bottom:7px;padding:2px 7px;border-radius:999px;
  font-size:11px;font-weight:700;background:rgba(17,24,26,.72);color:#fff;
}
.tile-meta{padding:8px 10px 10px}
.tile-name{
  display:block;font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tile-name:hover{color:var(--green-d)}
.tile-sub{
  margin:2px 0 0;font-size:12px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.empty{padding:44px 0;text-align:center;color:var(--ink-3)}

/* ------------------------------------------------------------- pager */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin:26px 0 0;flex-wrap:wrap}
.pg{
  min-width:38px;padding:8px 12px;text-align:center;border-radius:var(--r-s);
  font-size:13.5px;font-weight:600;background:var(--white);border:1px solid var(--line);color:var(--ink-2);
}
.pg:hover{border-color:var(--line-2);color:var(--ink)}
.pg.is-on{background:var(--green);border-color:var(--green);color:#fff}
.pg-gap{color:var(--ink-3);padding:0 2px}

/* ------------------------------------------------------- model page */
.page-model{max-width:1180px}
.crumbs{font-size:13px;color:var(--ink-3);margin:0 0 12px;display:flex;gap:7px;flex-wrap:wrap}
.crumbs a:hover{color:var(--green-d)}
.crumbs strong{color:var(--ink-2);font-weight:600}

.stage{
  position:relative;background:#0d1113;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/10;box-shadow:var(--shadow);
}
/* The player container is ONLY in the DOM when a player will actually mount.
   An empty absolutely-positioned box here sits over the poster and eats its clicks.
   The blocked-player script removes it outright rather than hiding it, for the
   same reason. */
.stage-player{position:absolute;inset:0;z-index:2;overflow:hidden}
.stage-player iframe{width:100%;height:100%;border:0;display:block}

/* The poster is always the base layer, so a blocked (transparent, about:blank)
   iframe degrades to a real thumbnail instead of a black rectangle — this works
   even with JavaScript off. */
.stage-poster{position:absolute;inset:0;z-index:1;display:block}
.poster-msg{display:none}
.stage:not(.has-player) [data-v="state"]{display:block}
.stage.is-blocked [data-v="blocked"]{display:block}
.stage.is-small   [data-v="mobile"]{display:block}
.stage.has-player:not(.is-blocked):not(.is-small) .poster-veil{display:none}
.poster-msg small{
  display:block;margin-top:12px;font-size:12px;line-height:1.5;
  font-weight:400;color:rgba(255,255,255,.82);
}
.stage-poster img{width:100%;height:100%;object-fit:cover}
.poster-veil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(13,17,19,.15) 0%,rgba(13,17,19,.72) 100%);
}
.poster-msg{text-align:center;color:#fff;padding:20px;max-width:32ch}
.poster-msg b{display:block;font-size:clamp(16px,2.4vw,21px);font-weight:700;margin-bottom:6px}
.poster-msg i{
  display:inline-block;font-style:normal;font-size:13px;font-weight:600;
  background:var(--green);padding:9px 17px;border-radius:999px;
}
.stage-poster:hover .poster-msg i{background:var(--green-d)}

.bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:14px var(--pad);margin:12px 0 0;
}
.bar-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bar-id h1{font-size:clamp(19px,2.2vw,25px)}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-live{background:var(--green-l);color:var(--green-d)}
.b-live i{animation:pulse 2.2s infinite}
.b-away{background:var(--amber-l);color:var(--amber)}
.b-priv{background:#f1eefb;color:#6a4fb8}
.b-off {background:var(--paper-2);color:var(--ink-3)}

.bar-stats{display:flex;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-size:13px;margin-right:auto}
.bar-stats b{color:var(--ink);font-weight:700}
.pill{background:var(--paper-2);border-radius:4px;padding:1px 7px;font-size:11px;font-weight:800}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--green);color:#fff;
}
.btn:hover{background:var(--green-d)}
.btn-go{box-shadow:0 4px 14px var(--green-ring)}
.btn-ghost{background:transparent;color:var(--green-d);border-color:var(--green)}
.btn-ghost:hover{background:var(--green-l)}

/* Permanent "not loading?" line under the stage. Quiet on purpose: it is shown to
   everyone, so it must not shout. Class name is neutral (see the .pitch note). */
.hint{
  margin:9px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-3);
}
.hint a{color:var(--green-d);font-weight:600;text-decoration:underline}

/* ------------------------------------------------------------- age gate
   Rendered hidden and revealed by JS, so crawlers and no-JS visitors are never
   walled off — an interstitial Googlebot meets is an indexing problem. */
.gate{position:fixed;inset:0;z-index:500;display:grid;place-items:center;
  background:rgba(17,24,26,.72);backdrop-filter:blur(6px);padding:20px}
.gate[hidden]{display:none}
.gate-box{background:var(--white);border-radius:14px;max-width:430px;width:100%;
  padding:26px 24px;text-align:center;box-shadow:0 24px 60px rgba(17,24,26,.32)}
.gate-mark{height:30px;width:auto;margin:0 auto 14px;display:block}
.gate-box h2{font-size:20px;margin:0 0 8px}
.gate-box p{font-size:14px;color:var(--ink-2);margin:0 0 16px}
.gate-box .btn{width:100%;padding:13px 20px;font-size:15px}
.gate-no{display:inline-block;margin-top:12px;font-size:13px;color:var(--ink-3);
  text-decoration:underline}
.gate-note{margin:18px 0 0!important;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px!important;color:var(--ink-3)!important;text-align:left}

.reroute{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.reroute a{color:var(--green-d);font-weight:600;text-decoration:underline}

/* -------------------------------------------------------------- prose */
.prose{max-width:74ch;margin:28px 0 0;color:var(--ink-2);font-size:15px}
.prose h2{font-size:19px;color:var(--ink);margin:24px 0 10px}
.prose h2:first-child{margin-top:0}
.prose-legal{max-width:72ch}
.related{margin:34px 0 0}
.related h2{font-size:19px;margin:0 0 12px}
.related .wall{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}

/* -------------------------------------------------------------- pitch
   NOT named .promo / .banner / .ad-* on purpose: ad blockers ship COSMETIC
   filters that hide elements by those class names, which is why the house
   slots were invisible on the live site even though the HTML was there. */
.pitch{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--r);padding:14px var(--pad);margin:26px 0 0;
}
.pitch img{width:120px;border-radius:var(--r-s)}
.pitch strong{display:block;font-size:14.5px;color:var(--ink)}
.pitch p{margin:2px 0 0;font-size:13.5px;color:var(--ink-2)}
.pitch .btn{margin-left:auto}

/* Full-width creative. Resets everything .pitch adds — the image is the whole ad, so
   no card padding, no accent border, no text. Scales down on narrow screens and never
   past its own natural width on wide ones. */
.pitch-wide{
  display:block;padding:0;border:0;background:none;line-height:0;
  max-width:950px;margin:26px auto 0;overflow:hidden;border-radius:var(--r);
  box-shadow:var(--shadow);
}
.pitch-wide img{width:100%;height:auto;border-radius:var(--r)}
.pitch-wide:hover{box-shadow:var(--shadow-h)}

/* Rotator: several creatives sharing one space. Slides are toggled with the `hidden`
   attribute rather than a CSS class, so a no-JS visitor sees the first slide and
   nothing else — never all three stacked. */
.pitch-rot{position:relative;max-width:950px;margin:26px auto 0}
.rot-slide{
  display:block;line-height:0;overflow:hidden;border-radius:var(--r);
  box-shadow:var(--shadow);
}
.rot-slide[hidden]{display:none}
.rot-slide img{width:100%;height:auto;border-radius:var(--r)}
.rot-slide:hover{box-shadow:var(--shadow-h)}
.rot-dots{display:flex;gap:6px;justify-content:center;margin:9px 0 0}
.rot-dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line-2);transition:background .16s,transform .16s;
}
.rot-dots button.is-on{background:var(--green);transform:scale(1.25)}
.rot-dots button:hover{background:var(--ink-3)}

/* -------------------------------------------------------- big search */
.bigfind{display:flex;gap:8px;margin:0 0 20px;max-width:560px}
.bigfind input{
  flex:1;height:44px;padding:0 16px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--white);font:inherit;font-size:15px;
}
.bigfind input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-ring)}

/* ------------------------------------------------------------ footer */
.foot{background:var(--white);border-top:1px solid var(--line);margin-top:48px}
.foot-in{max-width:2100px;margin:0 auto;padding:26px var(--pad) 34px}
.foot-counts{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin-bottom:18px}
.foot-counts b{color:var(--green-d);font-weight:800}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin:22px 0 14px}
.foot-links a:hover{color:var(--green-d)}
.foot-legal{font-size:12px;line-height:1.65;color:var(--ink-3);max-width:96ch;margin:0}

/* ========================================================== responsive */
@media (max-width:900px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .related .wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

@media (max-width:640px){
  :root{--pad:10px;--gap:8px;--bar-h:52px}
  /* Performers first: nothing tall sits above the wall on a phone. */
  .topbar-in{gap:10px}
  .brand{gap:6px}
  .brand-mark{height:23px}
  .brand-word{font-size:18px}
  .cats{order:3;width:100%;padding:0 0 8px}
  .topbar-in{flex-wrap:wrap;height:auto;padding:9px var(--pad) 0}
  .cat{padding:6px 12px;font-size:13px}

  /* search collapses to a lens that expands on tap */
  .find{margin-left:auto}
  .find-lens{display:flex}
  .find input{
    position:absolute;right:0;top:44px;width:min(78vw,320px);
    opacity:0;pointer-events:none;transform:translateY(-6px);transition:.16s;
    box-shadow:var(--shadow);z-index:70;
  }
  .find.open input{opacity:1;pointer-events:auto;transform:none}

  .head{margin:2px 0 12px}
  .lede{font-size:13.5px}
  .wall{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
  .related .wall{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
  .tile-meta{padding:6px 8px 8px}
  .tile-name{font-size:12.5px}
  .tile-sub{display:none}

  .stage{aspect-ratio:16/11;border-radius:var(--r-s)}
  /* The cropped mobile player: the frame is oversized and scaled, so the stage must
     clip it. Height is set inline by fitMobile() once the scale is known. */
  .stage.has-player{overflow:hidden}
  .stage.has-player .stage-player{overflow:hidden}
  .bar{padding:12px 11px;gap:10px}
  .bar-stats{font-size:12.5px;gap:10px;width:100%;order:3}
  .btn-go{width:100%;order:4}
  .foot-counts{gap:12px;font-size:12.5px}
  .pitch{padding:12px 11px}
  .pitch .btn{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}