/*
 * The site's look since October 2026: design E ("Kopiena"), chosen by the owner. It sits over
 * the ported Next.js styles (site.css) and the block styles (blocks.css) and changes the fonts,
 * the colours and the shapes: the logo's red is the accent, panels are a light tint of it,
 * corners are round. Hand-written; site.css stays generated.
 */

/*
 * Figtree for everything, headings in its heavier weights. Self-hosted, as every font here
 * (no external requests): OFL, from Google Fonts, as a variable font. The latin-ext file
 * carries the Latvian diacritics: do not drop it.
 */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext-variable.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-variable.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Source Serif 4 for the rules documents only: the sheet of paper (Rules_Documents) and its PDF.
 * Self-hosted, OFL, from Google Fonts: the roman as a variable font, and the italic for captions.
 */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext-variable.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-variable.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext-400-italic.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * The red takes over every use of the old gold accent (rules, the current page, pagination,
 * notices). Red is about 8:1 on white, so links can use it too. Medal colours stay.
 */
:root {
  --font-sans: 'Figtree', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-doc: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  --ink: #1d1a22;
  --ink-soft: #4a4450;
  --ink-faint: #6b6470;
  --rule: #f1dfe3;
  --rule-strong: #ecd3d9;
  --cream: #fbf1f3;

  --accent: #9c2140;
  --accent-hover: #7f1a34;
  --accent-subtle: #fbf1f3;
  --accent-contrast: #ffffff;
  --link: #9c2140;

  --radius: 0.875rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.25rem;
  --shadow: 0 16px 36px -12px rgb(156 33 64 / 22%);
}

a:hover {
  color: var(--accent-hover);
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  font-weight: 800;
}

/* --- header ----------------------------------------------------------------- */

.header__header {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}

.header__bar {
  min-height: 6.5rem;
}

/*
 * The whole logo, its name included: it is the brand, so there is no wordmark beside it.
 * The name is small within the logo, so the logo is large enough for the name to read.
 */
.header__logo {
  width: auto;
  height: 5rem;
  aspect-ratio: 680 / 395;
}

.header__submenu {
  border-radius: var(--radius-lg);
}

.header__submenu a {
  border-radius: 999px;
  padding-inline: var(--s-4);
}

.header__langOn {
  background: var(--brand);
}

@media (min-width: 72.0625rem) {
  .header__menu > li > a {
    padding: 0.65rem 1rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    transition:
      background 0.15s ease,
      color 0.15s ease;
  }

  .header__menu > li > a::after {
    display: none;
  }

  .header__menu > li > a:hover,
  .header__hasChildren:focus-within > a {
    color: var(--ink);
    background: var(--cream);
  }

  .header__menu > li > a[aria-current='page'] {
    color: var(--brand);
    background: var(--cream);
  }

  .header__menu > li > a.header__highlight,
  .header__menu > li > a.header__highlight[aria-current='page'] {
    margin-inline-start: var(--s-2);
    padding-inline: 1.35rem;
    background: var(--brand);
    color: var(--brand-ink);
  }

  .header__menu > li > a.header__highlight:hover {
    background: var(--brand-hover);
    color: var(--brand-ink);
  }
}

@media (max-width: 72rem) {
  .header__logo {
    height: 3.75rem;
  }

  .header__toggleLabel {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--cream);
  }

  .header__menu > li > a {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }

  .header__menu > li > a[aria-current='page'],
  .header__menu > li > a.header__highlight {
    color: var(--brand);
  }

  .header__menu > li > a.header__highlight {
    background: none;
    padding-inline: 0;
  }
}

/* --- footer ----------------------------------------------------------------- */

.footer__footer {
  background: var(--cream);
  border-top: 0;
  padding-block: var(--s-7) var(--s-6);
}

.footer__inner {
  align-items: flex-end;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.footer__logo {
  display: block;
  width: auto;
  height: 6rem;
  aspect-ratio: 680 / 395;
}

.footer__links a {
  color: var(--ink);
}

.footer__links a:hover {
  color: var(--brand);
}

/*
 * The social links (rs_social_links): round buttons, the network's mark drawn as a mask so it takes
 * the colour. In the footer they are centred between the logo and the links; in the header, between
 * the menu and the language toggle, where a phone has no room for them (the footer has them there).
 */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
}

.footer__links {
  justify-self: end;
}

@media (max-width: 60rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .footer__links {
    justify-self: start;
    flex-wrap: wrap;
  }
}

.rs-social {
  --size: 2.75rem;
  display: flex;
  flex: none;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-social li {
  margin: 0;
}

.rs-social .rs-social__link {
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--rule-strong);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.rs-social .rs-social__link:hover,
.rs-social .rs-social__link:focus-visible {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 0 2px var(--accent);
}

.rs-social__link::before {
  content: '';
  width: calc(var(--size) * 0.5);
  height: calc(var(--size) * 0.5);
  background: currentColor;
  mask: var(--mark) center / contain no-repeat;
}

.rs-social--header {
  --size: 2.25rem;
  gap: var(--s-2);
}

@media (max-width: 72rem) {
  .rs-social--header {
    display: none;
  }
}

.rs-social__link--facebook {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.2h-3.1V7.8c0-.9.3-1.5 1.6-1.5h1.7V3.4c-.3 0-1.3-.1-2.4-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.5V13h2.8v8z'/%3E%3C/svg%3E");
}

.rs-social__link--instagram {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.2'/%3E%3C/svg%3E");
}

.rs-social__link--youtube {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.5 5.5h11a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4h-11a4 4 0 0 1-4-4v-5a4 4 0 0 1 4-4zM10 9.2v5.6l5-2.8z'/%3E%3C/svg%3E");
}

/* --- buttons in page content ------------------------------------------------ */

.rich-text__prose .wp-block-button__link {
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
}

.rich-text__prose .is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--brand);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.rich-text__prose .is-style-outline > .wp-block-button__link:hover {
  background: var(--cream);
  color: var(--brand-hover);
}

/* --- articles and section heads --------------------------------------------- */

.views__articleHead,
.views__sectionHead {
  border-bottom: 0;
}

.views__articleDate {
  font-family: var(--font-sans);
  font-weight: 600;
}

.views__sectionTitle {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
}

/* --- news cards ------------------------------------------------------------- */

/* The photographs are mostly of people, and a tall one is cut to the card's width: keep the heads. */
.post-card__media img {
  object-position: 50% 35%;
}

.post-card__card {
  padding: 0.75rem 0.75rem var(--s-5);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
}

.post-card__card:hover {
  transform: translateY(-4px);
}

.post-card__media {
  border-radius: 1.25rem;
}

.post-card__body {
  padding: var(--s-4) 0.75rem 0;
}

.post-card__meta {
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
}

.post-card__meta time {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}

.post-card__cat {
  color: var(--brand);
}

.post-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.pagination__page {
  border-radius: 999px;
}

/* --- home: the hero, beside its photograph rather than over it --------------- */

.rs-hero-wrap {
  padding-top: clamp(var(--s-5), 4vw, var(--s-8));
}

.rs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(var(--s-6), 5vw, 4rem);
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.rs-hero .wp-block-cover__background {
  display: none;
}

.rs-hero .wp-block-cover__image-background {
  position: static;
  grid-column: 2;
  grid-row: 1;
  height: auto;
  aspect-ratio: 16 / 11;
  object-position: 50% 40%;
  border-radius: var(--radius-xl);
}

.rs-hero .wp-block-cover__inner-container {
  position: static;
  grid-column: 1;
  grid-row: 1;
  padding: 0;
}

.rs-hero h1 {
  max-width: 14ch;
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-shadow: none;
}

.rs-hero p {
  margin-top: var(--s-5);
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
  text-shadow: none;
}

.rs-hero .wp-block-button__link {
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 999px;
}

@media (max-width: 48rem) {
  .rs-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-hero .wp-block-cover__image-background {
    grid-column: 1;
    grid-row: 2;
  }
}

/* --- home: the "current" note, while a home page still has it ---------------- */

.rs-current h2 {
  border-bottom: 0;
}

.rs-current__panel {
  background: var(--cream);
  border-radius: var(--radius-xl);
  padding: var(--s-6);
}

.rs-current .wp-block-button__link {
  border-radius: 999px;
  padding-inline: var(--s-6);
}

/*
 * --- home: a feature card (core Group "rs-feature", the theme's pattern) -----------------
 * Red, with the text on one side and a photograph filling the other.
 */

.rs-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-top: var(--s-8);
  overflow: hidden;
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius-xl);
}

.rs-feature .wp-block-group__inner-container {
  display: contents;
}

.rs-feature__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-5);
  padding: clamp(var(--s-6), 4.5vw, 3.5rem);
}

.rs-feature :is(h2, p) {
  margin: 0;
}

.rs-feature h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
}

.rs-feature p {
  max-width: 48ch;
  font-size: 1.125rem;
  line-height: 1.6;
}

.rs-feature .rs-feature__tag {
  align-self: flex-start;
  padding: 0.35rem 0.9rem;
  background: var(--paper);
  color: var(--brand);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 700;
}

.rs-feature .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.rs-feature .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 var(--s-5);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}

.rs-feature .wp-block-button__link:hover {
  background: var(--cream);
  color: var(--ink);
}

.rs-feature .is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 2px var(--brand-ink);
}

.rs-feature .is-style-outline > .wp-block-button__link:hover {
  background: rgb(255 255 255 / 14%);
}

.rs-feature :focus-visible {
  outline-color: var(--brand-ink);
}

.rs-feature .rs-feature__media {
  position: relative;
  min-height: 20rem;
  margin: 0;
}

.rs-feature .rs-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 52rem) {
  .rs-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-feature .rs-feature__media {
    min-height: 15rem;
  }
}

/*
 * --- home: the support note (core Group "rs-support", the theme's pattern) ---------------
 * The logo is drawn by the style, so the note's content is only text and a button.
 */

.rs-support {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-8);
  padding: var(--s-6) clamp(var(--s-5), 4vw, 3.5rem);
  background: var(--cream);
  border-radius: var(--radius-xl);
}

.rs-support::before {
  content: '';
  grid-row: 1 / span 2;
  width: 8.5rem;
  aspect-ratio: 680 / 395;
  background: url('../img/logo.png') center / contain no-repeat;
}

.rs-support .wp-block-group__inner-container {
  display: contents;
}

.rs-support :is(h2, p) {
  grid-column: 2;
  margin: 0;
}

.rs-support h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 800;
}

.rs-support p {
  color: var(--ink-soft);
}

.rs-support .wp-block-buttons {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.rs-support .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 var(--s-6);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.rs-support .wp-block-button__link:hover {
  background: var(--brand-hover);
  color: var(--brand-ink);
}

@media (max-width: 52rem) {
  .rs-support {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-support::before,
  .rs-support :is(h2, p),
  .rs-support .wp-block-buttons {
    grid-column: 1;
    grid-row: auto;
  }

  .rs-support .wp-block-buttons {
    margin-top: var(--s-3);
  }
}

/* --- achievements: one list, with the results as podiums ---------------------- */

/* The intro paragraph, a paragraph block with the class rs-lede. */
.rich-text__prose .rs-lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* The year strip above the list: plain links to each year's heading. */
.rs-years ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.rs-years a {
  display: block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.rs-years a:hover,
.rs-years a:focus-visible {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* A year heading carries the year's medals: a dot in the medal's colour and a count. */
.rs-timeline__year {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  scroll-margin-top: 6rem; /* the sticky header */
}

.rs-tally {
  display: inline-flex;
  gap: var(--s-3);
}

.rs-tally__n {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.rs-tally__n::before {
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--medal);
}

.rs-tally__n--1 {
  --medal: var(--gold);
}

.rs-tally__n--2 {
  --medal: var(--silver);
}

.rs-tally__n--3 {
  --medal: var(--bronze);
}

/* A note (history, a founding) has a hollow dot: it is not a result. */
.rs-timeline__item--note .rs-timeline__dot {
  background: var(--paper);
  border: 2px solid var(--accent);
}

.rs-timeline__item--results .rs-timeline__dot,
.rs-timeline__item--quote .rs-timeline__dot {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.78rem;
}

.rs-timeline__body p + :is(.rs-podium, blockquote) {
  margin-top: var(--s-3);
}

/* The podium: one row per discipline, the places as round badges beside the robots' names. */
.rs-podium {
  margin: var(--s-3) 0 0;
  padding: var(--s-1) var(--s-4);
  background: var(--accent-subtle);
  border-radius: var(--radius);
}

.rs-podium__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.rs-podium__row + .rs-podium__row {
  border-top: 1px solid var(--rule-strong);
}

/* Not uppercased: "iRobot Sumo" has to keep its spelling. */
.rs-podium dt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.rs-podium dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
}

.rs-podium__place {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.rs-podium__name {
  font-weight: 700;
  color: var(--ink);
}

/* "Blitz (Einārs Deksnis)": the builder after the robot, quieter. */
.rs-podium__builder {
  font-weight: 500;
  color: var(--ink-faint);
}

/* The medals take the colours the results tables use; a place from 4 on is plain. */
.rs-podium__rank {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  border: 2px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
}

.rs-podium__rank--1 {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.rs-podium__rank--2 {
  background: var(--silver);
  border-color: var(--silver);
  color: #fff;
}

.rs-podium__rank--3 {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff;
}

/* A quote entry: the quote is the card. */
.rs-timeline__item--quote blockquote {
  margin: var(--s-3) 0 0;
  padding: var(--s-5);
  border-inline-start-width: 4px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.rs-timeline__item--quote blockquote p {
  color: var(--ink);
}

.rs-timeline__item--quote blockquote cite {
  display: block;
  margin-top: var(--s-3);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

/*
 * The place after an entry's title, "Robogames | Kalifornija, ASV": the bar is drawn here, and the
 * place is quieter than the name. On a phone it is a line of its own, without the bar.
 */
.rs-timeline__place {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-faint);
  white-space: nowrap;
}

.rs-timeline__place::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline: 0.65em;
  vertical-align: -0.14em;
  border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 30%, var(--paper));
}

/* The same place on the entry's own page, under its title, with a pin. */
.rs-achievement__place {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: var(--s-2) 0 0;
  color: var(--ink-soft);
  font-weight: 600;
}

.rs-achievement__place::before {
  content: '';
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * A highlighted entry (its "Highlight" field, for a world title): a gold card with the label on
 * a gold tag, a larger title and podium, and a gold dot on the rail level with the tag. The tag is
 * the same on the entry's own page, above its date.
 */
.rs-timeline__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 var(--s-3);
  padding: 0.3rem 0.9rem 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.rs-timeline__badge::before {
  content: '';
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4.5a3 3 0 0 0 3 4.5M17 6h2.5a3 3 0 0 1-3 4.5M12 14v3.5M8 20.5h8M9.5 17.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.views__articleHead .rs-timeline__badge {
  margin-bottom: var(--s-2);
}

.rs-timeline__item--highlight .rs-timeline__card {
  margin: var(--s-2) 0 var(--s-5);
  padding: var(--s-5) var(--s-6) var(--s-6);
  border: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%),
    color-mix(in srgb, var(--gold) 6%, var(--paper));
  box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--gold) 75%, transparent);
}

.rs-timeline__item--highlight .rs-timeline__dot {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: calc(var(--s-2) + 2px + var(--s-5) + 0.32rem);
  background: var(--gold);
  box-shadow:
    0 0 0 4px var(--paper),
    0 0 0 7px color-mix(in srgb, var(--gold) 35%, transparent);
}

.rs-timeline .rs-timeline__item--highlight .rs-timeline__title {
  font-size: var(--t-h2);
}

.rs-timeline__item--highlight .rs-timeline__body p {
  color: var(--ink);
}

.rs-timeline__item--highlight .rs-podium {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent);
}

.rs-timeline__item--highlight .rs-podium__rank {
  min-width: 2.5rem;
  height: 2.5rem;
  font-size: 1.125rem;
}

.rs-timeline__item--highlight .rs-podium__rank--1 {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
}

.rs-timeline__item--highlight .rs-podium__name {
  font-size: 1.25rem;
}

@media (max-width: 40rem) {
  .rs-podium {
    padding: var(--s-1) var(--s-3);
  }

  .rs-podium__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .rs-timeline__item--quote blockquote {
    padding: var(--s-4);
    font-size: 1.125rem;
  }

  .rs-timeline__place {
    display: block;
    margin-top: 0.15rem;
    white-space: normal;
  }

  .rs-timeline__place::before {
    display: none;
  }

  .rs-timeline__item--highlight .rs-timeline__card {
    padding: var(--s-4) var(--s-4) var(--s-5);
  }

  .rs-timeline__item--highlight .rs-timeline__dot {
    margin-top: calc(var(--s-2) + 2px + var(--s-4) + 0.32rem);
  }

  .rs-timeline__item--highlight .rs-podium__name {
    font-size: 1.125rem;
  }
}

/* --- the medal count: [robotuskola_medals], and the head of the achievements list --------- */

/* Three medals, the number of first, second and third places in each, the place beneath. */
.rs-medals {
  margin-top: var(--s-5);
}

.rs-medals .rs-medals__title {
  margin: 0 0 var(--s-3);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-faint);
}

.rs-medals .rs-medals__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-medals .rs-medals__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}

.rs-medals__item--1 {
  --medal: var(--gold);
  --on-medal: var(--ink);
}

.rs-medals__item--2 {
  --medal: var(--silver);
  --on-medal: #fff;
}

.rs-medals__item--3 {
  --medal: var(--bronze);
  --on-medal: #fff;
}

/* The ring around the medal is the same colour, faint. */
.rs-medals__count {
  display: grid;
  place-items: center;
  min-width: 3.75rem;
  height: 3.75rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--medal);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--medal) 18%, transparent);
  color: var(--on-medal);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rs-medals__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* On the home page the hero's own paragraph rules would otherwise make these large. */
.rs-hero .rs-medals {
  margin-top: var(--s-6);
}

.rs-hero .rs-medals .rs-medals__title {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.rs-medals + .rs-years ul {
  margin-top: var(--s-5);
}

/*
 * --- rules: the rules page (block patterns "rules" and "rules-en") --------------------------------
 * The season as a line with a calendar, the notice with its mark, then the rules every discipline
 * shares as one wide button, and the disciplines in two columns of cards: electronics on the left,
 * LEGO and freestyle on the right (the Group "rs-rules__columns"). A card is a header with the
 * group's icon, heading and line, and its documents as rows: core Buttons in the style "rule-cards",
 * each row a whole link. The icons are drawn here, by the group's class, so the content is only a
 * heading, a line and the buttons.
 */

.rich-text__prose p.rs-rules__season {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  color: var(--ink-soft);
  font-size: var(--t-small);
  font-weight: 600;
}

.rich-text__prose p.rs-rules__season::before {
  content: '';
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c2140' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The notice: a rose box with a round mark, no rule down its side. */
.rich-text__prose > blockquote:has(+ .rs-rules__group) {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  max-width: 48rem;
  margin: var(--s-4) 0 var(--s-5);
  padding: 0.9rem 1.1rem;
  background: var(--cream);
  border: 0;
  border-radius: var(--radius);
}

.rich-text__prose > blockquote:has(+ .rs-rules__group)::before {
  content: '!';
  display: grid;
  flex: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.rich-text__prose > blockquote:has(+ .rs-rules__group) p {
  margin: 0;
}

.rs-rules__group .wp-block-group__inner-container {
  display: contents;
}

.rich-text__prose .rs-rules__group :is(h2, p) {
  margin: 0;
}

.rs-rules__group--general { --rs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5c2.8-1.2 5.6-1.1 8.5.9 2.9-2 5.7-2.1 8.5-.9v13c-2.8-1.2-5.6-1.1-8.5.9-2.9-2-5.7-2.1-8.5-.9z'/%3E%3Cpath d='M12 6.4v13.4'/%3E%3C/svg%3E"); }
.rs-rules__group--electronics { --rs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c2140' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 5 13.5h6L10 22l9-12h-6.2z'/%3E%3C/svg%3E"); }
.rs-rules__group--lego { --rs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c2140' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='9' width='17' height='10' rx='1.8'/%3E%3Ccircle cx='8.5' cy='6.2' r='1.7'/%3E%3Ccircle cx='15.5' cy='6.2' r='1.7'/%3E%3C/svg%3E"); }
.rs-rules__group--freestyle { --rs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c2140' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2z'/%3E%3C/svg%3E"); }
.rs-rules__group--archive { --rs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c2140' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18'/%3E%3C/svg%3E"); }

/* The rules every discipline shares: one wide button, the whole box a link to the document. */
.rich-text__prose .rs-rules__group--general {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem var(--s-4);
  width: 100cqw;
  margin: 0 0 var(--s-5);
  padding: var(--s-4) clamp(var(--s-4), 3vw, 1.4rem);
  background: #fff;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius-lg);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.rich-text__prose .rs-rules__group--general:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.rs-rules__group--general::before {
  content: '';
  grid-row: 1 / span 2;
  width: 2.9rem;
  aspect-ratio: 1;
  background: var(--accent) var(--rs-icon) center / 1.5rem no-repeat;
  border-radius: 0.75rem;
}

.rich-text__prose .rs-rules__group--general h2 {
  grid-column: 2;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
}

.rich-text__prose .rs-rules__group--general p {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: var(--t-small);
}

.rich-text__prose .rs-rules__group--general .wp-block-buttons {
  grid-column: 3;
  grid-row: 1 / span 2;
  margin: 0;
}

.rich-text__prose .rs-rules__group--general .is-style-rule-cards .wp-block-button__link {
  display: inline-flex;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
}

.rich-text__prose .rs-rules__group--general .is-style-rule-cards .wp-block-button__link:hover {
  background: none;
  color: var(--accent-hover);
}

.rich-text__prose .rs-rules__group--general .is-style-rule-cards .wp-block-button__link::after {
  content: '→';
  margin: 0;
  color: inherit;
  font-weight: 400;
}

/* The link covers the box, so the whole button answers; it stays clear on hover. */
.rich-text__prose .rs-rules__group--general .is-style-rule-cards .wp-block-button__link::before,
.rich-text__prose .rs-rules__group--general .is-style-rule-cards .wp-block-button__link:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: inherit;
  mask: none;
}

@media (max-width: 40rem) {
  .rich-text__prose .rs-rules__group--general {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rich-text__prose .rs-rules__group--general .wp-block-buttons {
    grid-column: 2;
    grid-row: auto;
    margin-top: var(--s-2);
  }
}

/* The disciplines: electronics beside LEGO and freestyle, one column on a phone. */
.rich-text__prose .rs-rules__columns {
  width: 100cqw;
  margin: 0;
}

.rs-rules__columns > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

@media (min-width: 46rem) {
  .rs-rules__columns > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
  }

  .rs-rules__columns .rs-rules__group--electronics {
    grid-row: 1 / span 2;
  }
}

/* A card: the header (icon, heading, line) on a pale band, the documents as rows under it. */
.rich-text__prose .rs-rules__columns .rs-rules__group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-3);
  margin: 0;
  overflow: hidden;
  background: #fdf8f9;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius-lg);
}

.rs-rules__columns .rs-rules__group::before {
  content: '';
  grid-row: 1 / span 2;
  align-self: start;
  width: 2.15rem;
  aspect-ratio: 1;
  margin: var(--s-4) 0 0 1.1rem;
  background: #fff var(--rs-icon, none) center / 1.15rem no-repeat;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 0.6rem;
}

.rich-text__prose .rs-rules__columns .rs-rules__group h2 {
  grid-column: 2;
  padding: var(--s-4) 1.1rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

.rich-text__prose .rs-rules__columns .rs-rules__group p {
  grid-column: 2;
  padding: 0.1rem 1.1rem var(--s-4) 0;
  color: var(--ink-soft);
  font-size: var(--t-small);
}

.rich-text__prose .rs-rules__columns .wp-block-buttons.is-style-rule-cards {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  background: #fff;
  border-top: var(--hairline) solid var(--rule-strong);
}

.is-style-rule-cards .wp-block-button {
  display: contents;
}

.rich-text__prose .is-style-rule-cards .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0.8rem 1.1rem;
  background: #fff;
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}

.rich-text__prose .is-style-rule-cards .wp-block-button:first-child .wp-block-button__link {
  border-top: 0;
}

.rich-text__prose .is-style-rule-cards .wp-block-button__link:hover {
  background: var(--cream);
  border-color: var(--rule);
  color: var(--accent);
}

/* The document, a small outline that turns red with the row (a mask, so it takes the colour). */
.rich-text__prose .is-style-rule-cards .wp-block-button__link::before {
  content: '';
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--ink-faint);
  border-radius: 0;
  box-shadow: none;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rich-text__prose .is-style-rule-cards .wp-block-button__link:hover::before {
  background: var(--accent);
}

/* An arrow for a document; PDF, in a small box, where the link is a file. */
.rich-text__prose .is-style-rule-cards .wp-block-button__link::after {
  content: '→';
  flex: none;
  margin-inline-start: auto;
  color: var(--ink-faint);
  font-weight: 400;
}

.rich-text__prose .is-style-rule-cards .wp-block-button__link:hover::after {
  color: var(--accent);
}

.rich-text__prose .is-style-rule-cards .wp-block-button__link:is([href$='.pdf'], [href$='.PDF'])::after {
  content: 'PDF';
  padding: 0.1rem 0.4rem;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 0.35rem;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* The closing line, after the cards. */
.rich-text__prose .rs-rules__columns + p {
  margin-top: var(--s-5);
  color: var(--ink-soft);
}

/*
 * --- the season (class Season, spec §4) --------------------------------------------------------
 * The season's page: its two documents as large red buttons (core Buttons in the style
 * "season-documents"; the icon follows the address, a spreadsheet or a document), then the stages
 * by month, each with a date tile. Held stages fade, the next one is outlined with how long until
 * it, and a red line is today. The competitions page: the season in short (.rs-now) and the series as
 * cards (the Group "rs-series").
 */

.rich-text__prose .wp-block-buttons.is-style-season-documents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-3);
  width: 100cqw;
  margin: var(--s-5) 0 var(--s-6);
}

.is-style-season-documents .wp-block-button {
  display: contents;
}

.rich-text__prose .is-style-season-documents .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 4.6rem;
  margin: 0;
  padding: var(--s-4) 1.4rem;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  transition:
    background-color 0.16s ease,
    transform 0.16s ease;
}

.rich-text__prose .is-style-season-documents .wp-block-button__link:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-2px);
}

.rich-text__prose .is-style-season-documents .wp-block-button__link::before {
  content: '';
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  background: #fff;
  border-radius: 0;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rich-text__prose .is-style-season-documents .wp-block-button__link[href*='docs.google.com/spreadsheets']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M3.5 15h17M9.5 4.5v15'/%3E%3C/svg%3E");
}

.rich-text__prose .is-style-season-documents .wp-block-button__link::after {
  content: '→';
  flex: none;
  margin-inline-start: auto;
  font-size: 1.35rem;
  font-weight: 400;
}

/* The stages by month: the month on the left, its stages as rows on the right. */
.rs-season {
  display: grid;
  gap: var(--s-5);
  width: 100cqw;
  margin: var(--s-5) 0;
}

.rs-season__month {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.rich-text__prose .rs-season__monthName {
  margin: 0;
  padding-top: 0.95rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

.rs-season__monthName span {
  color: var(--ink-faint);
  font-weight: 600;
}

.rich-text__prose .rs-season__stages {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rich-text__prose .rs-season__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
}

.rs-season__tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  align-content: center;
  min-width: 3.4rem;
  height: 3.4rem;
  padding-inline: 0.4rem;
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rs-season__tile b {
  font-size: 1.25rem;
  font-weight: 800;
}

.rs-season__tile span {
  margin-top: 0.3rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rs-season__what {
  display: grid;
  flex: 1;
  min-width: 12rem;
}

.rs-season__name {
  font-weight: 700;
  line-height: 1.3;
}

.rs-season__meta {
  color: var(--ink-faint);
  font-size: var(--t-small);
}

.rs-season__state {
  flex: none;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.rs-season__state.is-held {
  background: #f4f1f2;
  color: var(--ink-faint);
}

.rs-season__state.is-held::before {
  content: '✓ ';
}

.rs-season__state.is-next {
  background: var(--accent);
  color: #fff;
}

/* A stage's registration: a small outlined button; greyed, with a note above it on hover, without a link. */
.rich-text__prose .rs-season__register {
  position: relative;
  flex: none;
  padding: 0.35rem 0.8rem;
  border: var(--hairline) solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.rich-text__prose a.rs-season__register:hover {
  background: var(--accent);
  color: #fff;
}

.rich-text__prose .rs-season__register.is-pending {
  border-color: var(--rule-strong);
  color: var(--ink-faint);
  cursor: help;
}

/* Read out always; shown as a note above the button on hover. */
.rs-season__note {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  right: 0;
  padding: 0.3rem 0.6rem;
  background: var(--ink);
  border-radius: 0.4rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  clip-path: inset(50%);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.rs-season__register:hover .rs-season__note {
  clip-path: none;
  opacity: 1;
}

.rs-season__stage.is-held .rs-season__tile {
  background: #f4f1f2;
  color: var(--ink-faint);
}

.rs-season__stage.is-held .rs-season__name {
  color: var(--ink-faint);
  font-weight: 600;
}

.rich-text__prose .rs-season__stage.is-next {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.rs-season__stage.is-next .rs-season__tile {
  background: var(--accent);
  color: #fff;
}

.rich-text__prose .rs-season__today {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rs-season__today::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--accent);
}

@media (max-width: 40rem) {
  .rs-season__month {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .rich-text__prose .rs-season__monthName {
    padding-top: 0;
  }
}

/* The season in short, on the competitions page: where it stands, and the next stage beside it. */
.rs-now {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--s-4);
  width: 100cqw;
  margin: 0 0 var(--s-6);
  padding: clamp(var(--s-4), 3vw, var(--s-6));
  background: var(--cream);
  border-radius: var(--radius-lg);
}

.rs-now__main {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.rich-text__prose .rs-now__eyebrow,
.rs-now__label {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rich-text__prose .rs-now__title {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 800;
}

.rich-text__prose .rs-now__title a {
  color: var(--ink);
  text-decoration: none;
}

.rich-text__prose .rs-now__title a:hover {
  color: var(--accent);
}

.rich-text__prose .rs-now__status {
  margin: 0;
  color: var(--ink-soft);
}

.rich-text__prose .rs-now__track {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  max-width: 32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rich-text__prose .rs-now__track li {
  height: 8px;
  margin: 0;
  background: var(--rule-strong);
  border-radius: 4px;
}

.rich-text__prose .rs-now__track li.is-held {
  background: var(--accent);
}

.rich-text__prose .rs-now__track li.is-next {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.rs-now__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.rich-text__prose .rs-now__link {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.1rem;
  background: #fff;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.rich-text__prose .rs-now__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.rich-text__prose .rs-now__link.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.rich-text__prose .rs-now__link.is-primary:hover {
  background: var(--accent-hover);
  color: #fff;
}

.rich-text__prose .rs-now__next {
  display: grid;
  align-content: start;
  gap: 0.1rem;
  padding: var(--s-5);
  background: #fff;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.16s ease;
}

.rich-text__prose .rs-now__next:hover {
  box-shadow: var(--shadow);
  color: var(--ink);
}

.rs-now__day {
  margin-top: var(--s-2);
  color: var(--accent);
  font-size: 3.4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rs-now__date {
  color: var(--ink-soft);
  font-weight: 600;
}

.rs-now__name {
  margin-top: var(--s-3);
  font-weight: 700;
  line-height: 1.3;
}

.rs-now__place {
  color: var(--ink-faint);
  font-size: var(--t-small);
}

@media (max-width: 46rem) {
  .rs-now {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The series: a card each, the whole card a link (the heading's link covers it). */
.rich-text__prose .rs-series {
  width: 100cqw;
  margin: var(--s-4) 0 var(--s-6);
}

.rs-series > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-3);
}

.rich-text__prose .rs-series__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-5) 1.4rem;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius-lg);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.rich-text__prose .rs-series__card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.rs-series__card .wp-block-group__inner-container {
  display: contents;
}

.rich-text__prose .rs-series__card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.rich-text__prose .rs-series__card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.rich-text__prose .rs-series__card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rich-text__prose .rs-series__card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.rich-text__prose .rs-series__card p.rs-series__more {
  margin-top: var(--s-1);
  color: var(--accent);
  font-size: var(--t-small);
  font-weight: 700;
}

.rs-series__more::after {
  content: ' →';
}

/*
 * --- rules documents: one discipline's rules as a page (class Rules_Documents, spec §4) -------------
 * A bar with the way back, the other language and the PDF; then the document as a sheet of paper on
 * a desk, in the document serif: one header line, the title, its contents, sections numbered by the
 * page, each rule with its number, notes in a box, tables ruled in black and figures with their
 * captions. The other rules of the season are rows under the sheet. Printed (or saved as a PDF) the
 * sheet is the page: A4, the number of each page at its foot.
 */

.rs-doc__bar {
  background: #fff;
  border-bottom: var(--hairline) solid var(--rule);
}

.rs-doc__barInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-3);
}

.rs-doc__back {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
}

.rs-doc__back:hover {
  color: var(--accent);
}

.rs-doc__langs {
  display: inline-flex;
  padding: 2px;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 999px;
  font-size: var(--t-micro);
  font-weight: 800;
}

.rs-doc__langs > * {
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
}

.rs-doc__langs [aria-current] {
  background: var(--accent);
  color: #fff;
}

.rs-doc__langs a {
  color: var(--ink-faint);
  text-decoration: none;
}

.rs-doc__langs a:hover {
  color: var(--accent);
}

.rs-doc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-inline-start: auto;
}

.rs-doc__pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.6rem 1.05rem;
  background: var(--accent);
  border-radius: var(--radius);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
}

.rs-doc__pdf::before {
  content: '';
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0l-4.5-4.5M12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rs-doc__pdf:hover {
  background: var(--accent-hover);
  color: #fff;
}

.rs-doc__print {
  color: var(--ink-faint);
  font-size: var(--t-small);
  font-weight: 600;
}

@media (max-width: 50rem), (hover: none) {
  .rs-doc__print {
    display: none;
  }
}

/* The desk and the sheet. */
.rs-doc__desk {
  display: grid;
  justify-items: center;
  gap: var(--s-6);
  padding: clamp(var(--s-4), 4vw, var(--s-7)) clamp(0.6rem, 4vw, var(--s-7)) var(--s-8);
  background: #efe9eb;
}

.rs-doc__paper {
  width: min(100%, 50rem);
  padding: clamp(1.4rem, 5vw, 3.5rem) clamp(1.1rem, 6vw, 4rem) clamp(1.6rem, 5vw, 3.5rem);
  background: #fff;
  box-shadow:
    0 1px 2px rgb(29 26 34 / 12%),
    0 16px 36px -18px rgb(29 26 34 / 32%);
  color: #1d1a22;
  font-family: var(--font-doc);
}

.rs-doc__kicker {
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--hairline) solid #1d1a22;
  color: var(--ink-faint);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.03em;
}

.rs-doc__head h1 {
  margin: 0 0 var(--s-5);
  font-family: var(--font-doc);
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

/* The contents, a box at the top of the sheet. */
.rs-doc__toc {
  margin-bottom: var(--s-6);
  padding: var(--s-3) var(--s-4);
  background: #faf7f8;
  border: var(--hairline) solid #ece4e7;
  font-family: var(--font-sans);
}

.rs-doc__tocTitle {
  margin: 0 0 var(--s-2);
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rs-doc__toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.2rem var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-doc__toc a {
  color: var(--accent);
  font-size: var(--t-small);
  line-height: 1.4;
  text-decoration: none;
}

.rs-doc__toc a:hover {
  text-decoration: underline;
}

.rs-doc__tocNum {
  font-variant-numeric: tabular-nums;
}

/* The text. */
.rs-doc__body {
  font-size: 1.04rem;
  line-height: 1.62;
}

.rs-doc__section {
  margin-bottom: var(--s-6);
  scroll-margin-top: 6.5rem;
}

.rs-doc__heading {
  margin: 0 0 var(--s-3);
  font-family: var(--font-doc);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  break-after: avoid;
}

.rs-doc__num::after {
  content: '. ';
}

.is-appendix > .rs-doc__heading {
  padding-top: var(--s-4);
  border-top: var(--hairline) dashed #b9adb2;
}

.rs-doc__subheading {
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--font-doc);
  font-size: 1.05rem;
}

.rs-doc__body p {
  margin: 0 0 var(--s-3);
}

.rs-doc__body a {
  color: var(--accent);
}

/* The rules: the number in the margin, the text beside it. */
.rs-doc__rules {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-doc__rule {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: var(--s-2);
}

.rs-doc__n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

@media (max-width: 40rem) {
  .rs-doc__rule {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
}

.rs-doc__n::after {
  content: '.';
}

.rs-doc__t > :last-child {
  margin-bottom: 0;
}

.rs-doc__bullets,
.rs-doc__sub {
  margin: var(--s-2) 0;
  padding: 0;
  list-style: none;
}

.rs-doc__bullets > li,
.rs-doc__sub > li {
  position: relative;
  margin: 0.25rem 0;
  padding-inline-start: 1.3rem;
}

.rs-doc__bullets > li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.68em;
  inset-inline-start: 0.25rem;
  width: 0.38rem;
  height: 0.38rem;
  background: #1d1a22;
  border-radius: 50%;
}

.rs-doc__bullets .rs-doc__bullets > li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #1d1a22;
}

.rs-doc__sub {
  counter-reset: rs-sub;
}

.rs-doc__sub > li {
  counter-increment: rs-sub;
}

.rs-doc__sub > li::before {
  content: counter(rs-sub, lower-alpha) ')';
  position: absolute;
  inset-inline-start: 0;
}

/* A note: a rule or a paragraph that starts NB!, in a ruled box. */
.rs-doc__rule.is-note,
.rs-doc__note {
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-4);
  background: #faf7f8;
  border: var(--hairline) solid #d9cfd3;
}

.rs-doc__rule.is-note {
  padding-inline-start: var(--s-3);
}

.rs-doc__footnote {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Tables and figures, each with its caption. */
.rs-doc__tablewrap,
.rs-doc__figure {
  margin: var(--s-4) 0;
  break-inside: avoid;
}

.rs-doc__scroll {
  overflow-x: auto;
}

.rs-doc__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.45;
}

.rs-doc__table :is(th, td) {
  padding: 0.45rem 0.7rem;
  border: var(--hairline) solid #1d1a22;
  vertical-align: top;
}

.rs-doc__table th {
  background: #f6f3f4;
  font-weight: 700;
  vertical-align: bottom;
}

.rs-doc__body figcaption {
  margin-top: var(--s-2);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}

.rs-doc__figure img {
  display: block;
  max-width: min(100%, 34rem);
  height: auto;
  margin: 0 auto;
}

/* The other rules of the season: rows under the sheet. */
.rs-doc__others {
  width: min(100%, 50rem);
}

.rs-doc__others h2 {
  margin: 0 0 var(--s-3);
  color: var(--ink-faint);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rs-doc__others ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--rule-strong);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  list-style: none;
}

.rs-doc__others a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 100%;
  padding: 0.75rem var(--s-4);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.rs-doc__others a::after {
  content: '→';
  color: var(--ink-faint);
  font-weight: 400;
}

.rs-doc__others a:hover {
  background: var(--cream);
  color: var(--accent);
}

.rs-doc__others a:hover::after {
  color: var(--accent);
}

/* Printed (or saved as a PDF): the sheet alone, A4, black on white, the page number at the foot. */
@page {
  size: A4;
  margin: 16mm 16mm 18mm;

  @bottom-right {
    content: counter(page) ' / ' counter(pages);
    color: #555;
    font-family: Figtree, sans-serif;
    font-size: 8pt;
  }
}

@media print {
  .header__header,
  .footer__footer,
  .skip-link,
  .rs-doc__bar,
  .rs-doc__others {
    display: none !important;
  }

  .rs-rules-doc {
    background: #fff;
    color: #000;
  }

  .rs-doc__desk {
    display: block;
    padding: 0;
    background: none;
  }

  .rs-doc__paper {
    width: auto;
    padding: 0;
    box-shadow: none;
    color: #000;
  }

  .rs-doc__toc {
    break-inside: avoid;
  }

  .rs-doc__toc a,
  .rs-doc__body a {
    color: #000;
  }

  .rs-doc__body {
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .rs-doc__rule {
    break-inside: avoid;
  }

  .rs-doc__rule.is-note,
  .rs-doc__note {
    background: none;
    border-color: #000;
  }

  .rs-doc__table th {
    background: #eee;
  }
}
