@font-face { font-family: Fredoka; font-weight: 400; font-display: swap; src: url(fonts/fredoka-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat Brush'; font-weight: 400; font-display: swap; src: url(fonts/caveat-brush-latin-400-normal.woff2) format('woff2'); }

:root {
  --oak-950: #1c110a; --oak-900: #2a1a10; --oak-800: #3b2516; --oak-700: #55351f;
  --kraft-ink: #2b1c10; --delft: #1f4e9c; --delft-deep: #143472; --porcelain: #f6f1e6;
  --brass: #d6a443; --brass-dark: #8c6420; --mosterd: #e9b23a;
  --text-on-oak: #fbeedd; --text-on-oak-muted: #d9c3a5;
  --font-ui: Fredoka, system-ui, sans-serif; --font-label: 'Caveat Brush', Fredoka, cursive;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-ui); font-size: 1rem; line-height: 1.55; color: var(--text-on-oak);
  background: radial-gradient(90% 60% at 50% 0%, var(--oak-800), var(--oak-950) 70%) fixed, var(--oak-950);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--mosterd); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }

.top { padding: 18px 0 8px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top__logo img { width: 150px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.5)); }
.top__play {
  padding: 9px 20px 10px; border-radius: 16px; font-weight: 600; text-decoration: none; color: #fff8ee;
  background: linear-gradient(180deg, #ff9a5a, #f0682f 55%, #d9501f);
  box-shadow: 0 0 0 2px var(--oak-900), 0 4px 0 2px #6e2010; text-shadow: 0 1px 0 #a3381f;
}

.sheet {
  margin: 16px 0 40px; padding: 26px 22px 30px; border-radius: 22px; color: var(--kraft-ink);
  background: var(--porcelain); box-shadow: inset 0 5px 0 var(--delft), 0 20px 40px rgb(0 0 0 / 0.45);
}
@media (min-width: 720px) { .sheet { padding: 40px 48px 44px; } }
.sheet h1 { margin: 0; font-family: var(--font-label); font-weight: 400; font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1; color: var(--kraft-ink); }
.sheet__updated { margin: 6px 0 18px; font-size: 0.9rem; color: #6b5a48; }
.sheet h2 { margin: 26px 0 6px; font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: var(--delft-deep); }
.sheet p { margin: 0 0 10px; }
.sheet a { color: var(--delft-deep); font-weight: 600; overflow-wrap: anywhere; }
.sheet__summary { margin: 0 0 8px; padding: 14px 18px 8px; border-radius: 14px; background: rgb(31 78 156 / 0.08); box-shadow: inset 0 0 0 2px rgb(31 78 156 / 0.18); }
.sheet__summary h2 { margin-top: 0; }
.sheet__summary ul { margin: 0 0 8px; padding-left: 1.1em; display: grid; gap: 4px; }

footer { padding: 24px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(214 164 67 / 0.2); font-size: 0.9rem; color: var(--text-on-oak-muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }