/* Landing page (/about/), part 1: tokens, the bar and the language menu (the hero: about-hero.css).
   The game's own paper, ink and vermilion. */
:root {
  --paper: #f8f2e2; --paper-2: #efe6cf; --card: #fffaf0; --ink: #2a211b; --soft: #6a5a4c; --line: rgba(42, 33, 27, 0.12);
  --vermilion: #c8402b; --vermilion-dark: #a22f1e; --gold: #d9a640; --night: #1d2233; --sumi: #17130f; --sumi-2: #251e18;
  --spring: #f2a7bf; --summer: #6fae5c; --autumn: #e0762f; --winter: #9fb7d6;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px; --gutter: max(16px, 4vw); --bar-h: 62px;
}
/* Scripts the Japanese stacks do not cover. */
html[lang="zh-Hans"] { --serif: "Songti SC", "Noto Serif SC", serif; --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html[lang="zh-Hant"] { --serif: "Songti TC", "Noto Serif TC", serif; --sans: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
html[lang="ko"] { --serif: "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", serif; --sans: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
html[lang="th"] { --serif: "Thonburi", "Noto Serif Thai", "Leelawadee UI", serif; --sans: -apple-system, "Thonburi", "Noto Sans Thai", "Leelawadee UI", sans-serif; }
html[lang="ne"] { --serif: "Kohinoor Devanagari", "Noto Serif Devanagari", "Nirmala UI", serif; --sans: -apple-system, "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", sans-serif; }
html[lang="vi"], html[lang="en"], html[lang="pt-BR"], html[lang="es"], html[lang="fil"], html[lang="id"] { --serif: Georgia, "Times New Roman", serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.75; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img { display: block; width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.3; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--vermilion-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* The bar: dark over the hero, paper below it. */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: var(--bar-h); padding: 0 max(16px, env(safe-area-inset-left)); background: rgba(248, 242, 226, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: background 0.3s, border-color 0.3s; }
.bar.on-dark { background: linear-gradient(rgba(12, 10, 8, 0.62), rgba(12, 10, 8, 0)) border-box; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ink); text-decoration: none; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-weight: 700; white-space: nowrap; transition: color 0.3s; }
.bar.on-dark .brand { color: var(--paper); }
.brand svg { width: 26px; height: 26px; fill: var(--vermilion); flex: none; }
.go { display: inline-block; padding: 14px 36px; border-radius: 999px; background: var(--vermilion); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 18px; text-decoration: none; box-shadow: 0 8px 24px rgba(162, 47, 30, 0.38); transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
.go:hover { background: var(--vermilion-dark); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(162, 47, 30, 0.45); }
.go.small { padding: 8px 18px; font-size: 14px; box-shadow: none; white-space: nowrap; }

/* Language menu: one button, a sheet of 13 names written as their speakers write them. */
.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 6px 10px 6px 9px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; transition: color 0.3s, border-color 0.3s, background 0.15s; }
.lang-btn:hover { background: rgba(127, 110, 90, 0.12); }
.bar.on-dark .lang-btn { color: var(--paper); border-color: rgba(248, 242, 226, 0.25); }
.lang-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.lang-btn .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform 0.2s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(23, 19, 15, 0.28); }
.lang-menu[hidden] { display: none; }
.lang-menu button, .lang-chips a { display: grid; text-align: left; gap: 0; border: 0; background: none; padding: 8px 10px; border-radius: 10px; font: inherit; color: var(--ink); cursor: pointer; line-height: 1.35; }
.lang-menu button:hover { background: var(--paper-2); }
.lang-menu button small, .lang-chips a small { font-size: 11px; color: var(--soft); }
.lang-menu button[aria-current="true"] { background: var(--ink); color: var(--paper); }
.lang-menu button[aria-current="true"] small { color: #cfc4b0; }

@media (max-width: 700px) {
  .bar .go.small, .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}