:root {
  --ink: #1c1b19;
  --paper: #faf8f4;
  --accent: #a3242d;   /* ラオス国旗の赤に寄せた基調色 */
  --accent2: #1f3f77;  /* 国旗の青 */
  --line: #d8d2c6;
}
* { box-sizing: border-box; }
body {
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink); background: var(--paper);
  margin: 0; line-height: 1.7;
}
header, main, footer { max-width: 52rem; margin: 0 auto; padding: 0 1rem; }
header { padding-top: 2rem; }
h1 { margin: 0; font-size: 1.9rem; }
h1 .sub { font-size: 1rem; font-weight: normal; color: var(--accent); margin-left: .5rem; }
.tagline { color: #555; font-size: .95rem; }
h2 { border-left: 6px solid var(--accent); padding-left: .5rem; font-size: 1.2rem; margin-top: 2.2rem; }
#map { width: 100%; overflow-x: auto; }
#map svg { display: block; margin: 0 auto; background: #fffdf9; border: 1px solid var(--line); border-radius: 6px; }
#map circle { fill: var(--accent); cursor: pointer; }
#map circle:hover { fill: var(--accent2); }
#map text { font-size: 11px; fill: #444; pointer-events: none; }
.note { font-size: .8rem; color: #777; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { border: 1px solid var(--line); padding: .4rem .6rem; text-align: left; vertical-align: top; }
thead th { background: #f1ece2; }
tbody tr:hover { background: #f7f2e8; cursor: pointer; }
td[lang="lo"] { font-size: 1.05rem; }
#detail dl { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem .8rem; }
#detail dt { color: #666; }
#detail dd { margin: 0; }
footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.2rem 1rem 2rem; font-size: .8rem; color: #666; }
a { color: var(--accent2); }
@media (max-width: 40rem) {
  #detail dl { grid-template-columns: 1fr; }
  table { font-size: .8rem; }
}