/* Refinement layer for the Sports cluster (sports-tape).
   Scope per handoff v2.1: behavior and additions only — the approved
   scoreboard center, the category list, and the reviewed masthead/ribbon are
   untouched. This layer carries the sticky accent band with its compact
   wordmark (the square monogram already lives inside the band), the vertical
   Cover Story rail, Coming soon pages, the article crumb / ink rule / share
   row, and the branded utility, author, and contact headers. The palette is
   mirrored at the .layout- level so pages without the sports body class
   (author, 404) keep the sector colors. */
.layout-sports-tape { --sector-ink: #101010; --sector-ink-soft: #292929; --sector-paper: #FFFFFF; --sector-warm: #F1F1EF; --sector-line: #D6D6D1; --sector-muted: #686865; --sector-accent: var(--vuga-color-accent, #B3132A); --sector-head: 'Saira', Arial, sans-serif; --sector-body: 'PT Serif', Georgia, serif; --sector-ui: 'Saira', Arial, sans-serif; color: var(--sector-ink); }

/* Sticky band (mandatory): the approved accent category band stays pinned at
   the top of the screen. The square monogram is part of the band and stays on
   view; once the masthead scrolls away a compact wordmark fades in beside it.
   Colors, fonts, and composition are unchanged. */
.layout-sports-tape .sector-nav[data-sports-nav] { position: sticky; top: 0; z-index: 40; background: var(--sector-accent); }
.layout-sports-tape .sports-nav-wordmark { display: none; align-items: center; margin-left: .8rem; padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .45); font: 800 .68rem/1 var(--sector-head); letter-spacing: .16em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.layout-sports-tape .sports-nav-wordmark:hover { text-decoration: underline; text-underline-offset: .3rem; }
.st-scrolled .layout-sports-tape .sports-nav-wordmark { display: inline-flex; }

/* Cover Story rail (the only homepage addition): vertical magazine block on
   the right of the Latest section — portrait 3:4 cover, up to two text rows,
   and a link to the rubric; Coming soon while the desk is empty. The rail
   mounts only when the Cover Story rubric exists, so the approved scoreboard
   and Latest grid keep their composition untouched. Vertical Cover Story art
   never enters the horizontal slots of the front page or the categories. */
.layout-sports-tape .sports-front-cols { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 0 2.6rem; align-items: start; max-width: 1180px; margin: 0 auto; }
.layout-sports-tape .sports-front-cols .sports-latest-wrap { margin: 0; padding: 0 1.25rem; }
.layout-sports-tape .sports-cover { margin: 0 0 0 auto; padding: 1.4rem 1.25rem 0; }
.layout-sports-tape .sports-cover-inner { border-top: 6px solid var(--sector-ink); background: var(--sector-warm); padding: 1.1rem 1.1rem 1.3rem; }
.layout-sports-tape .sports-cover h2 { font: 800 .78rem/1.2 var(--sector-head); letter-spacing: .22em; text-transform: uppercase; color: var(--sector-accent); margin: 0; }
.layout-sports-tape .sports-cover-feature { display: block; margin-top: .95rem; }
.layout-sports-tape .sports-cover-feature .sector-media { aspect-ratio: 3 / 4; }
.layout-sports-tape .sports-cover-feature h3 { font: 700 1.25rem/1.18 var(--sector-body); margin: .6rem 0 .3rem; }
.layout-sports-tape .sports-cover-feature small { display: block; color: var(--sector-muted); font: 600 .64rem var(--sector-head); letter-spacing: .12em; text-transform: uppercase; }
.layout-sports-tape .sports-cover-more { display: block; padding: .8rem 0; border-top: 1px solid var(--sector-line); }
.layout-sports-tape .sports-cover-more h4 { font: 700 1.02rem/1.25 var(--sector-body); margin: .2rem 0 0; }
.layout-sports-tape .sports-cover-more:hover h4 { color: var(--sector-accent); }
.layout-sports-tape .sports-cover-all { display: inline-block; margin-top: .85rem; font: 800 .64rem var(--sector-head); letter-spacing: .18em; text-transform: uppercase; color: var(--sector-accent); }
.layout-sports-tape .sports-cover-soon { margin: .8rem 0 0; color: var(--sector-muted); line-height: 1.55; }

/* The Cover Story rubric page reads as a portrait magazine spread: vertical
   art stays vertical and never borrows the landscape list slots. */
.layout-sports-tape .sports-list--cover .sector-row .sector-media { aspect-ratio: 3 / 4; max-width: 22rem; }
.layout-sports-tape .sports-list--cover .sector-row:first-child { border-left: 6px solid var(--sector-accent); padding-left: 1rem; }

/* Approved-but-empty sections publish a Coming soon page in the standard
   category layout until their first articles land. */
.layout-sports-tape .sports-coming-soon { padding: 3.2rem 1.5rem; border: 1px dashed var(--sector-line); background: var(--sector-warm); text-align: center; }
.layout-sports-tape .sports-coming-soon b { display: block; font: 800 .68rem var(--sector-head); letter-spacing: .26em; text-transform: uppercase; color: var(--sector-accent); }
.layout-sports-tape .sports-coming-soon p { margin: .7rem 0 0; color: var(--sector-muted); }

/* Article page: mono uppercase crumb above the kicker with HOME in the
   accent, ink rule under the byline, and a share row with the canonical clean
   URL. The approved story layout and The Tape are untouched. */
.layout-sports-tape .st-crumb { font: 700 .62rem var(--sector-head); letter-spacing: .24em; text-transform: uppercase; color: var(--sector-muted); }
.layout-sports-tape .st-crumb a { color: var(--sector-accent); }
.layout-sports-tape .sector-article-meta { padding-bottom: 1rem; border-bottom: 3px solid var(--sector-ink); }
.layout-sports-tape .st-share { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.15rem; }
.layout-sports-tape .st-share > span { font: 800 .62rem var(--sector-head); letter-spacing: .22em; text-transform: uppercase; color: var(--sector-muted); margin-right: .2rem; }
.layout-sports-tape .st-share a { border: 2px solid var(--sector-ink); padding: .5rem .8rem; font: 800 .62rem var(--sector-head); letter-spacing: .14em; text-transform: uppercase; color: var(--sector-ink); background: #fff; }
.layout-sports-tape .st-share a:hover { background: var(--sector-accent); border-color: var(--sector-accent); color: #fff; }

/* Author card under the article: the More-about line inherits the sector
   accent once the clean-URL layouts list includes sports-tape. */
.layout-sports-tape .sector-author a[href^="/author/"] { font: 700 .78rem var(--sector-head); letter-spacing: .1em; text-transform: uppercase; color: var(--sector-accent); }

/* Author page in the sector voice: Saira AUTHOR label in the accent, large
   name over an ink rule, portrait tile, serif bio, card grid. */
.layout-sports-tape .sector-wrap { max-width: 76rem; margin: 0 auto; padding: 1.6rem clamp(1rem, 3vw, 2rem) 3.4rem; }
.layout-sports-tape .sector-author-page { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 6px solid var(--sector-ink); }
.layout-sports-tape .sector-author-page-photo { width: 7.5rem; height: 7.5rem; object-fit: cover; background: var(--sector-warm); }
.layout-sports-tape .sector-author-page .sector-kicker { font: 800 .7rem var(--sector-head); letter-spacing: .26em; text-transform: uppercase; color: var(--sector-accent); }
.layout-sports-tape .sector-author-page h1 { font: 900 clamp(1.9rem, 4.2vw, 3rem)/1 var(--sector-head); text-transform: uppercase; margin: .45rem 0 .7rem; }
.layout-sports-tape .sector-author-bio { max-width: 44rem; line-height: 1.6; }
.layout-sports-tape .sector-author-title, .layout-sports-tape .sector-author-credentials { margin: .45rem 0 0; font: 600 .8rem var(--sector-head); color: var(--sector-muted); }
.layout-sports-tape .sector-card .sector-media { aspect-ratio: 4 / 3; }
.layout-sports-tape .sector-card h3 { font: 700 1.12rem/1.22 var(--sector-body); margin: .45rem 0 .3rem; }

/* Utility pages wear the sector's editorial header: mono crumb, large Saira
   heading, ink rule; the about body reads as serif text. */
.layout-sports-tape .sector-utility-wrap { max-width: 76rem; margin: 0 auto; padding: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) 3.4rem; }
.layout-sports-tape .sector-utility .sector-crumb { font: 700 .7rem var(--sector-head); letter-spacing: .22em; text-transform: uppercase; color: var(--sector-muted); }
.layout-sports-tape .sector-utility .sector-crumb a { color: var(--sector-accent); }
.layout-sports-tape .sector-utility > h1 { font: 900 clamp(2rem, 4.6vw, 3.2rem)/1 var(--sector-head); text-transform: uppercase; margin: .55rem 0 0; padding-bottom: 1.1rem; border-bottom: 6px solid var(--sector-ink); }
.layout-sports-tape .sector-utility .sector-utility-intro { font-size: 1.12rem; line-height: 1.6; color: #4a4b50; max-width: 44rem; }
.layout-sports-tape .sector-utility--about .sector-about-body { max-width: 52rem; font-size: 1.08rem; line-height: 1.7; }
.layout-sports-tape .sector-utility--about .sector-about-body p { margin: 0 0 1.4rem; }
.layout-sports-tape .sector-utility--about .about-team, .layout-sports-tape .sector-utility--about .about-network { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sector-line); }
.layout-sports-tape .sector-utility--about .about-team h2, .layout-sports-tape .sector-utility--about .about-network h2 { font-family: var(--sector-head); text-transform: uppercase; }
.layout-sports-tape .sector-utility--about .team-member img { border-radius: 50%; background: var(--sector-warm); }
.layout-sports-tape .sector-utility--about .team-member .name { font-weight: 700; margin-top: .5rem; }
.layout-sports-tape .sector-utility--about .team-member .title, .layout-sports-tape .sector-utility--about .team-member .line { font-size: .85rem; color: var(--sector-muted); }

/* Contact page wears the same header; its form speaks the sector language. */
.layout-sports-tape .sector-utility #contact-page-title { font: 900 clamp(2rem, 4.6vw, 3.2rem)/1 var(--sector-head); text-transform: uppercase; margin: .55rem 0 0; padding-bottom: 1.1rem; border-bottom: 6px solid var(--sector-ink); }
.layout-sports-tape .vuga-contact-form label { font: 700 .72rem var(--sector-head); letter-spacing: .14em; text-transform: uppercase; color: var(--sector-muted); }
.layout-sports-tape .vuga-contact-form input, .layout-sports-tape .vuga-contact-form textarea { width: 100%; border: 2px solid var(--sector-line); padding: .7rem .85rem; font: 400 .95rem var(--sector-body), serif; background: #fff; }
.layout-sports-tape .vuga-contact-form input:focus, .layout-sports-tape .vuga-contact-form textarea:focus { outline: none; border-color: var(--sector-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sector-accent) 18%, transparent); }
.layout-sports-tape .vuga-contact-form button[type="submit"] { border: 0; padding: .8rem 1.4rem; background: var(--sector-ink); color: #fff; font: 800 .78rem var(--sector-head); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.layout-sports-tape .vuga-contact-form button[type="submit"]:hover { background: var(--sector-accent); }

@media (max-width: 62rem) {
  .layout-sports-tape .sports-front-cols { grid-template-columns: 1fr; }
  .layout-sports-tape .sports-cover { max-width: 26rem; margin: 0 auto; }
}

@media (max-width: 48rem) {
  .layout-sports-tape .sector-author-page { grid-template-columns: 1fr; }
  .layout-sports-tape .sector-author-page-photo { width: 5.5rem; height: 5.5rem; }
  .layout-sports-tape .sports-nav-wordmark { display: none !important; }
}