/* Public baseball visual layer. Kept separate so the CMS and data workflows stay untouched. */
:root {
  --bb-navy: #10263c;
  --bb-navy-deep: #091725;
  --bb-cream: #f6f1e6;
  --bb-card: #fffdf7;
  --bb-line: rgba(16, 38, 60, .18);
  --bb-muted: #65727b;
  --bb-clay: #c75837;
  --bb-clay-dark: #8f3427;
  --bb-grass: #2e704f;
  --bb-grass-dark: #1e4d3a;
  --bb-gold: #e9b84b;
  --bb-stitch: #d9654a;
  --bb-serif: 'Noto Serif Thai', Georgia, serif;
  --bb-sans: 'Noto Sans Thai', 'Manrope', sans-serif;
  --bb-display: 'Barlow Condensed', 'Noto Sans Thai', sans-serif;
}

body.public-body {
  color: var(--bb-navy);
  background-color: var(--bb-cream);
  background-image:
    linear-gradient(rgba(16, 38, 60, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 38, 60, .035) 1px, transparent 1px),
    linear-gradient(180deg, #fbf8f0 0%, var(--bb-cream) 52%, #eee5d6 100%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  font-family: var(--bb-sans);
}

body.public-body::before {
  z-index: -1;
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(199, 88, 55, .08) 49% 49.4%, transparent 49.4% 100%),
    repeating-linear-gradient(128deg, transparent 0 31px, rgba(46, 112, 79, .045) 31px 32px);
}

.public-body a:focus-visible,
.public-body button:focus-visible,
.public-body input:focus-visible {
  outline: 3px solid var(--bb-gold);
  outline-offset: 3px;
}

.site-header {
  min-height: 78px;
  height: auto;
  border-bottom: 2px solid var(--bb-navy);
  background: rgba(246, 241, 230, .95);
  box-shadow: 0 5px 0 rgba(199, 88, 55, .12);
}

.brand {
  color: var(--bb-navy);
}

.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  border: 2px solid var(--bb-navy);
  border-radius: 50%;
  background: var(--bb-clay);
  color: #fffaf0;
  box-shadow: 4px 4px 0 var(--bb-navy);
  font: 800 17px/1 var(--bb-display);
  letter-spacing: .04em;
  transform: none;
}

.brand-mark::after {
  position: absolute;
  inset: 5px 10px;
  border-right: 1px dashed rgba(255, 250, 240, .85);
  border-left: 1px dashed rgba(255, 250, 240, .85);
  border-radius: 50%;
  content: '';
  transform: rotate(24deg);
}

.brand-mark.small {
  width: 32px;
  height: 32px;
  box-shadow: 3px 3px 0 var(--bb-clay);
  font-size: 13px;
}

.brand strong,
.site-footer strong {
  font-family: var(--bb-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brand small {
  color: var(--bb-clay-dark);
  font: 700 9px/1.3 var(--bb-display);
  letter-spacing: .15em;
}

.site-nav {
  gap: 4px;
}

.site-nav a {
  padding: 9px 11px;
  color: var(--bb-navy);
  font-family: var(--bb-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.site-nav a:hover,
.site-nav a.active {
  border-color: var(--bb-navy);
  background: var(--bb-card);
  color: var(--bb-clay-dark);
  box-shadow: 3px 3px 0 var(--bb-navy);
}

.global-search {
  border: 2px solid var(--bb-navy);
  background: var(--bb-card);
  box-shadow: 4px 4px 0 rgba(16, 38, 60, .14);
}

.global-search input {
  color: var(--bb-navy);
  font-family: var(--bb-sans);
}

.global-search input::placeholder {
  color: #879098;
}

.global-search button {
  border-left: 2px solid var(--bb-navy);
  background: var(--bb-gold);
  color: var(--bb-navy);
  font-family: var(--bb-display);
  font-weight: 800;
}

.public-main {
  max-width: 1440px;
}

.eyebrow,
.section-kicker small,
.story-meta small,
.list-story > div > small,
.editorial-copy > span,
.article-byline,
.ad-label {
  color: var(--bb-muted);
  font-family: var(--bb-display);
  letter-spacing: .09em;
}

.eyebrow.accent {
  color: var(--bb-clay-dark);
}

.hero-grid {
  min-height: min(690px, calc(100vh - 108px));
  align-items: center;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .85fr);
  gap: clamp(32px, 6vw, 96px);
  border-bottom: 1px solid var(--bb-line);
}

.hero-copy {
  position: relative;
  padding: 86px 0 78px;
}

.hero-copy::before {
  position: absolute;
  top: 58px;
  left: -52px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--bb-clay);
  border-radius: 50%;
  content: '';
  box-shadow: 0 0 0 6px rgba(199, 88, 55, .1);
}

.hero-copy h1 {
  max-width: 780px;
  margin: 24px 0 22px;
  color: var(--bb-navy);
  font: 800 clamp(64px, 9vw, 148px)/.84 var(--bb-display);
  letter-spacing: -.02em;
  text-transform: none;
}

.hero-copy h1 em {
  display: inline-block;
  color: var(--bb-clay-dark);
  font-family: var(--bb-serif);
  font-size: .68em;
  font-style: normal;
  line-height: 1.1;
  text-shadow: 4px 4px 0 rgba(233, 184, 75, .45);
}

.hero-copy p {
  max-width: 600px;
  color: #4e5e68;
  font-size: 16px;
  line-height: 1.9;
}

.arrow-link,
.band-title > a,
.related-videos-heading a,
.cross-category-heading a,
.quick-links a {
  color: var(--bb-navy);
  font-family: var(--bb-display);
  font-weight: 800;
}

.arrow-link {
  border: 2px solid var(--bb-navy);
  background: var(--bb-gold);
  box-shadow: 5px 5px 0 var(--bb-navy);
}

.arrow-link:hover {
  background: #f0c96a;
  box-shadow: 7px 7px 0 var(--bb-navy);
}

.hero-art {
  position: relative;
  height: 520px;
  overflow: hidden;
  border: 3px solid var(--bb-navy);
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255, 250, 240, .8) 48% 48.5%, transparent 48.5% 100%),
    linear-gradient(45deg, transparent 0 48%, rgba(255, 250, 240, .5) 48% 48.5%, transparent 48.5% 100%),
    linear-gradient(150deg, var(--bb-grass) 0 57%, var(--bb-clay) 57% 100%);
  box-shadow: 14px 14px 0 var(--bb-navy);
  transform: none;
}

.hero-art::before,
.hero-art::after {
  position: absolute;
  content: '';
  pointer-events: none;
}

.hero-art::before {
  top: 42%;
  left: 50%;
  width: 290px;
  height: 290px;
  border: 2px solid rgba(255, 250, 240, .7);
  transform: translate(-50%, -50%) rotate(45deg);
}

.hero-art::after {
  top: -104px;
  right: -90px;
  width: 260px;
  height: 260px;
  border: 3px solid rgba(255, 250, 240, .82);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(28deg);
}

.orbit {
  display: block;
  position: absolute;
  z-index: 1;
  border: 2px dashed rgba(255, 250, 240, .78);
  border-radius: 50%;
}

.orbit-one {
  top: 28px;
  left: 26px;
  width: 150px;
  height: 150px;
}

.orbit-two {
  right: 25px;
  bottom: 28px;
  width: 190px;
  height: 190px;
  border-color: rgba(16, 38, 60, .48);
}

.orbit-core {
  z-index: 2;
  left: 50%;
  bottom: 54px;
  width: 190px;
  height: 190px;
  border: 3px solid var(--bb-navy);
  border-radius: 50%;
  background:
    repeating-linear-gradient(72deg, transparent 0 18px, rgba(217, 101, 74, .75) 18px 20px, transparent 20px 37px),
    #fffaf0;
  color: var(--bb-navy);
  font: 800 98px/.8 var(--bb-display);
  text-align: center;
  box-shadow: 10px 10px 0 rgba(16, 38, 60, .3);
  transform: translateX(-50%) rotate(-12deg);
}

.orbit-core span {
  display: block;
  margin-top: 12px;
  color: var(--bb-clay-dark);
  font: 800 16px/1 var(--bb-display);
  letter-spacing: .14em;
}

.art-note {
  z-index: 3;
  border: 2px solid var(--bb-navy);
  background: var(--bb-card);
  color: var(--bb-navy);
  font: 800 12px/1.3 var(--bb-display);
  letter-spacing: .08em;
  box-shadow: 4px 4px 0 var(--bb-navy);
}

.note-a {
  top: 30px;
  right: 28px;
}

.note-b {
  right: 35px;
  bottom: 43px;
}

.section-kicker {
  border-top: 3px solid var(--bb-navy);
  border-bottom: 1px solid var(--bb-line);
}

.section-kicker span {
  background: var(--bb-clay);
  color: #fffaf0;
  font-family: var(--bb-display);
}

.section-kicker strong,
.band-title h2,
.page-intro h1,
.related-videos-heading h2,
.cross-category-heading h2 {
  color: var(--bb-navy);
  font-family: var(--bb-display);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
}

.content-band {
  border-bottom: 1px solid var(--bb-line);
}

.band-title {
  border-top: 3px solid var(--bb-navy);
}

.band-title h2 {
  font-size: clamp(30px, 4vw, 58px);
}

.band-title p {
  color: var(--bb-muted);
}

.vertical-num {
  color: var(--bb-clay-dark);
  font-family: var(--bb-display);
}

.story-card,
.editorial-card,
.live-card,
.player-card,
.cross-category-card,
.related-video-card {
  min-width: 0;
}

.story-image,
.editorial-cover,
.live-cover,
.related-video-cover {
  border: 2px solid var(--bb-navy);
  background-color: var(--bb-grass-dark);
  box-shadow: 5px 5px 0 rgba(16, 38, 60, .18);
}

.story-image::after,
.editorial-cover::after,
.live-cover::after,
.related-video-cover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 38, 60, .16), transparent 45%, rgba(199, 88, 55, .28));
  content: '';
  pointer-events: none;
}

.story-image span,
.editorial-cover small,
.live-cover small,
.related-video-cover span {
  z-index: 1;
  border: 1px solid var(--bb-navy);
  background: var(--bb-card);
  color: var(--bb-navy);
  font-family: var(--bb-display);
  font-weight: 800;
}

.story-card:hover .story-image,
.editorial-card:hover .editorial-cover,
.live-card:hover .live-cover,
.cross-category-card:hover .cross-category-cover,
.related-video-card:hover .related-video-cover {
  box-shadow: 7px 7px 0 rgba(16, 38, 60, .24);
}

.story-meta h3,
.editorial-copy h2,
.live-card h2,
.cross-category-card h3,
.related-video-card h3 {
  color: var(--bb-navy);
  font-family: var(--bb-serif);
  font-weight: 700;
  letter-spacing: 0;
}

.story-meta p,
.editorial-copy p,
.cross-category-card p,
.related-video-card p {
  color: var(--bb-muted);
}

.page-intro {
  position: relative;
  border-bottom: 1px solid var(--bb-line);
}

.page-intro::after {
  border-color: var(--bb-clay);
  background: var(--bb-gold);
}

.page-intro h1,
.article-header h1 {
  max-width: 980px;
  font-size: clamp(54px, 8vw, 112px);
  line-height: .92;
}

.page-intro p {
  max-width: 680px;
  color: var(--bb-muted);
  font-size: 16px;
}

.list-story,
.search-result,
.player-result-row {
  border-bottom-color: var(--bb-line);
}

.list-story:hover,
.search-result:hover,
.player-result-row:hover {
  background: rgba(255, 253, 247, .82);
}

.list-index,
.search-result > span {
  color: var(--bb-clay-dark);
  font-family: var(--bb-display);
  font-weight: 800;
}

.list-thumb,
.player-portrait {
  border: 2px solid var(--bb-navy);
  background-color: var(--bb-grass);
  box-shadow: 4px 4px 0 rgba(16, 38, 60, .16);
}

.list-story h2,
.search-result h2 {
  color: var(--bb-navy);
  font-family: var(--bb-serif);
}

.list-story p,
.search-result p {
  color: var(--bb-muted);
}

.list-arrow,
.search-result b {
  color: var(--bb-clay-dark);
}

.category-empty,
.score-empty,
.player-results-empty,
.empty-state {
  border: 2px dashed rgba(16, 38, 60, .3);
  background: rgba(255, 253, 247, .7);
  color: var(--bb-muted);
}

.category-pagination a,
.category-pagination span {
  border-color: var(--bb-navy);
  background: var(--bb-card);
  color: var(--bb-navy);
}

.category-pagination a.active {
  background: var(--bb-gold);
  color: var(--bb-navy);
}

.tournament-calendar,
.tournament-results,
.champion-card {
  border: 2px solid var(--bb-navy);
  background: var(--bb-card);
  box-shadow: 8px 8px 0 rgba(16, 38, 60, .14);
}

.tournament-date-picker,
.detail-date-picker {
  background: var(--bb-navy);
  color: #fffaf0;
}

.tournament-date-picker button,
.detail-date-picker button {
  background: var(--bb-gold);
  color: var(--bb-navy);
  font-family: var(--bb-display);
  font-weight: 800;
}

.tournament-table th {
  background: var(--bb-navy);
  color: #fffaf0;
  font-family: var(--bb-display);
  letter-spacing: .05em;
}

.tournament-table tbody tr:hover {
  background: rgba(233, 184, 75, .14);
}

.tournament-name strong,
.previous-winner:hover,
.match-player-link {
  color: var(--bb-clay-dark);
}

.winner-mark {
  background: var(--bb-gold);
  border-color: var(--bb-navy);
}

.tournament-hero {
  border: 2px solid var(--bb-navy);
  background:
    linear-gradient(90deg, rgba(255, 250, 240, .08) 2px, transparent 2px) 0 0 / 16% 100%,
    linear-gradient(135deg, var(--bb-navy), var(--bb-grass-dark));
  box-shadow: 10px 10px 0 rgba(16, 38, 60, .2);
}

.tournament-title-block h1 {
  font-family: var(--bb-display);
  letter-spacing: .01em;
  text-transform: none;
}

.match-day-strip a,
.match-day-strip .disabled {
  border-color: var(--bb-navy);
  background: var(--bb-card);
  color: var(--bb-navy);
}

.match-day-strip a.active {
  background: var(--bb-gold);
}

.match-row {
  border: 2px solid var(--bb-navy);
  background: var(--bb-card);
  box-shadow: 4px 4px 0 rgba(16, 38, 60, .12);
}

.match-row header {
  background: var(--bb-navy-deep);
  color: #fffaf0;
}

.match-player.winner {
  background: rgba(233, 184, 75, .18);
}

.article-header {
  border-bottom-color: var(--bb-line);
}

.back-link {
  color: var(--bb-clay-dark);
  font-family: var(--bb-display);
  font-weight: 800;
}

.article-header h1 {
  color: var(--bb-navy);
  font-family: var(--bb-serif);
  letter-spacing: 0;
  text-transform: none;
}

.article-byline {
  color: var(--bb-muted);
}

.article-cover,
.player-detail-cover {
  border: 2px solid var(--bb-navy);
  box-shadow: 8px 8px 0 rgba(16, 38, 60, .14);
}

.article-body,
.article-body p,
.article-body li {
  color: #354a57;
}

.article-body .lead {
  color: var(--bb-navy);
  font-family: var(--bb-serif);
}

.article-body h2,
.article-body h3,
.athlete-section-heading h2,
.player-results-heading h2 {
  color: var(--bb-navy);
  font-family: var(--bb-serif);
}

.article-body blockquote {
  border-left-color: var(--bb-clay);
  background: rgba(233, 184, 75, .13);
}

.entity-link,
.source-link a {
  color: var(--bb-clay-dark);
  text-decoration-color: var(--bb-gold);
}

.live-player {
  border-color: var(--bb-navy);
  box-shadow: 10px 10px 0 rgba(16, 38, 60, .2);
}

.live-player-bar {
  background: var(--bb-navy-deep);
  color: var(--bb-gold);
}

.live-player-bar strong span {
  background: var(--bb-clay);
  box-shadow: 0 0 0 4px rgba(199, 88, 55, .15), 0 0 10px rgba(199, 88, 55, .65);
}

.player-directory {
  border-top-color: var(--bb-navy);
}

.directory-heading,
.league-heading {
  border-bottom-color: var(--bb-navy);
}

.directory-heading h2,
.player-card h3 {
  color: var(--bb-navy);
  font-family: var(--bb-serif);
  text-transform: none;
}

.league-code {
  border-color: var(--bb-navy);
  background: var(--bb-gold);
}

.player-portrait i {
  border-color: var(--bb-navy);
  background: var(--bb-card);
  color: var(--bb-navy);
}

.player-facts {
  border-color: var(--bb-navy);
  background: var(--bb-navy);
}

.player-facts div {
  background: var(--bb-card);
}

.player-facts dt,
.player-result-row time,
.player-result-opponent small {
  color: var(--bb-muted);
}

.player-facts dd,
.player-result-event strong,
.player-result-opponent strong,
.player-result-score strong {
  color: var(--bb-navy);
}

.player-results {
  border-top-color: var(--bb-navy);
}

.player-result-score b {
  border-color: var(--bb-navy);
  background: var(--bb-gold);
}

.player-result-score b.is-win {
  background: var(--bb-grass);
  color: #fffaf0;
}

.player-result-score b.is-loss {
  background: var(--bb-clay);
  color: #fffaf0;
}

.related-videos,
.cross-category {
  border-top-color: var(--bb-navy);
}

.related-videos-heading,
.cross-category-heading {
  border-bottom-color: var(--bb-line);
}

.related-video-play {
  background: var(--bb-gold);
  color: var(--bb-navy);
}

.ad-rail {
  border-color: var(--bb-line);
}

.ad-card {
  border-color: var(--bb-navy);
  background: var(--bb-card);
}

.site-footer {
  border-top: 3px solid var(--bb-navy);
  background: var(--bb-navy-deep);
  color: #fffaf0;
}

.site-footer .footer-note {
  color: rgba(255, 250, 240, .72);
}

.site-footer .footer-note span {
  color: var(--bb-gold);
}

.captured-content {
  border-color: var(--bb-line);
  background: rgba(255, 253, 247, .82);
}

@media (max-width: 1100px) {
  .site-header {
    row-gap: 12px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-bottom: 46px;
  }

  .hero-copy {
    padding-bottom: 24px;
  }

  .hero-art {
    width: min(100%, 760px);
    height: 430px;
  }
}

@media (max-width: 680px) {
  .public-body {
    overflow-x: hidden;
  }

  .site-header {
    padding: 15px 18px;
  }

  .site-header,
  .site-header > .brand,
  .site-actions,
  .global-search,
  .global-search input,
  .hero-grid,
  .hero-copy,
  .hero-art {
    min-width: 0;
    max-width: 100%;
  }

  .site-actions,
  .global-search,
  .hero-art {
    width: 100%;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand strong {
    font-size: 18px;
  }

  .hero-copy {
    padding: 66px 0 28px;
  }

  .hero-copy::before {
    top: 40px;
    left: 0;
  }

  .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(40px, 11vw, 46px);
    letter-spacing: 0;
    line-height: .96;
    overflow-wrap: anywhere;
  }

  .hero-copy h1 em {
    display: block;
    max-width: 100%;
    line-height: 1.05;
    text-shadow: 2px 2px 0 rgba(233, 184, 75, .38);
  }

  .hero-copy p {
    font-size: 15px;
  }

  .hero-art {
    height: 330px;
    box-shadow: 8px 8px 0 var(--bb-navy);
  }

  .hero-art::before {
    width: 190px;
    height: 190px;
  }

  .orbit-core {
    bottom: 28px;
    width: 132px;
    height: 132px;
    font-size: 68px;
  }

  .orbit-core span {
    margin-top: 8px;
    font-size: 12px;
  }

  .orbit-one {
    width: 100px;
    height: 100px;
  }

  .orbit-two {
    width: 120px;
    height: 120px;
  }

  .note-a {
    top: 22px;
    right: 18px;
  }

  .note-b {
    right: 18px;
    bottom: 25px;
  }

  .page-intro h1,
  .article-header h1 {
    font-size: clamp(44px, 14vw, 72px);
  }

  .story-grid,
  .editorial-grid,
  .related-video-grid,
  .cross-category-grid {
    grid-template-columns: 1fr;
  }

  .tournament-calendar,
  .tournament-results,
  .champion-card,
  .tournament-hero {
    box-shadow: 5px 5px 0 rgba(16, 38, 60, .14);
  }

  .tournament-table-wrap {
    overflow-x: auto;
  }

  .tournament-table {
    min-width: 620px;
  }

  .article-cover,
  .player-detail-cover {
    box-shadow: 5px 5px 0 rgba(16, 38, 60, .14);
  }

  .site-footer {
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-image,
  .editorial-cover,
  .live-cover,
  .cross-category-cover,
  .related-video-cover {
    transition: none;
  }
}