:root {
  color-scheme:dark;
  --bg:#0b1016;
  --panel:#151e29;
  --line:#304250;
  --text:#e8eee9;
  --muted:#9eaca9;
  --accent:#94e6ba
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.85
}

a {
  color:var(--accent);
  text-underline-offset:.25em
}

a:hover {
  color:#fff
}

img {
  max-width:100%;
  height:auto
}

h1,h2,h3,p {
  margin-top:0
}

.site-header {
  min-height:64px;
  padding:12px max(24px,calc((100vw - 1100px)/2));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--line)
}

.site-header a {
  text-decoration:none
}

.site-header nav {
  display:flex;
  gap:22px;
  font-size:.84rem
}

.brand {
  font-weight:800;
  letter-spacing:.13em;
  color:#fff
}

.brand span {
  color:var(--accent)
}

.hero {
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  align-items:center;
  min-height:520px
}

.hero-art {
  height:100%;
  min-height:440px;
  display:flex;
  align-items:center;
  position:relative
}

.hero-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 72%,var(--bg) 100%);
  pointer-events:none
}

.hero-art img {
  display:block;
  width:100%;
  max-height:600px;
  object-fit:contain
}

.hero-copy {
  padding:3rem 4rem 3rem 1rem;
  position:relative
}

.eyebrow {
  display:block;
  color:var(--accent);
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:700
}

.hero h1,.glossary-page h1 {
  line-height:1.35;
  letter-spacing:.08em;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(2rem,4.5vw,4rem);
  margin:1rem 0 2rem
}

.hero-copy p {
  color:var(--muted);
  letter-spacing:.08em
}

.cta {
  display:inline-flex;
  margin-top:1rem;
  background:var(--accent);
  color:#101b1c!important;
  text-decoration:none;
  padding:.72rem 1.2rem;
  min-width:190px;
  justify-content:space-between;
  font-weight:700
}

.cta:hover {
  background:#d6ffe8
}

.section-nav {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.25rem 1.4rem;
  border-block:1px solid var(--line);
  padding:15px 20px;
  background:#121b23 url("img/wall02.png") repeat-x center
}

.section-nav a {
  font-size:.72rem;
  letter-spacing:.14em;
  text-decoration:none;
  color:var(--muted)
}

.section-nav a:hover {
  color:var(--accent)
}

.container {
  max-width:1040px;
  margin:auto;
  padding:0 30px
}

.section {
  padding:82px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:1rem
}

.section-heading {
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:32px
}

.section-heading .rule {
  width:42px;
  height:2px;
  background:var(--accent)
}

h2 {
  font-size:1.4rem;
  letter-spacing:.2em;
  margin:0
}

h3 {
  font-size:1.15rem;
  margin:2rem 0 1rem;
  color:var(--accent)
}

.lead,.note {
  color:var(--muted)
}

.note {
  font-size:.87rem
}

.prose {
  max-width:700px;
  margin-bottom:32px
}

.prose p {
  margin-bottom:.65em
}

.video {
  max-width:700px;
  aspect-ratio:16/9;
  background:#000
}

.video iframe {
  width:100%;
  height:100%;
  border:0
}

.gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.gallery a {
  display:block;
  aspect-ratio:250/212;
  background:var(--panel);
  overflow:hidden;
  border:1px solid var(--line)
}

.gallery img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .2s
}

.gallery a:hover img {
  transform:scale(1.04)
}

.world-list {
  padding-left:1.2rem
}

.world-list li {
  margin:.45rem 0
}

.definitions,.credits,.glossary-list {
  margin:0
}

.definitions>div,.credits>div,.glossary-list>div {
  display:grid;
  grid-template-columns:minmax(140px,25%) 1fr;
  gap:18px;
  border-top:1px solid var(--line);
  padding:13px 0
}

.definitions dt,.credits dt,.glossary-list dt {
  color:var(--accent);
  font-weight:700
}

.definitions dd,.credits dd,.glossary-list dd {
  margin:0
}

.section-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:30px
}

.episodes {
  list-style:none;
  margin:24px 0 0;
  padding:0
}

.episodes>li {
  padding:14px 0;
  border-top:1px solid var(--line)
}

.episode-name {
  font-weight:700;
  display:flex;
  justify-content:space-between;
  gap:12px
}

.episode-name small {
  font-weight:400;
  color:var(--muted);
  white-space:nowrap
}

.tracks {
  margin-top:10px
}

.track {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 20px;
  margin:12px 0;
  color:var(--muted);
  font-size:.85rem
}

.track span {
  min-width:120px
}

.track audio {
  width:min(370px,100%);
  height:42px
}

.track a {
  white-space:nowrap
}

.banner img,.related img {
  display:block;
  width:min(500px,100%)
}

.song-list {
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 22px;
  margin:28px 0 0
}

.song-list li {
  padding:14px;
  background:var(--panel);
  font-size:.9rem
}

.song-list strong,.song-list span {
  display:block
}

.song-list strong {
  font-size:1rem;
  color:var(--accent)
}

.related {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:50px
}

.related a {
  width:min(450px,100%)
}

.footer {
  padding:46px 30px;
  text-align:center;
  font-size:.8rem;
  color:var(--muted)
}

.footer p {
  margin:8px 0 0
}

.to-top {
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#22353a;
  color:#fff;
  text-decoration:none;
  border:1px solid #557a70
}

.glossary-page {
  padding-top:60px;
  padding-bottom:100px
}

.glossary-page h1 {
  font-size:clamp(2rem,4vw,3rem)
}

.back {
  display:inline-block;
  margin-bottom:40px
}

@media(max-width:700px) {
  .site-header {
    padding:12px 18px
  }

  .site-header nav {
    gap:12px;
    font-size:.72rem
  }

  .hero {
    display:flex;
    flex-direction:column;
    min-height:0
  }

  .hero-art {
    min-height:0;
    width:100%
  }

  .hero-art:after {
    background:linear-gradient(0deg,var(--bg),transparent 36%)
  }

  .hero-copy {
    margin-top:-36px;
    padding:0 26px 44px;
    width:100%
  }

  .hero h1 {
    margin-bottom:1rem
  }

  .container {
    padding:0 20px
  }

  .section {
    padding:56px 0
  }

  .gallery {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .song-list {
    grid-template-columns:1fr
  }

  .definitions>div,.credits>div,.glossary-list>div {
    grid-template-columns:1fr;
    gap:0
  }

  .to-top {
    right:12px;
    bottom:12px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .gallery img {
    transition:none
  }

}

:root {
  --world-name-gap:1.25em
}

.hero .eyebrow {
  font-size:9px
}

.hero h1 {
  font-size:clamp(2rem,3.8vw,3rem);
  letter-spacing:.05em
}

.hero-title-second {
  display:inline-block;
  white-space:nowrap
}

.world-list {
  list-style:disc
}

.world-list li {
  padding-left:.15em
}

.world-list strong {
  display:inline-block;
  margin-right:var(--world-name-gap);
  font-weight:600
}

#world .definitions>div {
  grid-template-columns:minmax(12em,34%) 1fr;
  gap:1.25em
}

@media(max-width:700px) {
  #world .definitions>div {
    grid-template-columns:1fr;
    gap:.1em
  }

}