/* ==========================================================================
   Jaya Tennis Championship — 2026 theme
   Sliced from JTC_Desktop_Master_New.psd (1440px artboards).

   Everything here is scoped to .jtc so this stylesheet can sit alongside the
   existing tennis theme without either one leaking into the other.

   Colours are sampled from the PSD, not eyeballed: forest #203F36 carries the
   bands, buttons and every piece of text; cream #F4F3ED is the page.
   ========================================================================== */

.jtc {
  --forest:      #203F36;
  --forest-700:  #1A332C;
  --forest-900:  #142720;
  --cream:       #F4F3ED;
  --paper:       #FAFAF7;
  --sage:        #8F9A92;
  --rule:        #E2E3DE;
  --ink:         #22261F;
  --muted:       #6B7570;
  --success:     #2B705A;
  --on-forest:   #F4F3ED;

  /* 1440 artboard: content runs 129 → 1312, so 1184 with 32px gutters. */
  --container:   1184px;
  --gutter:      32px;

  --font-sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  margin: 0px !important;
}

.jtc *,
.jtc *::before,
.jtc *::after { box-sizing: border-box; }

.jtc img { max-width: 100%; display: block; }

/* :where() so this contributes no specificity — a plain `.jtc a` (0,1,1) beats
   every single-class rule below it, which silently turned the nav links and
   any anchor styled as a button back to body colour. */
.jtc :where(a) { color: inherit; text-decoration: none; }

.jtc h1, .jtc h2, .jtc h3, .jtc h4, .jtc p, .jtc ul, .jtc figure {
  margin: 0;
}

.jtc ul { list-style: none; padding: 0; }

.jtc__container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Skip link — the nav is the first thing in the tab order otherwise. */
.jtc__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--forest);
  color: var(--on-forest);
  padding: 12px 20px;
  font-weight: 600;
}
.jtc__skip:focus { left: 0; }

.jtc :focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.jtc__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__eyebrow--light { color: rgba(244, 243, 237, 0.85); }

/* The big uppercase page titles: PAST WINNERS, SCHEDULE, DRAW. */
.jtc__display {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__display--light { color: var(--on-forest); }

/* The editorial serif moments: "More Than A Tournament", "JTC 2025 IN NUMBERS". */
.jtc__serif {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.8vw, 53px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Locked-up uppercase sub-headline under a display title. */
.jtc__campaign {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jtc__section { padding-block: 72px; }
.jtc__section--tight { padding-block: 48px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.jtc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.jtc__btn--solid {
  background: var(--forest);
  color: var(--on-forest);
}
.jtc__btn--solid:hover { background: var(--forest-700); }

.jtc__btn--ghost {
  background: transparent;
  color: var(--on-forest);
  border-color: rgba(244, 243, 237, 0.55);
}
.jtc__btn--ghost:hover { background: rgba(244, 243, 237, 0.12); }

.jtc__btn--outline {
  background: transparent;
  color: var(--forest);
  border-color: var(--rule);
}
.jtc__btn--outline:hover { border-color: var(--forest); }

.jtc__btn--block { width: 100%; }

.jtc__btn svg { flex: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.jtc__header {
  background: var(--cream);
  border-bottom: 1px solid transparent;
}

.jtc__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.jtc__logo img { height: 58px; width: auto; }

.jtc__nav { display: flex; align-items: center; gap: 52px; }

.jtc__nav-link {
  position: relative;
  padding-block: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest);
  white-space: nowrap;
}

/* The 2px underline the PSD puts under the current page. */
.jtc__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--forest);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.jtc__nav-link:hover::after { transform: scaleX(1); opacity: .4; }
.jtc__nav-link.is-active::after { transform: scaleX(1); }

.jtc__nav-cta { padding-inline: 40px; }

/* Mobile nav toggle — hidden until the breakpoint. */
.jtc__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule);
  color: var(--forest);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */

.jtc__hero {
  position: relative;
  min-height: 611px;
  display: flex;
  align-items: center;
  background: var(--forest-900) center/cover no-repeat;
  color: var(--on-forest);
  overflow: hidden;
}

/* The photograph is bright on the right; the copy sits left and needs the
   contrast held there regardless of how the image crops. */
.jtc__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 39, 32, .82) 0%, rgba(20, 39, 32, .55) 38%, rgba(20, 39, 32, .12) 68%);
}

.jtc__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 56px;
}

.jtc__hero-meta {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1.55;
  text-transform: uppercase;
}

.jtc__hero-lockup {
  width: min(394px, 78%);
  margin-block: 34px 18px;
}

.jtc__hero-campaign {
  max-width: 480px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

.jtc__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 34px;
}

/* SPORT / PEOPLE / BUSINESS / COMMUNITY, set against the right edge. */
.jtc__hero-pillars {
  position: absolute;
  right: var(--gutter);
  bottom: 56px;
  z-index: 1;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.85;
  text-transform: uppercase;
  color: var(--on-forest);
}

.jtc__hero-pillars::after {
  content: "";
  display: block;
  width: 76px;
  height: 2px;
  margin-top: 14px;
  margin-left: auto;
  background: rgba(244, 243, 237, .75);
}

/* --------------------------------------------------------------------------
   Inner-page hero — shorter, same construction
   -------------------------------------------------------------------------- */

.jtc__page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 282px;
  padding-block: 44px;
  background: var(--forest-900) center/cover no-repeat;
  color: var(--on-forest);
  overflow: hidden;
}

.jtc__page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 39, 32, .88) 0%, rgba(20, 39, 32, .62) 42%, rgba(20, 39, 32, .15) 72%);
}

.jtc__page-hero-inner { position: relative; z-index: 1; width: 100%; }

.jtc__page-hero .jtc__display { margin-block: 10px 14px; }

.jtc__page-hero-pillars {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.9;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Facts strip — four columns divided by hairlines
   -------------------------------------------------------------------------- */

.jtc__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 44px;
}

.jtc__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-inline: 24px;
  text-align: center;
  border-left: 1px solid var(--rule);
}
.jtc__fact:first-child { border-left: 0; }

.jtc__fact-icon { color: var(--forest); margin-bottom: 12px; }

.jtc__fact-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__fact-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__fact-note {
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__fact-list {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   Quick links band
   -------------------------------------------------------------------------- */

.jtc__quick {
  background: var(--forest);
  color: var(--on-forest);
}

.jtc__quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.jtc__quick-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 40px 34px;
  border-left: 1px solid rgba(244, 243, 237, .22);
  transition: background-color .18s ease;
}
.jtc__quick-item:first-child { border-left: 0; }
.jtc__quick-item:hover { background: var(--forest-700); }

.jtc__quick-body { flex: 1 1 auto; }

.jtc__quick-title {
  display: block;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.jtc__quick-caption {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 243, 237, .8);
}

.jtc__quick-item .jtc__quick-arrow { transition: transform .18s ease; }
.jtc__quick-item:hover .jtc__quick-arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.jtc__about {
  display: grid;
  grid-template-columns: 638fr 802fr;
  align-items: stretch;
}

.jtc__about-figure {
  min-height: 446px;
  background: var(--forest-900) center/cover no-repeat;
}

.jtc__about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 40px;
  padding: 52px 48px 52px 28px;
}

.jtc__about-copy { max-width: 430px; }

.jtc__about-copy .jtc__serif { margin-block: 14px 22px; }

.jtc__about-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

.jtc__about-copy .jtc__btn { margin-top: 28px; }

.jtc__pillars {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-left: 40px !important;
  border-left: 1px solid var(--rule);
}

.jtc__pillar { display: flex; gap: 16px; align-items: flex-start; }

.jtc__pillar-icon { color: var(--forest); flex: none; }

.jtc__pillar-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__pillar-text {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Numbers band
   -------------------------------------------------------------------------- */

.jtc__numbers {
  position: relative;
  padding-block: 56px;
  background: var(--forest-900) center/cover no-repeat;
  color: var(--on-forest);
  overflow: hidden;
}

.jtc__numbers::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 39, 32, .62);
}

.jtc__numbers-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.jtc__numbers-title .jtc__serif { margin-top: 12px; text-transform: uppercase; }

.jtc__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.jtc__stat {
  padding-inline: 28px;
  border-left: 1px solid rgba(244, 243, 237, .3);
}
.jtc__stat:first-child { border-left: 0; }

.jtc__stat-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.jtc__stat-label {
  font-size: 15px;
  line-height: 1.4;
  color: rgba(244, 243, 237, .88);
}

/* --------------------------------------------------------------------------
   Partners
   -------------------------------------------------------------------------- */

.jtc__partners { padding-block: 48px 56px; }

.jtc__partners-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 30px;
}

.jtc__partners-row img {
  height: 100px;
  width: auto;
  object-fit: contain;
  
  opacity: .78;
  transition: filter .18s ease, opacity .18s ease;
}
.jtc__partners-row img:hover { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.jtc__footer {
  background: var(--forest);
  color: var(--on-forest);
  padding-block: 44px 34px;
}

.jtc__footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.jtc__footer-logo img { height: 74px; width: auto; }

.jtc__footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.jtc__footer-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.jtc__footer-nav a:hover { opacity: .75; }
.jtc__footer-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
}

.jtc__social { display: flex; gap: 18px; }

.jtc__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  opacity: .9;
}
.jtc__social a:hover { opacity: 1; }

.jtc__footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
  font-size: 13px;
  color: rgba(244, 243, 237, .82);
}

.jtc__legal { display: flex; gap: 14px; align-items: center; }
.jtc__legal a:hover { text-decoration: underline; }
.jtc__legal span { opacity: .5; }

/* --------------------------------------------------------------------------
   Tabs — years (past winners), days (schedule), categories (draw)
   -------------------------------------------------------------------------- */

.jtc__tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: thin;
}

.jtc__tab {
  position: relative;
  flex: none;
  padding: 16px 30px;
  background: none;
  border: 0;
  border-left: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.jtc__tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--forest);
  opacity: 0;
  transition: opacity .16s ease;
}

.jtc__tab:hover { color: var(--forest); }
.jtc__tab.is-active { color: var(--forest); font-weight: 700; }
.jtc__tab.is-active::after { opacity: 1; }

.jtc__tab small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.jtc__tabs--divided .jtc__tab + .jtc__tab { border-left-color: var(--rule); }

.jtc__tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.jtc__tabs-row .jtc__tabs { flex: 1 1 420px; }

/* Uppercase tab variant used by the draw. */
.jtc__tab--caps {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  padding-inline: 0;
  margin-right: 46px;
}

/* --------------------------------------------------------------------------
   Select (ALL CATEGORIES)
   -------------------------------------------------------------------------- */

.jtc__select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.jtc__select select {
  appearance: none;
  min-width: 232px;
  min-height: 52px;
  padding: 12px 46px 12px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest);
  cursor: pointer;
}

.jtc__select svg {
  position: absolute;
  right: 18px;
  pointer-events: none;
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   Past winners
   -------------------------------------------------------------------------- */

.jtc__winners-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  align-items: start;
}

.jtc__winners-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.jtc__section-heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
}
.jtc__link-arrow:hover { opacity: .7; }

.jtc__winner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.jtc__winner-photo {
  aspect-ratio: 4 / 5;
  background: var(--rule) center/cover no-repeat;
  margin-bottom: 16px;
}

.jtc__winner-category {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.jtc__winner-names {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__aside {
  padding-left: 40px;
  border-left: 1px solid var(--rule);
}

.jtc__aside-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
}

.jtc__aside-text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.jtc__aside .jtc__btn { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Schedule table
   -------------------------------------------------------------------------- */

.jtc__table-wrap { overflow-x: auto; margin-top: 34px; }

.jtc__table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 15px;
}

.jtc__table thead th {
  background: var(--sage);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 16px 20px;
  white-space: nowrap;
}

.jtc__table tbody td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  color: var(--forest);
  vertical-align: middle;
}

.jtc__table tbody tr:hover { background: rgba(32, 63, 54, .035); }

/* Group stage ------------------------------------------------------------- */

.jtc__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 10px 34px;
  margin-top: 8px;
}

.jtc__group .jtc__table-wrap { margin-top: 14px; }

/* The counted columns are narrow and read better centred; the team name is
   the only one that stays left. */
.jtc__table--group th:not(:nth-child(2)),
.jtc__table--group td:not(:nth-child(2)) { text-align: center; }

.jtc__table--group tbody tr.is-advancing { background: rgba(32, 63, 54, .05); }
.jtc__table--group tbody tr.is-advancing td:first-child {
  box-shadow: inset 3px 0 0 var(--forest);
  font-weight: 700;
}

.jtc__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest);
  white-space: nowrap;
}

.jtc__groups-note { margin-top: 18px; }

.jtc__players {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.jtc__vs { color: var(--muted); font-size: 14px; }

.jtc__status { font-size: 14px; }
.jtc__status--completed { color: var(--success); }
.jtc__status--upcoming { color: var(--muted); }

/* --------------------------------------------------------------------------
   Draw bracket
   -------------------------------------------------------------------------- */

.jtc__bracket-wrap { overflow-x: auto; padding-block: 34px 8px; }

.jtc__bracket {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 66px;
  min-width: 1120px;
}

.jtc__round-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 22px;
}

.jtc__round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 22px;
  height: 100%;
}

.jtc__matchup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jtc__slot {
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 14px;
  color: var(--forest);
  min-height: 42px;
}

.jtc__slot--empty {
  background: #E4E5E0;
  border-color: #E4E5E0;
  min-height: 34px;
}

.jtc__slot--champion {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--on-forest);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The connector: a bracket drawn to the right of each matchup. */
.jtc__matchup--linked::after {
  content: "";
  position: absolute;
  left: calc(100% + 1px);
  top: 25%;
  bottom: 25%;
  width: 24px;
  border: 1px solid var(--sage);
  border-left: 0;
}

/* --------------------------------------------------------------------------
   Register
   -------------------------------------------------------------------------- */

.jtc__register {
  display: grid;
  grid-template-columns: minmax(0, 985fr) minmax(320px, 455fr);
  align-items: start;
}

.jtc__register-main { padding-bottom: 48px; }

.jtc__register-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 267px;
  padding: 44px 0 44px 0;
  background: var(--forest-900) center/cover no-repeat;
  color: var(--on-forest);
  overflow: hidden;
}

.jtc__register-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 39, 32, .9) 0%, rgba(20, 39, 32, .6) 45%, rgba(20, 39, 32, .1) 78%);
}

.jtc__register-hero-inner {
  position: relative;
  z-index: 1;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
}

.jtc__register-body {
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-right: 48px;
}

.jtc__category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 20px;
}

/* The whole card is the control; the input is the accessible part of it. */
.jtc__category {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.jtc__category:hover { border-color: var(--sage); }

.jtc__category input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jtc__category-name {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--forest);
}

/* The same card with nothing to pick: the open groups, stated. */
.jtc__category--static { cursor: default; }
.jtc__category--static:hover { border-color: var(--rule); }

.jtc__category-meta {
  flex: none;
  font-size: 13px;
  color: var(--muted);
}

.jtc__category-mark {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--sage);
  border-radius: 50%;
}

.jtc__category input:checked ~ .jtc__category-mark {
  border-color: var(--forest);
  border-width: 5px;
}
.jtc__category:has(input:checked) {
  border-color: var(--forest);
  background: #fff;
}
.jtc__category input:focus-visible ~ .jtc__category-mark {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

.jtc__rule {
  height: 1px;
  background: var(--rule);
  margin-block: 40px;
}

.jtc__info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 20px;
}

.jtc__info {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-inline: 24px;
  border-left: 1px solid var(--rule);
}
.jtc__info:first-child { border-left: 0; padding-left: 0; }

.jtc__info-label { display: block; font-size: 14px; color: var(--muted); }

.jtc__info-value {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
}

/* Form panel */
.jtc__form-panel {
  background: var(--paper);
  border-left: 1px solid var(--rule);
  padding: 40px 44px 48px;
  min-height: 100%;
}

.jtc__form-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 22px;
}

/* Heading for a block of fields inside a form that already has a title. */
.jtc__form-title--group {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.jtc__field { margin-bottom: 18px; }

.jtc__field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  color: var(--muted);
}

.jtc__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font: inherit;
  font-size: 15px;
  color: var(--forest);
}
.jtc__input::placeholder { color: #9AA39E; }
.jtc__input:focus { border-color: var(--forest); outline: none; }

.jtc__phone { display: flex; }

.jtc__phone select {
  appearance: none;
  min-height: 48px;
  padding: 12px 28px 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-right: 0;
  font: inherit;
  font-size: 15px;
  color: var(--forest);
  cursor: pointer;
}

.jtc__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block: 24px 22px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}

.jtc__check input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--forest);
}

.jtc__form-note {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   Editorial pages
   -------------------------------------------------------------------------- */

/* The reset above strips margins and list bullets from the whole theme, which
   is right for a designed layout and wrong for a page written in the admin's
   editor. This puts them back, inside this block only. */
.jtc__prose {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
}

.jtc__prose h2,
.jtc__prose h3,
.jtc__prose h4 {
  margin-block: 34px 12px;
  color: var(--forest);
  line-height: 1.25;
}

.jtc__prose h2 { font-size: 24px; font-weight: 700; }
.jtc__prose h3 { font-size: 19px; font-weight: 700; }
.jtc__prose h4 { font-size: 16px; font-weight: 700; }

.jtc__prose > *:first-child { margin-top: 0; }

.jtc__prose p { margin-block: 0 16px; }

.jtc__prose ul,
.jtc__prose ol {
  margin-block: 0 18px;
  padding-left: 22px;
  list-style: disc;
}
.jtc__prose ol { list-style: decimal; }
.jtc__prose li { margin-bottom: 7px; }

.jtc__prose a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jtc__prose a:hover { opacity: .7; }

.jtc__prose strong { color: var(--forest); }

.jtc__prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 32px;
}

.jtc__prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.jtc__prose th,
.jtc__prose td {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  text-align: left;
}

.jtc__prose img { margin-block: 18px; }

.jtc__prose blockquote {
  margin: 0 0 18px;
  padding-left: 20px;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.jtc__notice {
  padding: 48px 40px;
  margin-top: 34px;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-align: center;
}

.jtc__notice-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--forest);
}

.jtc__notice-text {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Panels and alerts — the payment confirmation page, the one public page
   outside the slice that still reads and writes real data.
   -------------------------------------------------------------------------- */

.jtc__panel {
  padding: 26px 28px;
  margin-bottom: 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.jtc__panel-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.jtc__panel-code {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--forest);
  margin-bottom: 16px;
}

.jtc__panel-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 8px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}
.jtc__panel-row strong { color: var(--forest); }

.jtc__alert {
  padding: 16px 20px;
  margin-bottom: 22px;
  border-left: 3px solid var(--forest);
  background: var(--paper);
  color: var(--forest);
}

.jtc__alert--ok    { border-left-color: var(--success); color: var(--success); }
.jtc__alert--error { border-left-color: #A6402F; color: #A6402F; }

.jtc__section input[type="file"] { padding: 11px 14px; cursor: pointer; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .jtc__about { grid-template-columns: 1fr; }
  .jtc__about-figure { min-height: 340px; }
  .jtc__about-body { padding: 40px 0; grid-template-columns: 1fr; gap: 34px; }
  .jtc__pillars { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid var(--rule); }

  .jtc__numbers-inner { grid-template-columns: 1fr; gap: 32px; }

  .jtc__register { grid-template-columns: 1fr; }
  .jtc__register-hero-inner,
  .jtc__register-body { padding-inline: var(--gutter); }
  .jtc__form-panel { border-left: 0; border-top: 1px solid var(--rule); padding-inline: var(--gutter); }

  .jtc__winners-layout { grid-template-columns: 1fr; gap: 34px; }
  .jtc__aside { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid var(--rule); }
}

@media (max-width: 900px) {
  .jtc__nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 20px;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
  }
  .jtc__nav.is-open { display: flex; }
  .jtc__nav-link { padding-block: 14px; }
  .jtc__nav-link::after { display: none; }
  .jtc__nav-link.is-active { text-decoration: underline; text-underline-offset: 5px; }
  .jtc__nav .jtc__nav-cta { margin-top: 12px; }
  .jtc__burger { display: inline-flex; }
  .jtc__header { position: relative; }

  .jtc__hero { min-height: 520px; }
  .jtc__hero::after { background: linear-gradient(90deg, rgba(20,39,32,.88) 0%, rgba(20,39,32,.7) 60%, rgba(20,39,32,.45) 100%); }
  .jtc__hero-pillars { display: none; }
  .jtc__page-hero-pillars { display: none; }
  .jtc__page-hero::after { background: linear-gradient(90deg, rgba(20,39,32,.9) 0%, rgba(20,39,32,.72) 100%); }

  .jtc__facts { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .jtc__fact:nth-child(3) { border-left: 0; }

  .jtc__quick-grid { grid-template-columns: 1fr; }
  .jtc__quick-item { border-left: 0; border-top: 1px solid rgba(244,243,237,.22); }
  .jtc__quick-item:first-child { border-top: 0; }

  .jtc__stats { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .jtc__stat:nth-child(3) { border-left: 0; }

  .jtc__winner-grid { grid-template-columns: repeat(2, 1fr); }

  .jtc__category-grid { grid-template-columns: 1fr; }

  .jtc__info-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .jtc__info:nth-child(3) { border-left: 0; padding-left: 0; }

  .jtc__footer-top { flex-direction: column; align-items: flex-start; }
  .jtc__footer-nav { gap: 24px; }
}

@media (max-width: 560px) {
  .jtc { --gutter: 20px; }
  .jtc__facts { grid-template-columns: 1fr; }
  .jtc__fact { border-left: 0; }
  .jtc__stats { grid-template-columns: 1fr; }
  .jtc__stat { border-left: 0; padding-inline: 0; }
  .jtc__winner-grid { grid-template-columns: 1fr; }
  .jtc__info-grid { grid-template-columns: 1fr; }
  .jtc__info { border-left: 0; padding-left: 0; }
  .jtc__hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .jtc__hero-actions .jtc__btn { width: 100%; }
  .jtc__partners-row { justify-content: center; gap: 26px; }
  .jtc__partners-row img { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .jtc *, .jtc *::before, .jtc *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}