/* A readable type scale shared by every language. */
body {font-size:18px; padding-bottom:106px}
.station-strip {height:auto; min-height:40px; padding-top:8px; padding-bottom:8px; gap:16px; font-size:12px; line-height:1.6; letter-spacing:.8px}
.site-header {height:auto; min-height:110px; gap:24px; padding-top:18px; padding-bottom:18px}
.wordmark {font-size:28px}
.wordmark small {font-size:11px; letter-spacing:2px}
.logo-mark {width:48px; height:48px; font-size:30px}
.site-header nav {font-size:16px; gap:28px}
.site-header nav a > span:first-child {font-size:12px}
.site-header nav [data-i18n] {font-size:16px}
.language-switch button {font-size:14px; min-height:44px; padding:11px 14px}
html[lang=ja] .hero h1 {font-size:clamp(42px,4.4vw,70px); line-height:1.35; letter-spacing:-2px}
.nav-listen {font-size:15px; padding:13px 18px; gap:16px}
.eyebrow {font-size:12px; line-height:1.6; letter-spacing:.8px; white-space:normal}
html[lang] .hero-description {font-size:20px; line-height:1.85; max-width:560px}
.button {font-size:16px; min-height:56px}
.hero-bottom {font-size:13px; letter-spacing:.8px}
.hero-direction {font-size:12px}
.hero-direction > [data-i18n] {font-size:12px}
.photo-label {font-size:12px; max-width:90%; line-height:1.5; letter-spacing:.6px}
.ticket-top {font-size:13px; letter-spacing:.8px}
.ticket-top > [data-i18n] {font-size:13px}
.ticket-track small {font-size:12px; line-height:1.6; letter-spacing:.6px}
.ticket-track strong {font-size:30px}
.ticket-play {width:48px; height:48px; flex-shrink:0; font-size:13px}
.ticket-bottom {font-size:12px; letter-spacing:.6px}
.ticket-bottom > span:nth-child(2) {font-size:26px}
.journey-band {font-size:14px; letter-spacing:.8px; flex-wrap:wrap; row-gap:18px}
.journey-band i::before {display:none}
.section-kicker, .section-kicker > span:last-child {font-size:13px; line-height:1.6; letter-spacing:.7px}
.section-heading {align-items:center}
html[lang] .section-heading p, html[lang] .brand-intro p, html[lang] .route-stop p,
html[lang] .story-copy p, .record-panel p {font-size:18px; line-height:1.85; max-width:none}
.record-caption {font-size:13px; line-height:1.6; letter-spacing:.6px; flex-wrap:wrap}
.record-panel h3 {font-size:36px}
.archive-note {font-size:14px; line-height:1.7}
.collection-filters {gap:9px}
.collection-filters button {font-size:15px; padding:12px 15px; min-height:46px}
.collection-filters button > span {font-size:12px}
html[lang] .timetable-head {grid-template-columns:minmax(0,1fr) 64px 44px; gap:12px; align-items:end; font-size:12px; line-height:1.5; letter-spacing:.4px}
html[lang] .track-row {grid-template-columns:28px minmax(0,1fr) 64px 44px; gap:12px; min-height:112px; padding:14px 0}
.track-number, .track-time {font-size:14px}
.track-title {font-size:20px; line-height:1.6}
.track-meta {font-size:14px; line-height:1.7; letter-spacing:.4px}
.track-play {width:44px; height:44px; font-size:13px}
.music-footnote {font-size:14px; line-height:1.8; gap:18px}
.loading-message, .error-message {font-size:16px}
.brand-label {font-size:13px; line-height:1.6; letter-spacing:.7px}
.route-stop {display:flex; flex-direction:column}
.stop-top {font-size:13px; line-height:1.6; letter-spacing:.6px}
.stop-top > span:first-child {min-width:0; overflow-wrap:anywhere}
html[lang] .route-stop h3 {font-size:32px; line-height:1.5}
html[lang] .route-stop p {min-height:0; margin-bottom:18px}
.route-marker > span {font-size:12px}
.route-stop a {font-size:14px; line-height:1.7; max-width:100%; align-self:flex-start; margin-top:auto; padding-top:8px}
.route-stop a > span:first-child {min-width:0}
.brand-gallery figcaption {font-size:12px; line-height:1.7; letter-spacing:.5px; flex-wrap:wrap}
.story-code > span {font-size:12px; letter-spacing:1.7px}
.site-footer > div {font-size:16px; line-height:1.85}
.site-footer > div > span:not(.footer-tagline) {font-size:13px}
.footer-logo {font-size:36px}
.footer-logo span {font-size:11px; letter-spacing:2px}
.site-footer .back-top {font-size:15px; line-height:1.7}
.site-footer > p {font-size:12px; line-height:1.7; letter-spacing:.5px}
.audio-player {height:106px; grid-template-columns:minmax(240px,1.2fr) 150px minmax(180px,1.7fr) 90px}
.player-track img {width:52px; height:52px}
.player-track span {font-size:18px}
.player-track small {font-size:13px; letter-spacing:.5px}
.player-progress {font-size:13px}
.player-progress span {min-width:36px; white-space:nowrap}
.player-progress input {min-width:0; flex:1; height:5px}
.player-message {bottom:106px; font-size:16px; max-width:min(520px,calc(100vw - 40px))}
.noscript-notice {bottom:108px; font-size:16px}

@media (max-width:1200px) {
  .site-header {display:grid; grid-template-columns:1fr auto; gap:16px 24px}
  .header-actions {grid-column:1 / -1; justify-content:flex-end}
  .hero-bottom {font-size:12px}
}

@media (max-width:900px) {
  body {padding-bottom:126px}
  .audio-player {height:126px; grid-template-columns:minmax(0,1fr) 150px; gap:12px 20px; padding-top:14px; padding-bottom:14px}
  .player-progress {grid-column:1 / -1}
  .player-extra {display:none}
  .player-message {bottom:126px}
  .noscript-notice {bottom:128px}
  .section-heading {display:block}
  .section-heading p {margin-top:24px}
  .brand-intro {grid-template-columns:1fr}
  .brand-route {grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero .button > span:last-child {margin-left:8px}
  .hero-ticket {padding:17px}
  .ticket-track strong {font-size:26px}
  .ticket-barcode {width:42px}
}

@media (max-width:800px) {
  .wordmark {font-size:26px}
  .wordmark small {font-size:11px}
  .hero-description, html[lang] .hero-description {font-size:18px}
  .button {font-size:16px}
  .route-stop, .route-stop + .route-stop {padding-right:14px; padding-left:14px}
  .route-stop:first-child {padding-left:0}
  html[lang] .route-stop h3 {font-size:27px}
}

@media (max-width:600px) {
  body {padding-bottom:164px}
  .station-strip {align-items:flex-start; flex-direction:column; gap:3px; padding-top:9px; padding-bottom:9px; font-size:12px}
  .site-header {grid-template-columns:minmax(0,1fr); gap:14px; padding-top:18px; padding-bottom:18px}
  .wordmark, .site-header nav, .header-actions {grid-column:1 / -1}
  .site-header nav {grid-row:3; justify-content:space-between; flex-wrap:wrap; gap:10px 16px}
  .site-header nav a:last-child {display:block}
  .site-header nav [data-i18n] {font-size:15px}
  .header-actions {grid-row:2; justify-content:flex-start; padding-top:12px; width:100%; min-width:0}
  .language-switch {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; min-width:0}
  .language-switch button {width:100%; min-width:0; font-size:14px; padding:11px 0; min-height:44px; text-align:center}
  html[lang=ja] .hero h1 {font-size:clamp(36px,10vw,44px); letter-spacing:-1px}
  .eyebrow {font-size:12px; line-height:1.6; white-space:normal; letter-spacing:.4px}
  html[lang] .hero-description {font-size:16px; line-height:1.85}
  .hero-brand {font-size:clamp(48px,15.3vw,67px)}
  .hero .button, .story-copy .button {font-size:16px; padding:15px 18px; gap:12px; min-height:56px}
  .hero .button > span:last-child, .story-copy .button > span:last-child {margin-left:8px}
  .hero-photo {height:480px}
  .photo-label {font-size:12px; left:6%; right:6%; max-width:none}
  .hero-ticket {left:6%; right:6%; width:auto; padding:18px}
  .ticket-track strong {font-size:26px}
  .ticket-track small {font-size:12px}
  .ticket-top, .ticket-top > [data-i18n], .ticket-bottom {font-size:12px}
  .ticket-play {width:44px; height:44px}
  .journey-band {justify-content:flex-start; gap:12px 18px; font-size:12px; padding:20px 6%}
  .journey-band i {display:none}
  .journey-band > span {white-space:normal}
  .section-kicker {align-items:flex-start; flex-wrap:wrap; row-gap:10px}
  .section-kicker, .section-kicker > span:last-child {font-size:12px}
  .section-kicker > span:last-child {max-width:100%; text-align:left}
  html[lang] .section-heading p, html[lang] .brand-intro p, html[lang] .route-stop p,
  html[lang] .story-copy p, .record-panel p {font-size:16px; line-height:1.85}
  .record-panel {display:block; margin-bottom:30px}
  .record-art {height:auto; width:100%; aspect-ratio:1.4}
  .record-sticker {width:52px; height:66px; font-size:26px}
  .record-sticker small {font-size:7px}
  .record-caption {margin-top:16px; font-size:12px; line-height:1.6}
  .record-panel h3 {font-size:32px; margin-top:12px; margin-bottom:12px}
  .archive-note {font-size:13px; gap:10px}
  .collection-filters {gap:8px}
  .collection-filters button {font-size:14px; padding:11px 13px}
  html[lang] .timetable-head {grid-template-columns:minmax(0,1fr) 52px 44px; font-size:12px; gap:8px; letter-spacing:0}
  html[lang] .track-row {grid-template-columns:22px minmax(0,1fr) 52px 44px; gap:8px; min-height:110px; padding:12px 0}
  .track-title {font-size:18px}
  .track-meta {font-size:12px; line-height:1.7}
  .track-time, .track-number {font-size:12px}
  .track-play {width:44px; height:44px; font-size:13px}
  .music-footnote {font-size:13px}
  .brand-label, .stop-top {font-size:12px; letter-spacing:.4px}
  .route-stop, .route-stop + .route-stop, .route-stop:first-child {padding:0 0 36px 48px}
  html[lang] .route-stop h3 {font-size:28px}
  .route-stop a {font-size:14px; margin-top:12px; gap:8px}
  .brand-gallery figcaption {font-size:12px; line-height:1.7}
  .brand-gallery figcaption > span:last-child {text-align:left}
  .story-code {width:200px; font-size:104px}
  .story-code > span {font-size:11px}
  .site-footer {grid-template-columns:minmax(0,1fr); gap:24px}
  .footer-logo, .site-footer > div, .site-footer .back-top {grid-column:1 / -1; grid-row:auto}
  .site-footer > div {font-size:16px}
  .footer-tagline {max-width:none}
  .footer-logo {font-size:34px}
  .footer-logo span {font-size:11px}
  .site-footer .back-top {font-size:15px}
  .site-footer > p {font-size:12px; margin-top:0}
  .audio-player {height:164px; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px 6%}
  .player-track {grid-column:1; gap:12px}
  .player-track img {width:44px; height:44px}
  .player-track span {font-size:16px}
  .player-track small {font-size:12px}
  .player-controls {grid-column:1; justify-self:center; width:150px}
  .player-controls .main-play {width:42px; height:42px}
  .player-progress {grid-column:1; font-size:12px; gap:10px}
  .player-message {bottom:164px; font-size:15px}
  .noscript-notice {bottom:166px}
}

/* Five primary destinations, with room for every language. */
.site-header nav .nav-artbook, .site-header nav .nav-systems {color:var(--green)}
@media (min-width:601px) and (max-width:1700px) {
 .site-header {display:grid;grid-template-columns:1fr auto;gap:16px 24px}
 .site-header .wordmark {grid-column:1;grid-row:1}
 .site-header .header-actions {grid-column:2;grid-row:1;justify-content:flex-end;border:0;padding-top:0}
 .site-header nav {grid-column:1/-1;grid-row:2;justify-content:center;flex-wrap:wrap;gap:14px 30px;border-top:1px solid var(--line);padding-top:10px}
}
@media (max-width:800px) and (min-width:601px) {
 .site-header .header-actions {grid-column:1/-1;grid-row:2}
 .site-header nav {grid-row:3}
}

/* The Music Station uses its shared blue icon; the wordmark remains text. */
body > .site-header .logo-mark.site-icon {
 display:block; width:48px; height:48px; min-width:48px; flex:0 0 48px;
 object-fit:contain; border:0; border-radius:0; padding:0;
 background:transparent; box-shadow:none;
}
body > .site-header .logo-mark.site-icon::before,
body > .site-header .logo-mark.site-icon::after {content:none; display:none}