:root {
  color-scheme: light;
  --background: #f4ebda;
  --surface: #ebe0cb;
  --line: #bdb09b;
  --ink: #241d17;
  --muted: #574a3c;
  --accent: #873b26;
  --button-ink: #fff5e5;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--background);
  color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.55; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, summary:focus-visible, video:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
p, figure, h1, h2, h3 { margin: 0; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -.04em; }
.shell { width: min(1232px, calc(100% - 80px)); margin-inline: auto; }
.skip { position: absolute; top: 8px; left: 8px; z-index: 1; transform: translateY(-150%); background: var(--accent); color: var(--button-ink); padding: 10px; }
.skip:focus { transform: none; }

.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 15px; }
.site-header { display: grid; grid-template-columns: 1fr auto auto; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; text-transform: uppercase; font-weight: 900; letter-spacing: -.05em; white-space: nowrap; }
.brand span span { color: var(--accent); }
.site-nav { display: flex; gap: clamp(12px, 3vw, 36px); }
.site-nav a { display: grid; place-items: center; min-height: 44px; font-size: .94rem; font-weight: 650; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--accent); }
.site-nav a[aria-current] { text-decoration: underline; text-underline-offset: .25em; }
.language-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .82rem; }
.language-nav a { display: inline-grid; place-items: center; min-height: 44px; min-width: 44px; color: var(--muted); text-decoration: none; }
.language-nav a[aria-current], .language-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.site-header .language-nav { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.eyebrow { color: var(--accent); font: 750 .75rem/1.5 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .09em; }
.muted { color: var(--muted); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; background: currentColor; vertical-align: .06em; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.09fr); align-items: center; gap: clamp(22px, 4.5vw, 65px); padding-block: clamp(30px, 5vw, 64px) 32px; }
.hero h1, .chapter h2, .game-copy h2, .article-page h1, .article-page h2, .workshop-intro h1, .workshop-feedback h2 { font-family: Georgia, serif; }
.hero h1 { font-size: clamp(2.85rem, 5.2vw, 5.2rem); margin: 12px 0 16px; text-wrap: balance; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-summary { max-width: 37ch; color: var(--muted); font: 400 clamp(1.2rem, 2.5vw, 1.6rem)/1.4 Georgia, serif; }
.hero .button { margin-top: 22px; }
.host img { width: 100%; aspect-ratio: 1.65; object-fit: cover; object-position: center 45%; }
.host figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; color: var(--muted); font-size: .9rem; }
.host strong { color: var(--accent); font: 750 .8rem/1.5 ui-monospace, Menlo, monospace; letter-spacing: .06em; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; padding: .58rem .9rem; border: 1px solid transparent; font-weight: 760; font-size: .92rem; text-decoration: none; }
.button:hover { text-decoration: underline; text-underline-offset: .2em; }
.primary { background: var(--accent); color: var(--button-ink); }
.secondary { border-color: var(--line); }
.secondary:hover { border-color: var(--accent); }
.workbench { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(22px, 4.5vw, 60px); padding-block: 24px 36px; border-top: 1px solid var(--line); }
.media-panel {
  color-scheme: dark;
  --line: #766651;
  --ink: #f5ead6;
  --muted: #c7baa6;
  --accent: #efae64;
  --button-ink: #25190f;
  background: #211d18;
  color: var(--ink);
  padding: clamp(14px, 2.25vw, 30px);
}
.games-list { display: grid; gap: clamp(16px, 3vw, 28px); min-width: 0; }
.game-feature { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(16px, 2.5vw, 32px); scroll-margin-top: 16px; }
.game-art img { width: 100%; }
.game-copy h2 { margin: 5px 0 8px; font-size: clamp(1.8rem, 3vw, 2.75rem); }
.game-copy > p:not(.eyebrow), .video-copy > p, .story p:not(.eyebrow) { color: var(--muted); }
.game-copy .game-note { margin-top: 8px; font-size: .82rem; }
.workbench-notes > h2 { margin-bottom: 5px; }
.workbench-notes a { display: grid; gap: 2px; padding: 10px 0; text-decoration: none; }
.workbench-notes a + a { border-top: 1px solid var(--line); }
.workbench-notes a:hover strong { text-decoration: underline; text-underline-offset: .23em; }

.chapter { padding-block: clamp(32px, 5vw, 58px); border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.chapter-heading { margin-bottom: 22px; }
.chapter h2 { font-size: clamp(2rem, 4vw, 3.7rem); margin-top: 6px; }
.articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 52px); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: start; gap: 18px; }
.story img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story h3 { font: 700 clamp(1.35rem, 2.65vw, 2.3rem)/1.08 Georgia, serif; letter-spacing: -.025em; margin: 6px 0 8px; }
.story h3 a { text-decoration: none; }
.story h3 a:hover { text-decoration: underline; text-underline-offset: .14em; }
.video-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: clamp(18px, 4vw, 54px); }
.video-feature video { width: 100%; aspect-ratio: 16 / 9; background: #110f0d; }
.episode-languages { margin-top: 10px; }
.episode-languages span { color: var(--ink); font-weight: 650; }
details { margin-top: 12px; color: var(--muted); }
summary { cursor: pointer; min-height: 44px; padding-block: 9px; color: var(--accent); font-weight: 680; }
details p + p { margin-top: 8px; }
.video-credit { margin-top: 12px; font-size: .83rem; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.text-link { color: var(--accent); font-weight: 680; text-underline-offset: .2em; }

.article-page { width: min(760px, 100%); margin-inline: auto; padding-block: clamp(28px, 5vw, 54px) 66px; }
.article-page h1 { font-size: clamp(2.45rem, 6.6vw, 5rem); margin: 12px 0 18px; }
.article-page h2 { margin: 32px 0 10px; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.article-page .byline { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.article-page .dek { font: 400 clamp(1.2rem, 2.8vw, 1.48rem)/1.45 Georgia, serif; margin-bottom: 22px; }
.article-page .back { display: inline-block; margin-bottom: 26px; }
.article-page .prose { font: 400 clamp(1.07rem, 2vw, 1.17rem)/1.65 Georgia, serif; }
.prose > p + p, .prose li + li { margin-top: 12px; }
.article-page figure { margin-block: 24px; }
.article-page figure img { width: 100%; }
.article-page figcaption { margin-top: 7px; color: var(--muted); font-size: .87rem; }
.article-page .callout { border-left: 3px solid var(--accent); padding: 12px 16px; background: var(--surface); margin-block: 20px; }
.comparison { width: 100%; border-collapse: collapse; margin-block: 16px 22px; font-variant-numeric: tabular-nums; }
.comparison th, .comparison td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.comparison th:first-child, .comparison td:first-child { padding-left: 0; }
.comparison a { color: var(--accent); text-underline-offset: .16em; }
.article-page code { font-size: .85em; overflow-wrap: anywhere; }

.workshop-page { padding-block: clamp(32px, 6vw, 80px); }
.workshop-intro, .workshop-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 64px);
  align-items: start;
}
.workshop-intro h1 { margin: 10px 0 18px; font-size: clamp(2.6rem, 6vw, 5.7rem); }
.workshop-intro p + p { margin-top: 13px; }
.workshop-dek { font: 400 clamp(1.2rem, 2.5vw, 1.6rem)/1.4 Georgia, serif; }
.workshop-byline, .workshop-intro figcaption { color: var(--muted); font-size: .88rem; }
.workshop-intro figcaption { margin-top: 6px; }
.workshop-intro img { width: 100%; }
.workshop-feedback { margin-top: clamp(28px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); }
.workshop-feedback h2 { margin: 6px 0 12px; font-size: clamp(1.8rem, 4vw, 2.9rem); }
.workshop-feedback h3 { margin-bottom: 10px; font-size: 1.15rem; }
.workshop-feedback ul { margin: 0; padding-inline-start: 1.2em; color: var(--muted); }
.workshop-feedback li + li { margin-top: 6px; }
.workshop-feedback .button { margin-top: 16px; }
.feedback-pending { margin-top: 12px; color: var(--muted); }

@media (max-width: 960px) {
  .game-feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .shell { width: calc(100% - 36px); }
  .site-header { grid-template-columns: auto 1fr; gap: 0 8px; padding-block: 4px; }
  .site-header .language-nav { grid-row: 1; grid-column: 2; justify-self: end; padding-inline-start: 0; border-inline-start: 0; }
  .site-nav { grid-row: 2; grid-column: 1 / -1; justify-content: center; border-top: 1px solid var(--line); }
  .brand img { width: 27px; height: 27px; }
  .site-nav a { font-size: .89rem; }
  .hero, .workbench, .video-feature, .articles, .workshop-intro, .workshop-feedback { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(2.75rem, 9vw, 4.4rem); }
  .workbench-notes { border-top: 1px solid var(--line); padding-top: 16px; }
  .story { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: 12px; }
  .site-footer { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .shell { width: calc(100% - 28px); }
  .site-nav { gap: 10px; }
  .site-nav a { font-size: .83rem; }
  .brand { gap: 5px; font-size: .92rem; }
  .brand img { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }