:root {
  --night: #130d0e;
  --night-2: #1c1314;
  --glow: #3a1c1e;
  --gold: #c9a24a;
  --gold-faint: rgba(201, 162, 74, 0.22);
  --paper: #efe4cc;
  --muted: #a39373;
  --serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background:
    radial-gradient(ellipse at 50% 0%, var(--glow) 0%, rgba(19, 13, 14, 0) 60%) no-repeat,
    var(--night);
  color: var(--paper);
  font-family: var(--serif);
  line-height: 1.8;
}

a { color: var(--gold); }

.hero {
  padding: 56px 16px 28px;
  text-align: center;
}

.hero-emblem { width: 132px; height: auto; filter: drop-shadow(0 0 28px rgba(201, 162, 74, 0.25)); }
.hero-kicker { margin: 18px 0 0; font-size: 14px; letter-spacing: 0.5em; padding-left: 0.5em; color: var(--gold); }
.hero-title { margin: 2px 0 0; font-size: clamp(44px, 11vw, 76px); font-weight: 900; letter-spacing: 0.12em; padding-left: 0.12em; line-height: 1.2; color: var(--gold); }
.hero-verse { margin: 10px 0 0; font-size: 18px; letter-spacing: 0.2em; }
.hero-meta { margin: 14px 0 0; font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: 0.05em; }

.page { max-width: 880px; margin: 0 auto; padding: 0 16px 32px; }

.today {
  margin: 0 0 40px;
  padding: 22px 24px;
  border: 1px solid var(--gold-faint);
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, 0.02);
}

.today-label { margin: 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em; color: var(--gold); }
.today-verse { margin: 8px 0 0; font-size: 19px; line-height: 2; }
.today-source { margin: 6px 0 0; text-align: right; font-size: 13px; color: var(--muted); }

.section {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px;
}

.section::after { content: ""; flex: 1; height: 1px; background: var(--gold-faint); }

.doors {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.door {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px 20px;
  border: 1px solid var(--gold-faint);
  background: var(--night-2);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}

.door:hover, .door:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.door-main { background: linear-gradient(160deg, #2a1a17, var(--night-2)); border-color: rgba(201, 162, 74, 0.5); }
.door-kind { font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; color: var(--gold); }
.door-title { margin-top: 4px; font-size: 19px; font-weight: 600; }
.door-text { margin-top: 8px; font-family: var(--sans); font-size: 13px; line-height: 1.8; color: var(--muted); }

.route-lead, .route-after { margin: 0; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.route-list { list-style: none; margin: 14px 0; padding: 0; counter-reset: route; }
.route-list li { counter-increment: route; }

.route-list a {
  display: grid;
  grid-template-columns: 2.4em 6em 1fr;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--gold-faint);
  color: var(--paper);
  text-decoration: none;
}

.route-list a::before { content: counter(route); font-size: 22px; font-weight: 900; color: var(--gold); text-align: center; }
.route-list a:hover .route-name { color: var(--gold); }
.route-no { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.route-name { font-size: 18px; font-weight: 600; }
.route-note { grid-column: 2 / -1; font-family: var(--sans); font-size: 13px; color: var(--muted); }

.foot {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  border-top: 1px solid var(--gold-faint);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}

.foot p { margin: 0 0 6px; }

@media (min-width: 640px) {
  .route-list a { grid-template-columns: 2.4em 6em 13em 1fr; }
  .route-note { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .door { transition: none; }
}

.updates { margin-top: 40px; }
.updates-list { list-style: none; margin: 0 0 12px; padding: 0; }

.updates-list li {
  display: grid;
  grid-template-columns: 7em 6.5em 1fr;
  gap: 2px 12px;
  align-items: baseline;
  padding: 10px 6px;
  border-bottom: 1px solid var(--gold-faint);
}

.updates-version { font-weight: 600; color: var(--gold); }
.updates-date { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.updates-summary { font-family: var(--sans); font-size: 13.5px; line-height: 1.7; }

@media (max-width: 560px) {
  .updates-list li { grid-template-columns: auto 1fr; }
  .updates-summary { grid-column: 1 / -1; }
}