/* =========================================================
   MATCH ARCHIVE
========================================================= */

.archive-page {
  padding-top: 10px;
}


/* =========================================================
   HERO
========================================================= */

.archive-hero {

  position: relative;

  min-height: 390px;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(280px, 0.5fr);

  align-items: center;

  gap: 50px;

  padding:
    55px 64px;

  color:
    #f7f1e6;

  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(204, 164, 88, 0.16),
      transparent 22rem
    ),
    linear-gradient(
      125deg,
      var(--nav-bg),
      var(--nav-bg-secondary)
    );

  border:
    1px solid
    rgba(209, 173, 106, 0.22);

  border-radius:
    var(--radius-xl);

  box-shadow:
    var(--shadow-lg);

}


/* decorative lines */

.archive-hero::before {

  content: "";

  position: absolute;

  inset: 15px;

  pointer-events: none;

  border:
    1px solid
    rgba(218, 184, 119, 0.15);

  border-radius:
    calc(var(--radius-xl) - 8px);

}


.archive-hero::after {

  content: "";

  position: absolute;

  left: 64px;

  right: 64px;

  bottom: 25px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(214, 179, 110, 0.35),
      transparent
    );

}


.archive-hero-copy {

  position: relative;

  z-index: 2;

  max-width: 760px;

}


.archive-hero .archive-label {

  color:
    var(--gold-300);

}


.archive-hero .display-title {

  max-width: 720px;

  color:
    #fffaf0;

  font-size:
    clamp(3.2rem, 6vw, 5.7rem);

}


.archive-hero .display-title em {

  display: block;

  color:
    var(--gold-300);

  font-style: italic;

}


.archive-hero-description {

  max-width: 630px;

  margin:
    22px 0 0;

  color:
    rgba(239, 235, 224, 0.67);

  font-size: 15px;

  line-height: 1.8;

}



/* =========================================================
   HERO STATS
========================================================= */

.archive-stat-row {

  display: flex;

  align-items: center;

  gap: 24px;

  margin-top: 36px;

}


.archive-stat {

  display: flex;

  flex-direction: column;

}


.archive-stat strong {

  color:
    #fffaf0;

  font-family:
    var(--font-display);

  font-size: 30px;

  font-weight: 600;

  line-height: 1;

}


.archive-stat span {

  margin-top: 5px;

  color:
    rgba(239, 235, 224, 0.52);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.archive-stat-divider {

  width: 1px;

  height: 38px;

  background:
    rgba(216, 181, 111, 0.25);

}



/* =========================================================
   HERO EMBLEM
========================================================= */

.archive-emblem {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-self: center;

  opacity: 0.88;

}


.archive-emblem-ring {

  width: 205px;

  height: 205px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(218, 184, 119, 0.55);

  border-radius: 50%;

  box-shadow:

    0 0 0 6px
    rgba(218, 184, 119, 0.04),

    0 0 0 13px
    rgba(218, 184, 119, 0.04);

}


.archive-emblem-inner {

  width: 165px;

  height: 165px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color:
    var(--gold-300);

  border:
    1px solid
    rgba(218, 184, 119, 0.30);

  border-radius: 50%;

  font-family:
    var(--font-display);

  text-align: center;

}


.archive-emblem-inner strong {

  margin:
    5px 0;

  font-size: 38px;

  letter-spacing:
    0.06em;

}


.emblem-small {

  font-size: 11px;

  letter-spacing:
    0.23em;

}


.emblem-rule {

  width: 90px;

  height: 1px;

  margin-top: 22px;

  background:
    var(--gold-400);

}


.emblem-year {

  margin-top: 7px;

  color:
    rgba(220, 189, 127, 0.68);

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.2em;

}



/* =========================================================
   INTRO
========================================================= */

.archive-intro {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin:
    44px 3px 20px;

}


.archive-intro h2 {

  margin:
    3px 0 5px;

  font-family:
    var(--font-display);

  font-size: 35px;

  font-weight: 600;

  line-height: 1;

}


.archive-intro p {

  margin: 0;

  color:
    var(--text-muted);

  font-size: 13px;

}


.archive-key {

  display: flex;

  align-items: center;

  gap: 18px;

  color:
    var(--text-muted);

  font-size: 11px;

  font-weight: 600;

}


.archive-key span {

  display: flex;

  align-items: center;

  gap: 6px;

}


.archive-key-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

}


.archive-key-dot.alternate {

  background:
    var(--section-alternate);

}


.archive-key-dot.minutes {

  background:
    var(--section-minutes);

}


.archive-key-dot.buzzer {

  background:
    var(--section-buzzer);

}



/* =========================================================
   YEARS
========================================================= */

.archive-years {

  display: grid;

  gap: 18px;

}


.archive-volume {

  overflow: hidden;

  background:
    var(--paper);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-md);

}


.archive-volume > summary::-webkit-details-marker,
.archive-round > summary::-webkit-details-marker {

  display: none;

}


.archive-volume > summary,
.archive-round > summary {

  list-style: none;

}



/* =========================================================
   YEAR HEADER
========================================================= */

.archive-volume-header {

  position: relative;

  min-height: 108px;

  display: flex;

  align-items: center;

  gap: 20px;

  padding:
    19px 25px;

  cursor: pointer;

  background:
    linear-gradient(
      90deg,
      var(--paper),
      var(--surface-soft)
    );

  transition:
    background var(--transition);

}


.archive-volume-header:hover {

  background:
    var(--surface-raised);

}


.archive-year-tab {

  flex:
    0 0 62px;

  width: 62px;

  height: 75px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color:
    var(--accent-text);

  background:
    var(--accent-soft);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 35%,
      var(--border)
    );

  border-radius:
    6px 6px 15px 6px;

  font-family:
    var(--font-display);

  line-height: 0.85;

}


.archive-year-tab span {

  font-size: 19px;

}


.archive-year-tab strong {

  font-size: 25px;

}


.archive-volume-title {

  flex: 1;

}


.archive-volume-kicker {

  display: block;

  margin-bottom: 2px;

  color:
    var(--accent-text);

  font-size: 9px;

  font-weight: 800;

  letter-spacing:
    0.15em;

  text-transform: uppercase;

}


.archive-volume-title h3 {

  margin: 0;

  color:
    var(--text);

  font-family:
    var(--font-display);

  font-size: 29px;

  font-weight: 600;

}


.archive-volume-title p {

  margin:
    2px 0 0;

  color:
    var(--text-muted);

  font-size: 11px;

}


.archive-volume-title p span {

  margin:
    0 5px;

}


.archive-current-badge {

  padding:
    5px 9px;

  color:
    var(--accent-text);

  background:
    var(--accent-soft);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 22%,
      transparent
    );

  border-radius:
    999px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing:
    0.08em;

  text-transform: uppercase;

}


.archive-chevron {

  width: 38px;

  height: 38px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--border);

  border-radius:
    50%;

}


.archive-chevron span {

  width: 8px;

  height: 8px;

  border-right:
    2px solid
    var(--text-muted);

  border-bottom:
    2px solid
    var(--text-muted);

  transform:
    rotate(45deg)
    translate(-2px, -2px);

  transition:
    transform var(--transition);

}


.archive-volume[open]
.archive-chevron span {

  transform:
    rotate(225deg)
    translate(-1px, -1px);

}



/* =========================================================
   YEAR BODY
========================================================= */

.archive-volume-body {

  padding:
    18px;

  background:
    var(--surface-soft);

  border-top:
    1px solid
    var(--border);

}


.archive-rounds {

  display: grid;

  gap: 10px;

}



/* =========================================================
   ROUND
========================================================= */

.archive-round {

  overflow: hidden;

  background:
    var(--surface-raised);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

}


.archive-round-header {

  min-height: 72px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding:
    12px 16px;

  cursor: pointer;

  transition:
    background var(--transition-fast);

}


.archive-round-header:hover {

  background:
    var(--surface-soft);

}


.archive-round-medallion {

  width: 42px;

  height: 42px;

  flex:
    0 0 42px;

  display: grid;

  place-items: center;

  color:
    var(--primary);

  background:
    var(--primary-soft);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 18%,
      transparent
    );

  border-radius:
    50%;

  font-family:
    var(--font-display);

  font-size: 13px;

  font-weight: 700;

}


.archive-round-4
.archive-round-medallion,
.archive-round-5
.archive-round-medallion,
.archive-round-6
.archive-round-medallion {

  color:
    var(--accent-text);

  background:
    var(--accent-soft);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 30%,
      transparent
    );

}


.archive-round-title {

  flex: 1;

}


.archive-round-title h4 {

  margin: 0;

  font-family:
    var(--font-display);

  font-size: 20px;

  font-weight: 600;

}


.archive-round-title span {

  display: block;

  margin-top: 1px;

  color:
    var(--text-muted);

  font-size: 10px;

}


.archive-round-meta {

  display: flex;

  align-items: baseline;

  gap: 5px;

  color:
    var(--text-muted);

}


.archive-round-meta strong {

  color:
    var(--text);

  font-family:
    var(--font-display);

  font-size: 21px;

}


.archive-round-meta span {

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.08em;

  text-transform: uppercase;

}


.archive-round-arrow {

  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  color:
    var(--text-muted);

  transition:
    transform var(--transition);

}


.archive-round[open]
.archive-round-arrow {

  transform:
    rotate(180deg);

}



/* =========================================================
   MATCH GRID
========================================================= */

.archive-match-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 11px;

  padding:
    14px;

  background:
    var(--surface-soft);

  border-top:
    1px solid
    var(--border);

}



/* =========================================================
   MATCH CARD
========================================================= */

.archive-match-card {

  position: relative;

  min-height: 180px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  padding:
    18px;

  background:
    var(--paper);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-xs);

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);

}


.archive-match-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 3px;

  height: 100%;

  background:
    var(--accent);

  transform:
    scaleY(0);

  transform-origin:
    bottom;

  transition:
    transform var(--transition-fast);

}


.archive-match-card:hover {

  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 50%,
      var(--border)
    );

  box-shadow:
    var(--shadow-md);

}


.archive-match-card:hover::before {

  transform:
    scaleY(1);

}


.archive-match-card-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 15px;

}


.archive-match-number {

  display: flex;

  flex-direction: column;

  color:
    var(--text-muted);

  font-size: 9px;

  font-weight: 800;

  letter-spacing:
    0.12em;

  text-transform: uppercase;

}


.archive-match-number strong {

  margin-top: 2px;

  color:
    var(--text);

  font-family:
    var(--font-display);

  font-size: 30px;

  font-weight: 600;

  line-height: 1;

}


.archive-match-arrow {

  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  color:
    var(--primary);

  background:
    var(--primary-soft);

  border-radius:
    var(--radius-sm);

  transition:
    background var(--transition-fast),
    color var(--transition-fast);

}


.archive-match-card:hover
.archive-match-arrow {

  color:
    var(--primary-text);

  background:
    var(--primary);

}


.archive-match-rule {

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 7px;

  margin:
    14px 0 10px;

}


.archive-match-rule span {

  height: 1px;

  background:
    var(--border);

}


.archive-match-rule i {

  width: 4px;

  height: 4px;

  background:
    var(--accent);

  transform:
    rotate(45deg);

}


.archive-match-card p {

  margin:
    0 0 14px;

  color:
    var(--text-muted);

  font-family:
    var(--font-display);

  font-size: 15px;

  line-height: 1.3;

}


.archive-match-sections {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

}


.match-section {

  padding:
    4px 7px;

  border-radius:
    999px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing:
    0.04em;

  text-transform: uppercase;

}


.match-section.alternate {

  color:
    var(--section-alternate);

  background:
    color-mix(
      in srgb,
      var(--section-alternate) 11%,
      transparent
    );

}


.match-section.minutes {

  color:
    var(--section-minutes);

  background:
    color-mix(
      in srgb,
      var(--section-minutes) 11%,
      transparent
    );

}


.match-section.buzzer {

  color:
    var(--section-buzzer);

  background:
    color-mix(
      in srgb,
      var(--section-buzzer) 11%,
      transparent
    );

}


.archive-match-action {

  margin-top: auto;

  padding-top: 15px;

  display: flex;

  justify-content: space-between;

  color:
    var(--text-faint);

  border-top:
    1px solid
    var(--border-soft);

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing:
    0.06em;

}


.archive-match-action span:last-child {

  color:
    var(--primary);

}



/* =========================================================
   EMPTY ARCHIVE
========================================================= */

.archive-empty {

  padding:
    70px 30px;

  text-align: center;

}


.archive-empty-mark {

  width: 64px;

  height: 72px;

  margin:
    0 auto 20px;

  display: grid;

  place-items: center;

  color:
    var(--accent);

  border:
    1px solid
    var(--accent);

  border-radius:
    8px 8px 17px 8px;

  font-family:
    var(--font-display);

  font-size: 22px;

}


.archive-empty h2 {

  margin:
    4px 0;

  font-family:
    var(--font-display);

  font-size: 28px;

}


.archive-empty p {

  margin: 0;

  color:
    var(--text-muted);

}



/* =========================================================
   ARCHIVE RESPONSIVE
========================================================= */

@media (max-width: 950px) {

  .archive-hero {

    grid-template-columns:
      1fr;

    min-height: auto;

  }


  .archive-emblem {

    display: none;

  }


  .archive-match-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


@media (max-width: 680px) {

  .archive-hero {

    padding:
      38px 25px;

    border-radius:
      var(--radius-lg);

  }


  .archive-stat-row {

    gap: 14px;

  }


  .archive-stat-divider {

    display: none;

  }


  .archive-stat {

    flex: 1;

  }


  .archive-intro {

    align-items: flex-start;

    flex-direction: column;

  }


  .archive-current-badge {

    display: none;

  }


  .archive-year-tab {

    flex-basis: 50px;

    width: 50px;

    height: 62px;

  }


  .archive-volume-header {

    padding:
      15px;

  }


  .archive-volume-title h3 {

    font-size: 23px;

  }


  .archive-round-meta {

    display: none;

  }


  .archive-match-grid {

    grid-template-columns:
      1fr;

  }

}


@media (max-width: 440px) {

  .archive-key {

    flex-wrap: wrap;

  }


  .archive-stat-row {

    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

  }


  .archive-stat:last-child {

    display: none;

  }

}
.archive-match-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;

  padding: 10px;

  background:
    var(--surface-soft);

  border-top:
    1px solid
    var(--border);
}


.archive-match-card {
  min-height: 92px;

  padding: 11px 12px;

  display: flex;
  flex-direction: column;

  background:
    var(--paper);

  border:
    1px solid
    var(--border);

  border-radius:
    9px;

  box-shadow:
    var(--shadow-xs);

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}


.archive-match-card:hover {
  transform:
    translateY(-1px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 45%,
      var(--border)
    );

  box-shadow:
    var(--shadow-sm);
}


.archive-match-card-top {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 8px;
}


.archive-match-number {
  display: flex;

  align-items: baseline;

  gap: 5px;

  color:
    var(--text-muted);

  font-size: 8px;

  font-weight: 800;

  letter-spacing:
    0.09em;

  text-transform: uppercase;
}


.archive-match-number strong {
  margin: 0;

  color:
    var(--text);

  font-family:
    var(--font-display);

  font-size: 20px;

  font-weight: 600;

  line-height: 1;
}


.archive-match-arrow {
  width: 26px;
  height: 26px;

  display: grid;

  place-items: center;

  color:
    var(--primary);

  background:
    var(--primary-soft);

  border-radius:
    6px;

  font-size: 12px;
}


.archive-match-rule {
  display: none;
}


.archive-match-card p {
  display: none;
}


.archive-match-sections {
  display: flex;

  gap: 4px;

  margin-top: 9px;
}


.match-section {
  padding:
    2px 5px;

  border-radius:
    999px;

  font-size: 7px;

  font-weight: 800;

  letter-spacing:
    0.03em;

  text-transform: uppercase;
}


.archive-match-action {
  margin-top: auto;

  padding-top: 8px;

  display: flex;

  justify-content: flex-end;

  border-top:
    1px solid
    var(--border-soft);

  font-size: 8px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing:
    0.06em;
}


.archive-match-action span:first-child {
  display: none;
}


.archive-match-action span:last-child {
  color:
    var(--primary);
}

@media (min-width: 1200px) {

  .archive-match-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }

}

/* =========================================================
   MATCH ARCHIVE — TABLET COMPACT MODE
========================================================= */

@media (max-width: 950px) {

  /* -------------------------------------------------------
     PAGE
  ------------------------------------------------------- */

  .archive-page {
    padding-top: 2px;
  }


  /* -------------------------------------------------------
     HERO
     Reduce ceremony, keep identity.
  ------------------------------------------------------- */

  .archive-hero {
    min-height: auto;

    grid-template-columns:
      1fr;

    gap: 0;

    padding:
      32px 34px;

    border-radius:
      var(--radius-lg);
  }


  .archive-emblem {
    display: none;
  }


  .archive-hero::after {
    left: 34px;
    right: 34px;

    bottom: 18px;
  }


  .archive-hero .display-title {
    max-width: 650px;

    font-size:
      clamp(2.8rem, 8vw, 4.3rem);

    line-height: .92;
  }


  .archive-hero-description {
    max-width: 560px;

    margin-top: 15px;

    font-size: 13px;

    line-height: 1.65;
  }


  .archive-stat-row {
    gap: 20px;

    margin-top: 23px;
  }


  .archive-stat strong {
    font-size: 24px;
  }


  .archive-stat span {
    font-size: 8px;
  }


  .archive-stat-divider {
    height: 30px;
  }


  /* -------------------------------------------------------
     INTRO
  ------------------------------------------------------- */

  .archive-intro {
    margin:
      30px 2px 15px;
  }


  .archive-intro h2 {
    font-size: 29px;
  }


  .archive-intro p {
    font-size: 11px;
  }


  .archive-key {
    gap: 11px;

    font-size: 9px;
  }


  /* -------------------------------------------------------
     YEAR VOLUMES
  ------------------------------------------------------- */

  .archive-years {
    gap: 12px;
  }


  .archive-volume {
    border-radius:
      var(--radius-md);

    box-shadow:
      var(--shadow-sm);
  }


  .archive-volume-header {
    min-height: 82px;

    gap: 14px;

    padding:
      13px 16px;
  }


  .archive-year-tab {
    flex-basis: 49px;

    width: 49px;
    height: 58px;

    border-radius:
      5px 5px 11px 5px;
  }


  .archive-year-tab span {
    font-size: 15px;
  }


  .archive-year-tab strong {
    font-size: 20px;
  }


  .archive-volume-kicker {
    font-size: 7px;
  }


  .archive-volume-title h3 {
    font-size: 23px;
  }


  .archive-volume-title p {
    font-size: 9px;
  }


  .archive-chevron {
    width: 31px;
    height: 31px;
  }


  .archive-volume-body {
    padding: 11px;
  }


  /* -------------------------------------------------------
     ROUNDS
  ------------------------------------------------------- */

  .archive-rounds {
    gap: 7px;
  }


  .archive-round {
    border-radius:
      var(--radius-sm);
  }


  .archive-round-header {
    min-height: 58px;

    gap: 10px;

    padding:
      8px 11px;
  }


  .archive-round-medallion {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    font-size: 11px;
  }


  .archive-round-title h4 {
    font-size: 17px;
  }


  .archive-round-title span {
    font-size: 8px;
  }


  .archive-round-meta strong {
    font-size: 17px;
  }


  .archive-round-meta span {
    font-size: 7px;
  }


  /* -------------------------------------------------------
     MATCH GRID
  ------------------------------------------------------- */

  .archive-match-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 6px;

    padding: 8px;
  }


  .archive-match-card {
    min-height: 78px;

    padding:
      9px 10px;
  }


  .archive-match-number {
    font-size: 7px;
  }


  .archive-match-number strong {
    font-size: 18px;
  }


  .archive-match-arrow {
    width: 23px;
    height: 23px;

    font-size: 10px;
  }


  .archive-match-sections {
    gap: 3px;

    margin-top: 7px;
  }


  .match-section {
    padding:
      2px 4px;

    font-size: 6px;
  }


  .archive-match-action {
    padding-top: 6px;

    font-size: 7px;
  }

}

/* =========================================================
   MATCH ARCHIVE — TRUE MOBILE ROW VERSION
========================================================= */

@media (max-width: 620px) {

  /* -------------------------------------------------------
     MATCH GRID
     One column. Tight spacing.
  ------------------------------------------------------- */

  .archive-match-grid {
    grid-template-columns: 1fr;

    gap: 4px;

    padding: 5px;

    background:
      var(--surface-soft);
  }


  /* -------------------------------------------------------
     MATCH CARD -> ROW
  ------------------------------------------------------- */

  .archive-match-card {
    min-height: 0;

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items: center;

    padding:
      10px 12px;

    border-radius:
      8px;

    box-shadow: none;

    background:
      var(--paper);

    border:
      1px solid
      var(--border);

    transition: none;
  }


  .archive-match-card:hover {
    transform: none;

    box-shadow: none;

    border-color:
      var(--border);
  }


  .archive-match-card::before {
    display: none;
  }


  /* -------------------------------------------------------
     TOP AREA
  ------------------------------------------------------- */

  .archive-match-card-top {
    display: contents;
  }


  /* -------------------------------------------------------
     MATCH LABEL
     "Match 01"
  ------------------------------------------------------- */

  .archive-match-number {
    display: inline-flex;

    flex-direction: row;

    align-items: baseline;

    gap: 6px;

    color:
      var(--text-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing:
      .08em;

    text-transform: uppercase;
  }


  .archive-match-number strong {
    margin: 0;

    color:
      var(--text);

    font-family:
      var(--font-display);

    font-size: 21px;

    font-weight: 600;

    line-height: 1;
  }


  /* -------------------------------------------------------
     HIDE DESKTOP-ONLY CLUTTER
  ------------------------------------------------------- */

  .archive-match-rule,
  .archive-match-card p,
  .archive-match-sections,
  .archive-match-action span:first-child {
    display: none;
  }


  /* -------------------------------------------------------
     RIGHT SIDE
  ------------------------------------------------------- */

  .archive-match-arrow {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    color:
      var(--primary);

    background:
      transparent;

    border-radius:
      0;

    font-size: 13px;
  }


  .archive-match-action {
    margin: 0;

    padding: 0;

    border-top: 0;

    display: none;
  }

}

@media (max-width: 620px) {

  .archive-match-arrow {
    width: auto;
    height: auto;

    padding: 0;

    background: none;

    color: var(--text-faint);

    font-size: 14px;
  }

}