:root {
  color-scheme: dark;
  --ink: #f9f9fa;
  --muted: #bdc3cb;
  --paper: #08090b;
  --panel: #17191e;
  --line: #34373e;
  --gold: #efc982;
  --sans: Arial, Helvetica, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
}
a { color: inherit; text-underline-offset: .22em; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.wrap { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.skip {
  position: absolute;
  inset-block-start: -6rem;
  inset-inline-start: 1rem;
  z-index: 3;
  padding: .6rem 1rem;
  background: white;
  color: #08090b;
}
.skip:focus { inset-block-start: 1rem; }

.site-header {
  position: relative;
  z-index: 1;
  padding-block-start: 18px;
}
.header-row, .utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 30px;
}
.brand {
  display: inline-block;
  font: 800 clamp(1.6rem, 3vw, 2.05rem)/1 var(--sans);
  letter-spacing: -.065em;
  text-decoration: none;
  white-space: nowrap;
}
.brand i { color: var(--gold); font-style: normal; }
.tagline {
  margin: 4px 0 0;
  font-size: .76rem;
  color: var(--muted);
}
.nav, .languages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 22px;
}
.nav a, .languages a { text-decoration: none; }
.nav { font-size: .88rem; font-weight: 700; }
.nav a:hover, .languages a:hover { color: var(--gold); }
.nav a:last-child {
  border: 1px solid #9b7946;
  border-radius: 999px;
  padding: .46rem 1rem;
}
.utility {
  border-block-start: 1px solid var(--line);
  padding-block: 7px;
  margin-block-start: 14px;
  color: var(--muted);
  font-size: .76rem;
}
.languages { gap: 4px 15px; }
.languages a { padding-block: .15rem; }
.languages a[aria-current="page"] {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
}
.kicker {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-panel {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(470px, 72vh, 670px);
  margin-inline: calc((100% - 100vw) / 2);
  padding: clamp(42px, 6vw, 78px) max(24px, calc((100vw - 1100px) / 2));
  text-align: center;
  background:
    linear-gradient(180deg, rgba(8,9,11,.48), rgba(8,9,11,.3) 53%, #08090b),
    url('/assets/editorial-hero.jpg') center 55% / cover no-repeat,
    #111a23;
}
.hero-inner { width: min(100%, 1040px); margin-inline: auto; }
.edition {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  margin: 0 0 .75rem;
}
.edition p { margin: 0; }
.edition span { color: var(--muted); font-size: .78rem; }
.hero-panel .story > .kicker { display: inline-block; margin-block-end: .5rem; }
.hero-panel h1 {
  margin: 0 auto;
  max-width: 17ch;
  font: 750 clamp(2.75rem, 6.1vw, 5.1rem)/1.03 var(--sans);
  letter-spacing: -.059em;
  text-wrap: balance;
}
.hero-title-accent { color: var(--gold); }
.hero-panel .story .hero-title-accent { display: block; }
.hero-panel .story > p {
  margin: 1.45rem auto 1.85rem;
  max-width: 56ch;
  color: #edf0f3;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}
.story h1 a, .story h2 a, .story h3 a { text-decoration: none; }
.story h2 a:hover, .story h3 a:hover { color: var(--gold); }
.read { color: var(--gold); font-weight: 700; font-size: .86rem; }
.hero-panel .read {
  display: inline-block;
  padding: .68rem 1.55rem;
  border-radius: 999px;
  color: #090a0c;
  background: #fff;
  text-decoration: none;
}
.hero-panel .read:hover { background: var(--gold); }
.choose h1 { max-width: 16ch; }
.choose .kicker { margin: 0 0 1rem; }
.language-cards {
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 2rem auto 0;
}
.language-cards a {
  display: grid;
  align-content: start;
  min-height: 95px;
  border: 1px solid #48505d;
  border-radius: 14px;
  padding: 1rem .75rem;
  background: #15191eea;
  text-decoration: none;
}
.language-cards a:hover { border-color: var(--gold); }
.language-cards strong { color: var(--gold); font-size: 1.13rem; }
.language-cards span { color: var(--muted); font-size: .76rem; }

.featured-cards, .cards {
  display: grid;
  gap: 18px;
}
.featured-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 34px 52px;
}
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.featured-cards .story, .cards .story {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(17px, 2.8vw, 34px);
}
.featured-cards .story:first-child {
  background: linear-gradient(145deg, #161f29, #111315 72%);
}
.featured-cards .story:nth-child(2) {
  background: linear-gradient(145deg, #27243d, #161518 72%);
}
.story h2, .story h3 {
  margin: .5em 0 .45em;
  line-height: 1.17;
  letter-spacing: -.027em;
}
.story h2 { font-size: clamp(1.35rem, 2.6vw, 2.05rem); }
.story h3 { font-size: 1.23rem; }
.story p { color: var(--muted); margin: 0 0 1.15rem; }
.featured-cards .read, .cards .read { margin-block-start: auto; }
.section { padding-block: 16px 54px; }
.section > h1, .section > h2 {
  margin: 0 0 1.25rem;
  font: 750 clamp(1.8rem, 4vw, 3rem)/1.12 var(--sans);
  letter-spacing: -.04em;
}

.crumb {
  margin-block-start: 26px;
  color: var(--muted);
  font-size: .84rem;
}
.article { max-width: 770px; margin: 34px auto 64px; }
.article h1, .article h2 {
  line-height: 1.12;
  letter-spacing: -.038em;
}
.article h1 { margin: .35em 0; font-size: clamp(2.15rem, 5.5vw, 4.25rem); }
.article h2 { margin: 1.55em 0 .55em; font-size: clamp(1.38rem, 3vw, 2rem); }
.article .deck { color: var(--muted); font-size: 1.19rem; }
.article .byline {
  padding-block: .75rem;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
}
.article p { max-width: 68ch; }
.illustration { display: block; width: 100%; height: auto; border-radius: 14px; }
.article .illustration { max-height: 340px; object-fit: cover; }
.rules-note {
  padding: .75rem 1rem;
  background: var(--panel);
  border-inline-start: 2px solid var(--gold);
  border-radius: 4px;
}
.rules-note a, .source a, .related a { color: var(--gold); }
.source { border-block-start: 1px solid var(--line); margin-block-start: 2.5rem; }
.article-table {
  width: 100%;
  margin-block: 1.65rem;
  border-collapse: collapse;
  text-align: start;
  font-size: .94rem;
}
.article-table caption { margin-block-end: .65rem; text-align: start; font-weight: 700; }
.article-table th, .article-table td {
  padding: .68rem .55rem;
  border-block-end: 1px solid var(--line);
  overflow-wrap: anywhere;
  vertical-align: top;
  text-align: start;
}
.article-table thead th { border-block-end-color: var(--gold); }
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding-block: 26px 38px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
}
footer strong { color: var(--ink); font-size: 1.15rem; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .kicker {
  letter-spacing: 0;
}

@media (max-width: 850px) {
  .wrap { width: calc(100% - 44px); }
  .nav { gap: 6px 15px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .language-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .header-row, .utility { gap: 8px 16px; }
  .nav { font-size: .78rem; }
  .nav a:last-child { padding: .25rem .65rem; }
  .utility > span { display: none; }
  .hero-panel { min-height: 440px; padding-block: 46px; }
  .hero-panel h1 { font-size: clamp(2.35rem, 10vw, 3.4rem); }
  .featured-cards, .cards { grid-template-columns: 1fr; }
  .featured-cards { margin-block: 25px 32px; }
  .language-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article { margin-block-start: 24px; }
  .article-table th, .article-table td { padding-inline: .36rem; }
  footer { display: block; }
}