/* TOP entrance: preserve the shared styles used by all other pages. */
.top-page .hero { min-height: 0; height: clamp(380px, 67svh, 650px); display: flex; align-items: center; }
.top-page .hero-content { width: min(620px, 49%); margin-left: 6%; padding: 44px 0 80px; }
.top-page .hero-copy { margin: -8px 0 0; font-size: clamp(16px, 1.4vw, 20px); }
.top-page .hero::before { inset: 24px 24px 78px; }
.top-page .scroll-cue { display: none; }
.entrance-nav { position: absolute; bottom: 0; left: 24px; right: 24px; z-index: 5; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid #ad8b4d; background: linear-gradient(180deg, #0c1221f5, #040711fa); }
.entrance-item { position: relative; display: flex; min-height: 78px; padding: 12px 6px; flex-direction: column; align-items: center; justify-content: center; color: #e6d4ad; text-align: center; cursor: pointer; list-style: none; transition: color 280ms ease, background-color 280ms ease, box-shadow 280ms ease; }
.entrance-nav > * + * { border-left: 1px solid #a68a4b66; }
.entrance-item span { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(14px, 1.12vw, 18px); letter-spacing: .075em; line-height: 1.4; }
.entrance-item small { margin-top: 4px; font-size: 12px; letter-spacing: .06em; line-height: 1.6; }
.entrance-item::after { content: ''; position: absolute; bottom: -4px; left: calc(50% - 3px); width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid #ffdf96; background: #c69c50; box-shadow: 0 0 9px #edbd69; opacity: 0; transition: opacity 280ms ease; pointer-events: none; }
.entrance-item[aria-current='page'] { background: #d5ad5d0d; box-shadow: inset 0 -2px #c7a05b80; color: #f4e5c7; }
.entrance-item:hover, .entrance-item:focus-visible, .entrance-character[open] > summary, .entrance-character:focus-within > summary { color: #fff0cf; background: #d5ad5d19; box-shadow: inset 0 0 0 1px #efcb7f9c, inset 0 -10px 20px -14px #ffce75, 0 0 12px #ce9e4520; }
.entrance-item:hover::after, .entrance-item:focus-visible::after, .entrance-character[open] > summary::after { opacity: 1; }
.entrance-character { position: relative; min-width: 0; }
.entrance-character summary::-webkit-details-marker { display: none; }
.entrance-options { position: absolute; bottom: 100%; left: 0; width: 200%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #080e1df5; border: 1px solid #c29d58; box-shadow: 0 -8px 30px #0005; }
.entrance-character:not([open]) > .entrance-options { display: none; }
.entrance-options a { min-height: 54px; padding: 12px; text-align: center; font-size: 14px; transition: background-color 280ms, color 280ms; }
.entrance-options a + a { border-left: 1px solid #a68a4b66; }
.entrance-options a:hover, .entrance-options a:focus-visible { background: #d5ad5d26; color: #ffebbd; }
.entrance-extra { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.entrance-extra a { padding: 10px 20px; border: 1px solid var(--line); color: var(--gold-soft); }
@media (min-width: 821px) { .top-page .site-header { position: relative; background: #060b18; } .top-page .nav-character-options { width: 260px; display: grid; grid-template-columns: 1fr 1fr; } .top-page .nav-character-options a + a { border-top: 0; border-left: 1px solid var(--line); } }
@media (max-width: 1100px) and (min-width: 821px) { .entrance-nav { left: 16px; right: 16px; } .entrance-item span { font-size: 14px; letter-spacing: .025em; } .top-page .hero-content { width: 56%; margin-left: 3%; } }
@media (max-width: 820px) {
  .top-page .hero { height: auto; min-height: 0; display: block; padding-top: 110px; background-position: 55% center; }
  .top-page .hero-content { width: calc(100% - 40px); margin: 0 auto; padding: 20px 0 48px; }
  .top-page .hero h1 img { width: 100%; margin: 0; transform: none; }
  .top-page .hero-copy { font-size: 16px; margin-top: 0; letter-spacing: .03em; }
  .top-page .hero::before { inset: 16px 16px 280px; }
  .entrance-nav { position: relative; left: auto; right: auto; margin: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entrance-nav > * + * { border-left: 0; }
  .entrance-nav > * { border-bottom: 1px solid #a68a4b66; }
  .entrance-nav > *:nth-child(even) { border-left: 1px solid #a68a4b66; }
  .entrance-nav > *:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .entrance-item { min-height: 72px; }
  .entrance-item span { font-size: 16px; }
  .entrance-options { left: auto; right: 0; width: 200%; }
}
@media (prefers-reduced-motion: reduce) { .entrance-item, .entrance-item::after, .entrance-options a { transition: none; } }

/* Close, diagonal CHARACTER branch; other navigation items keep their layout. */
.entrance-branches, .submenu-icon, .submenu-arrow { display: none; }
@media (min-width: 821px) {
  .entrance-character[open] { z-index: 10; }
  .entrance-character > .entrance-options {
    left: calc(100% - 24px); right: auto; bottom: calc(100% - 6px);
    width: 196px; display: grid; grid-template-columns: 1fr; gap: 10px;
    border: 0; background: transparent; box-shadow: none;
  }
  .entrance-character:not([open]) > .entrance-options { display: none; }
  .entrance-options::before {
    content: ''; position: absolute; left: -48px; top: 0; width: 48px; height: 140px;
    /* Transparent pointer bridge keeps the diagonal route usable. */
  }
  .entrance-options .entrance-branches {
    display: block; position: absolute; left: -48px; top: 0; width: 48px; height: 128px;
    overflow: visible; fill: none; stroke: #d9b870; stroke-width: 1;
    pointer-events: none; stroke-dasharray: 180; animation: entrance-line 180ms ease-out both;
  }
  .entrance-options a, .entrance-options a + a {
    display: grid; grid-template-columns: 28px 1fr 14px; align-items: center; gap: 14px;
    width: 196px; height: 56px; min-height: 56px; padding: 10px 16px;
    border: 1px solid #bd9956; background: linear-gradient(135deg, #101a2bf5, #050a15f5);
    box-shadow: inset 0 0 12px #d9b87008, 0 4px 14px #0004;
    color: #f2e4c9; text-align: left; font-size: 17px; line-height: 1.5;
    animation: entrance-reveal 200ms 70ms ease-out both;
  }
  .entrance-options a + a { animation-delay: 100ms; }
  .entrance-options .submenu-icon { display: block; width: 28px; font-size: 29px; line-height: 1; text-align: center; color: #e6c275; }
  .entrance-options .submenu-moon { font-size: 25px; }
  .entrance-options .submenu-arrow { display: block; color: #d9b870; font-size: 24px; line-height: 1; text-align: right; }
  .entrance-options .submenu-label { white-space: nowrap; letter-spacing: .08em; }
  .entrance-options a:hover, .entrance-options a:focus-visible { background: #182335; box-shadow: inset 0 0 14px #d9b87015, 0 0 9px #d9b87020; }
}
@keyframes entrance-line { from { stroke-dashoffset: 180; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes entrance-reveal { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .entrance-options a, .entrance-options .entrance-branches { animation: none; } }

/* PC logo group: horizontal translation only, matching the marked position. */
@media (min-width: 821px) {
  .top-page .hero-content { transform: translateX(12vw); }
}

/* Keep the expanded touch links above adjacent navigation hit areas. */
@media (max-width: 820px) {
  .entrance-character[open] { z-index: 10; }
  .entrance-character > .entrance-options { pointer-events: auto; }
}

/* TOP: official playlist beside the supplied finished visual. */
.top-page .hero {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0 0 78px;
  background: #101018;
}
.top-page .hero::before,
.top-page .hero-shade { display: none; }
.top-hero-columns {
  display: grid;
  grid-template-columns: minmax(0, 29%) minmax(0, 71%);
  width: 100%;
  align-items: stretch;
}
.top-video-panel {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: clamp(12px, 2vw, 32px);
  background: #14131b;
}
.top-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.top-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.top-topics-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: clamp(10px, 1.4vw, 20px);
  color: #fff8e8;
  text-align: center;
  line-height: 1.3;
}
.top-topics-ornament {
  display: flex;
  width: 94px;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  color: #d7ad58;
  font-size: 10px;
  line-height: 1;
}
.top-topics-ornament::before,
.top-topics-ornament::after {
  flex: 1;
  height: 1px;
  background: #d7ad58;
  content: '';
}
.top-topics-japanese { font-size: clamp(16px, 1.3vw, 20px); font-weight: 600; }
.top-topics-english {
  margin-top: 2px;
  color: #d7ad58;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: .1em;
}
.top-visual-panel { min-width: 0; }
.top-visual-panel h1 { margin: 0; height: 100%; }
.top-visual-panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .top-page .hero { padding: 0; background: #101018; }
  /* Keep the header layout and menu position; the artwork already has a logo. */
  .top-page .site-header > .wordmark { visibility: hidden; }
  .top-hero-columns { display: flex; flex-direction: column-reverse; }
  .top-visual-panel img { height: auto; object-fit: contain; }
  .top-video-panel { padding: 16px; }
  .top-page .entrance-nav { margin-top: 0; }
}