:root {
  --ink: #202b3b;
  --paper: #faf9f6;
  --text: #2a2e35;
  --link: #316fa8;
  --sand: #f1ece3;
  --amber: #a96c24;
  --sage: #477463;
  --line: #ded9d0;
  --white: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: Inter, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; padding: .5rem .85rem; background: var(--ink); color: var(--white); }
.site-header { border-bottom: 1px solid var(--line); background: rgba(250,249,246,.96); }
.header-inner, .container { width: min(100% - 2.5rem, 72rem); margin: 0 auto; }
.header-inner { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.wordmark { color: var(--ink); font-size: 1.05rem; font-weight: 650; letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.primary-nav ul, .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.primary-nav a,
.footer-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 550;
}
.primary-nav a,
.footer-nav a { display: inline-block; border-radius: .2rem; transition: background-color .15s ease, color .15s ease; }
.primary-nav a { padding: .25rem .4rem; margin: -.25rem -.4rem; }
.primary-nav a:hover,
.footer-nav a:hover { color: var(--ink); background: var(--sand); }
.footer-nav a { font-weight: 500; }
main { padding: 4rem 0 5rem; }
.eyebrow { margin: 0 0 .5rem; color: var(--sage); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { color: var(--ink); line-height: 1.35; }
h1 { max-width: 17ch; margin: 0; font-size: clamp(2rem, 5vw, 3.45rem); letter-spacing: -.035em; }
h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
p { max-width: 70ch; }
.lead { max-width: 58ch; font-size: 1.15rem; }
.hero { padding-bottom: 3.25rem; border-bottom: 1px solid var(--line); }
.section { padding: 3rem 0; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.button { display: inline-block; margin-top: .75rem; padding: .65rem 1rem; border: 1px solid var(--link); border-radius: .2rem; background: transparent; color: var(--link); font-weight: 650; text-decoration: none; }
.button:hover { background: var(--link); color: var(--white); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { padding: 1.25rem; border: 1px solid var(--line); background: var(--white); }
.panel p:last-child { margin-bottom: 0; }
.note { padding: 1rem 1.15rem; border-left: 4px solid var(--amber); background: var(--sand); }
.status { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .6rem; border: 1px solid currentColor; border-radius: 99px; color: var(--amber); font-size: .84rem; font-weight: 700; }
.status::before { content: "!"; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: currentColor; color: var(--white); font-size: .7rem; }
.status.current { color: var(--sage); }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.5rem 0; border: 1px solid var(--line); background: var(--white); }
.meta div { padding: .8rem 1rem; border-right: 1px solid var(--line); }
.meta div:last-child { border-right: 0; }
.meta dt { color: var(--ink); font-size: .78rem; font-weight: 700; }
.meta dd { margin: .2rem 0 0; font-size: .92rem; }
.breadcrumbs { margin: 0 0 1.5rem; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: .35rem; color: #676a6f; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--white); }
table { width: 100%; min-width: 42rem; border-collapse: collapse; }
caption { padding: 1rem; text-align: left; color: var(--ink); font-weight: 700; }
th, td { padding: .9rem 1rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--sand); color: var(--ink); font-weight: 700; }
td:not(:first-child) { font-variant-numeric: tabular-nums; }
.empty { padding: 1.5rem; border: 1px solid var(--line); background: var(--sand); }
.definition-list { display: grid; grid-template-columns: minmax(10rem, 1fr) 3fr; border-top: 1px solid var(--line); }
.definition-list dt, .definition-list dd { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.definition-list dt { color: var(--ink); font-weight: 700; }
.site-footer { border-top: 1px solid var(--line); background: var(--sand); }
.footer-inner { width: min(100% - 2.5rem, 72rem); margin: 0 auto; padding: 2.5rem 0; }
.footer-nav { margin: 1rem 0; }
.footer-note { color: #555b63; font-size: .88rem; }

@media (max-width: 44rem) {
  .header-inner { align-items: flex-start; flex-direction: column; padding: 1rem 0; gap: .6rem; }
  .primary-nav ul { gap: .4rem 1rem; }
  main { padding-top: 2.5rem; }
  .grid, .grid.two, .meta { grid-template-columns: 1fr; }
  .meta div { border-right: 0; border-bottom: 1px solid var(--line); }
  .meta div:last-child { border-bottom: 0; }
  .definition-list { grid-template-columns: 1fr; }
  .definition-list dt { border-bottom: 0; padding-bottom: .15rem; }
  .definition-list dd { padding-top: .15rem; }
}
