:root {
  /* Palette: Earthy Sand and Clay */
  --ufa-color-bg: #E7DAC0;
  --ufa-color-surface: #FAF3E4;
  --ufa-color-ink: #2A2018;
  --ufa-color-ink-muted: #5C5040;
  --ufa-color-border: #D8C7A5;
  --ufa-color-accent-1: #B5502F;
  --ufa-color-accent-2: #6E7A3F;
  --ufa-color-accent-1-ink: #FFFFFF;
  --ufa-color-focus: #B5502F;

  /* Typography */
  --ufa-font-title: 'Maitree', serif;
  --ufa-font-body: 'Noto Sans Thai Looped', sans-serif;
  --ufa-text-h1: 40px;
  --ufa-text-h2: 28px;
  --ufa-text-h3: 22px;
  --ufa-text-body: 17px;
  --ufa-text-small: 14px;
  --ufa-text-micro: 12px;
  --ufa-leading-title: 1.3;
  --ufa-leading-body: 1.65;
  --ufa-leading-tight: 1.2;

  /* Spacing Scale (8px rhythm) */
  --ufa-space-8: 8px;
  --ufa-space-16: 16px;
  --ufa-space-24: 24px;
  --ufa-space-32: 32px;
  --ufa-space-48: 48px;
  --ufa-space-64: 64px;

  /* Shape and Layout */
  --ufa-radius-card: 10px;
  --ufa-radius-btn: 999px;
  --ufa-container-max: 1180px;

  /* Motion: 180ms ease-out only for opacity and transform */
  --ufa-duration: 180ms;
  --ufa-ease: ease-out;
  --ufa-transition: opacity 180ms ease-out, transform 180ms ease-out;
}

/* Reset and Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: var(--ufa-color-bg);
  color: var(--ufa-color-ink);
  font-family: var(--ufa-font-body);
  font-size: var(--ufa-text-body);
  line-height: var(--ufa-leading-body);
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Common Layout Container and 16-Column Grid */
.ufa-container {
  width: 100%;
  max-width: var(--ufa-container-max);
  margin-inline: auto;
  padding-inline: var(--ufa-space-16);
}

.ufa-grid-16 {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: var(--ufa-space-16);
}

/* Interactive States and Focus */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ufa-color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   1. HEADER (split-header, logo center, menu 2 sides)
   ========================================================================== */
.ufa-header {
  background-color: var(--ufa-color-surface);
  border-bottom: 1px solid var(--ufa-color-border);
  padding-block: var(--ufa-space-16);
  position: relative;
  z-index: 100;
}

.ufa-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ufa-space-16);
}

.ufa-header__nav-left,
.ufa-header__nav-right {
  display: flex;
  align-items: center;
  gap: var(--ufa-space-24);
  list-style: none;
}

.ufa-header__nav-left {
  justify-content: flex-end;
}

.ufa-header__nav-right {
  justify-content: flex-start;
}

.ufa-header__logo {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h2);
  font-weight: 700;
  color: var(--ufa-color-ink);
  text-decoration: none;
  text-align: center;
  padding-inline: var(--ufa-space-16);
  border-inline: 1px solid var(--ufa-color-border);
  line-height: var(--ufa-leading-tight);
}

.ufa-header__link {
  color: var(--ufa-color-ink);
  text-decoration: none;
  font-size: var(--ufa-text-small);
  font-weight: 600;
  transition: var(--ufa-transition);
}

.ufa-header__link:hover {
  color: var(--ufa-color-accent-1);
  transform: translateY(-1px);
}

/* ==========================================================================
   2. HERO (title + 2 CTA buttons)
   ========================================================================== */
.ufa-hero {
  padding-block-start: var(--ufa-space-64);
  padding-block-end: var(--ufa-space-48);
  border-bottom: 1px solid var(--ufa-color-border);
}

.ufa-hero__layout {
  grid-column: 2 / span 14;
  text-align: center;
}

.ufa-hero__badge {
  display: inline-block;
  background-color: var(--ufa-color-accent-2);
  color: var(--ufa-color-surface);
  font-size: var(--ufa-text-micro);
  font-weight: 700;
  padding: var(--ufa-space-8) var(--ufa-space-16);
  border-radius: var(--ufa-radius-btn);
  margin-bottom: var(--ufa-space-16);
  text-transform: uppercase;
}

.ufa-hero__title {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h1);
  line-height: var(--ufa-leading-title);
  color: var(--ufa-color-ink);
  margin-bottom: var(--ufa-space-16);
  overflow-wrap: anywhere;
}

.ufa-hero__lede {
  color: var(--ufa-color-ink-muted);
  font-size: var(--ufa-text-body);
  line-height: var(--ufa-leading-body);
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--ufa-space-32);
}

.ufa-hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ufa-space-16);
  flex-wrap: wrap;
}

.ufa-hero__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ufa-color-accent-1);
  color: var(--ufa-color-accent-1-ink);
  border: 1px solid var(--ufa-color-accent-1);
  border-radius: var(--ufa-radius-btn);
  padding: var(--ufa-space-16) var(--ufa-space-32);
  font-size: var(--ufa-text-body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ufa-transition);
}

.ufa-hero__btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  color: var(--ufa-color-accent-1-ink);
}

.ufa-hero__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ufa-color-surface);
  color: var(--ufa-color-ink);
  border: 1px solid var(--ufa-color-border);
  border-radius: var(--ufa-radius-btn);
  padding: var(--ufa-space-16) var(--ufa-space-32);
  font-size: var(--ufa-text-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ufa-transition);
}

.ufa-hero__btn-secondary:hover {
  background-color: var(--ufa-color-bg);
  transform: translateY(-2px);
}

/* ==========================================================================
   3. MATCH-BOARD (card-based match and odds grid)
   ========================================================================== */
.ufa-match-board {
  padding-block: var(--ufa-space-48);
}

.ufa-match-board__header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--ufa-space-24);
  border-bottom: 2px solid var(--ufa-color-border);
  padding-bottom: var(--ufa-space-8);
}

.ufa-match-board__title {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h2);
  line-height: var(--ufa-leading-title);
  color: var(--ufa-color-ink);
}

.ufa-match-board__tag {
  color: var(--ufa-color-accent-2);
  font-weight: 700;
  font-size: var(--ufa-text-small);
}

.ufa-match-card {
  grid-column: span 8;
  background-color: var(--ufa-color-surface);
  border: 1px solid var(--ufa-color-border);
  border-radius: var(--ufa-radius-card);
  padding: var(--ufa-space-24);
  transition: var(--ufa-transition);
}

.ufa-match-card:hover {
  transform: translateY(-2px);
}

.ufa-match-card__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--ufa-space-16);
  font-size: var(--ufa-text-small);
  color: var(--ufa-color-ink-muted);
}

.ufa-match-card__teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ufa-space-16);
}

.ufa-match-card__team {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h3);
  font-weight: 700;
  color: var(--ufa-color-ink);
}

.ufa-match-card__vs {
  font-size: var(--ufa-text-small);
  color: var(--ufa-color-ink-muted);
}

.ufa-match-card__odds-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ufa-space-8);
}

.ufa-match-card__odd-pill {
  background-color: var(--ufa-color-bg);
  border: 1px solid var(--ufa-color-border);
  border-radius: var(--ufa-radius-card);
  padding: var(--ufa-space-8);
  text-align: center;
}

.ufa-match-card__odd-label {
  display: block;
  font-size: var(--ufa-text-micro);
  color: var(--ufa-color-ink-muted);
}

.ufa-match-card__odd-value {
  font-weight: 700;
  color: var(--ufa-color-accent-1);
}

/* ==========================================================================
   4. ODDS-GUIDE (odds explanation block, list format)
   ========================================================================== */
.ufa-odds-guide {
  padding-block: var(--ufa-space-48);
  background-color: var(--ufa-color-surface);
  border-block: 1px solid var(--ufa-color-border);
}

.ufa-odds-guide__container {
  grid-column: 2 / span 14;
}

.ufa-odds-guide__title {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h2);
  line-height: var(--ufa-leading-title);
  color: var(--ufa-color-ink);
  margin-bottom: var(--ufa-space-24);
  border-left: 4px solid var(--ufa-color-accent-2);
  padding-left: var(--ufa-space-16);
}

.ufa-odds-guide__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ufa-space-16);
}

.ufa-odds-guide__item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--ufa-space-16);
  padding: var(--ufa-space-16);
  background-color: var(--ufa-color-bg);
  border-radius: var(--ufa-radius-card);
  border: 1px solid var(--ufa-color-border);
}

.ufa-odds-guide__term {
  font-family: var(--ufa-font-title);
  font-weight: 700;
  font-size: var(--ufa-text-h3);
  color: var(--ufa-color-accent-1);
}

.ufa-odds-guide__desc {
  color: var(--ufa-color-ink);
  font-size: var(--ufa-text-body);
}

/* ==========================================================================
   5. LEAGUE-GRID (image card league grid)
   ========================================================================== */
.ufa-league-grid {
  padding-block: var(--ufa-space-48);
}

.ufa-league-grid__header {
  grid-column: 1 / -1;
  margin-bottom: var(--ufa-space-24);
}

.ufa-league-grid__title {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h2);
  color: var(--ufa-color-ink);
}

.ufa-league-card {
  grid-column: span 4;
  background-color: var(--ufa-color-surface);
  border: 1px solid var(--ufa-color-border);
  border-radius: var(--ufa-radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: var(--ufa-transition);
}

.ufa-league-card:hover {
  transform: translateY(-2px);
}

.ufa-league-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--ufa-color-border);
  overflow: hidden;
}

.ufa-league-card__body {
  padding: var(--ufa-space-16);
}

.ufa-league-card__name {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h3);
  font-weight: 700;
  color: var(--ufa-color-ink);
  margin-bottom: var(--ufa-space-8);
}

.ufa-league-card__count {
  font-size: var(--ufa-text-small);
  color: var(--ufa-color-ink-muted);
}

/* ==========================================================================
   6. LONGFORM (editorial article with subheadings)
   ========================================================================== */
.ufa-longform {
  padding-block: var(--ufa-space-48);
}

.ufa-longform__article {
  grid-column: 3 / span 12;
  background-color: var(--ufa-color-surface);
  border: 1px solid var(--ufa-color-border);
  border-radius: var(--ufa-radius-card);
  padding: var(--ufa-space-48);
}

.ufa-longform__h2 {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h2);
  line-height: var(--ufa-leading-title);
  color: var(--ufa-color-ink);
  margin-block-start: var(--ufa-space-32);
  margin-block-end: var(--ufa-space-16);
  border-bottom: 1px solid var(--ufa-color-border);
  padding-bottom: var(--ufa-space-8);
}

.ufa-longform__h2:first-of-type {
  margin-block-start: 0;
}

.ufa-longform__h3 {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h3);
  line-height: var(--ufa-leading-title);
  color: var(--ufa-color-accent-1);
  margin-block-start: var(--ufa-space-24);
  margin-block-end: var(--ufa-space-8);
}

.ufa-longform__p {
  color: var(--ufa-color-ink);
  font-size: var(--ufa-text-body);
  line-height: var(--ufa-leading-body);
  margin-bottom: var(--ufa-space-16);
}

.ufa-longform__highlight {
  background-color: var(--ufa-color-bg);
  border-left: 4px solid var(--ufa-color-accent-2);
  padding: var(--ufa-space-16);
  margin-block: var(--ufa-space-24);
  border-radius: 0 var(--ufa-radius-card) var(--ufa-radius-card) 0;
}

/* ==========================================================================
   7. FAQ (pure HTML accordion using details and summary)
   ========================================================================== */
.ufa-faq {
  padding-block: var(--ufa-space-48);
}

.ufa-faq__wrapper {
  grid-column: 3 / span 12;
}

.ufa-faq__title {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h2);
  color: var(--ufa-color-ink);
  text-align: center;
  margin-bottom: var(--ufa-space-32);
}

.ufa-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--ufa-space-16);
}

.ufa-faq__item {
  background-color: var(--ufa-color-surface);
  border: 1px solid var(--ufa-color-border);
  border-radius: var(--ufa-radius-card);
  overflow: hidden;
}

.ufa-faq__summary {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h3);
  font-weight: 700;
  color: var(--ufa-color-ink);
  padding: var(--ufa-space-16) var(--ufa-space-24);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--ufa-transition);
}

.ufa-faq__summary::-webkit-details-marker {
  display: none;
}

.ufa-faq__summary:hover {
  background-color: var(--ufa-color-bg);
}

.ufa-faq__summary::after {
  content: '+';
  font-family: var(--ufa-font-body);
  font-size: var(--ufa-text-h3);
  color: var(--ufa-color-accent-1);
}

.ufa-faq__item[open] .ufa-faq__summary::after {
  content: '-';
}

.ufa-faq__content {
  padding: 0 var(--ufa-space-24) var(--ufa-space-24) var(--ufa-space-24);
  color: var(--ufa-color-ink-muted);
  font-size: var(--ufa-text-body);
  line-height: var(--ufa-leading-body);
}

/* ==========================================================================
   8. CTA-FINAL (bottom CTA banner)
   ========================================================================== */
.ufa-cta-final {
  padding-block: var(--ufa-space-48);
}

.ufa-cta-final__banner {
  grid-column: 2 / span 14;
  background-color: var(--ufa-color-surface);
  border: 2px solid var(--ufa-color-accent-2);
  border-radius: var(--ufa-radius-card);
  padding: var(--ufa-space-48) var(--ufa-space-32);
  text-align: center;
}

.ufa-cta-final__title {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h1);
  line-height: var(--ufa-leading-title);
  color: var(--ufa-color-ink);
  margin-bottom: var(--ufa-space-16);
}

.ufa-cta-final__desc {
  color: var(--ufa-color-ink-muted);
  font-size: var(--ufa-text-body);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--ufa-space-32);
}

.ufa-cta-final__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ufa-color-accent-1);
  color: var(--ufa-color-accent-1-ink);
  border: none;
  border-radius: var(--ufa-radius-btn);
  padding: var(--ufa-space-16) var(--ufa-space-48);
  font-size: var(--ufa-text-body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ufa-transition);
}

.ufa-cta-final__btn:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  color: var(--ufa-color-accent-1-ink);
}

/* ==========================================================================
   9. FOOTER (multi-column: about, sitemap, external links)
   ========================================================================== */
.ufa-footer {
  background-color: var(--ufa-color-surface);
  border-top: 1px solid var(--ufa-color-border);
  padding-block-start: var(--ufa-space-48);
  padding-block-end: var(--ufa-space-32);
}

.ufa-footer__col-about {
  grid-column: span 6;
}

.ufa-footer__col-sitemap {
  grid-column: span 5;
}

.ufa-footer__col-links {
  grid-column: span 5;
}

.ufa-footer__brand {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h2);
  color: var(--ufa-color-ink);
  margin-bottom: var(--ufa-space-16);
}

.ufa-footer__text {
  color: var(--ufa-color-ink-muted);
  font-size: var(--ufa-text-small);
  line-height: var(--ufa-leading-body);
}

.ufa-footer__heading {
  font-family: var(--ufa-font-title);
  font-size: var(--ufa-text-h3);
  color: var(--ufa-color-ink);
  margin-bottom: var(--ufa-space-16);
  border-bottom: 2px solid var(--ufa-color-accent-2);
  padding-bottom: var(--ufa-space-8);
  display: inline-block;
}

.ufa-footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ufa-space-8);
}

.ufa-footer__link {
  color: var(--ufa-color-ink-muted);
  text-decoration: none;
  font-size: var(--ufa-text-small);
  transition: var(--ufa-transition);
}

.ufa-footer__link:hover {
  color: var(--ufa-color-accent-1);
  transform: translateX(2px);
}

.ufa-footer__bottom {
  grid-column: 1 / -1;
  margin-top: var(--ufa-space-32);
  padding-top: var(--ufa-space-16);
  border-top: 1px solid var(--ufa-color-border);
  text-align: center;
  font-size: var(--ufa-text-micro);
  color: var(--ufa-color-ink-muted);
}

/* ==========================================================================
   RESPONSIVE (Mobile 390px Adaptation)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --ufa-text-h1: 32px;
    --ufa-text-h2: 24px;
    --ufa-text-h3: 19px;
  }

  /* Header mobile adjustment */
  .ufa-header__inner {
    display: flex;
    flex-direction: column;
    gap: var(--ufa-space-16);
  }

  .ufa-header__logo {
    border-inline: none;
    padding-inline: 0;
  }

  .ufa-header__nav-left,
  .ufa-header__nav-right {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ufa-space-16);
  }

  /* Grid 16 Mobile Collapse */
  .ufa-hero__layout,
  .ufa-match-card,
  .ufa-odds-guide__container,
  .ufa-league-card,
  .ufa-longform__article,
  .ufa-faq__wrapper,
  .ufa-cta-final__banner,
  .ufa-footer__col-about,
  .ufa-footer__col-sitemap,
  .ufa-footer__col-links {
    grid-column: 1 / -1;
  }

  /* Section-specific Mobile Adjustments */
  .ufa-odds-guide__item {
    grid-template-columns: 1fr;
  }

  .ufa-longform__article {
    padding: var(--ufa-space-24) var(--ufa-space-16);
  }

  .ufa-cta-final__banner {
    padding: var(--ufa-space-32) var(--ufa-space-16);
  }

  .ufa-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .ufa-hero__btn-primary,
  .ufa-hero__btn-secondary,
  .ufa-cta-final__btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}