/* Shared by the three N4 ryokan stories; loaded after the site/theme styles. */
html.ryokan-story-document {
  font-size: 100%;
}

.ryokan-story {
  --content-width: 68rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --story-accent: var(--theme-green);
  --story-tint: color-mix(in srgb, var(--story-accent) 7%, var(--card));
  background: var(--paper);
}

.ryokan-story--missing-key { --story-accent: var(--theme-red); }
.ryokan-story--guest-book { --story-accent: var(--theme-gold); }

.ryokan-story main {
  padding-top: 0.5rem;
  padding-bottom: calc(var(--study-controls-height, 5rem) + 4rem + env(safe-area-inset-bottom, 0px));
}

.skip-link {
  position: absolute;
  z-index: 20;
  top: 0.5rem;
  left: 1rem;
  transform: translateY(-160%);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: var(--ink);
  background: var(--card);
}

.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.story-breadcrumb {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.story-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2rem;
  color: inherit;
  text-decoration: none;
}

.story-breadcrumb > span { align-self: center; }
.story-breadcrumb a:hover { color: var(--story-accent); }

.story-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border-radius: 1rem;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 4%, transparent);
}

.story-header::before { display: none; }

.story-header .reading-header__copy {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--card);
}

.story-header .eyebrow {
  margin-bottom: 1.8rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
}

.ryokan-story .story-header .level-badge {
  min-width: 2.1rem;
  min-height: 1.65rem;
  padding-inline: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--story-accent) 35%, transparent);
  border-radius: 0.3rem;
  color: var(--story-accent);
  background: var(--story-tint);
}

.story-header h1 {
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  letter-spacing: 0.015em;
  line-height: 1.8;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.story-header h1 rt {
  color: var(--ink-soft);
  font-size: 0.24em;
  font-weight: 500;
}

.title-line { display: inline-block; }

.story-subtitle.translation {
  margin-top: 0.65rem;
  padding: 0;
  border: 0;
  color: var(--story-accent);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.4;
  text-transform: none;
  text-wrap: balance;
}

.story-deck.translation {
  max-width: 28rem;
  margin: 1.2rem 0 0;
  padding: 0;
  border: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.75;
}

.story-header__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 2rem;
}

.story-start-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: 2.8rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--story-accent);
  border-radius: 0.35rem;
  color: var(--card);
  background: var(--story-accent);
  font-size: 0.76rem;
  font-weight: 650;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.story-start-link:hover {
  color: var(--story-accent);
  background: var(--story-tint);
}

.story-meta {
  color: var(--ink-soft);
  font-size: 0.67rem;
}

.story-cover {
  min-width: 0;
  min-height: 22rem;
  background: var(--story-tint);
}

.story-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-chapters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 1.1rem 0;
  margin-top: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.story-chapters a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.5rem 0.85rem;
  border-left: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease;
}

.story-chapters a:first-child { border-left: 0; }
.story-chapters a:hover { color: var(--story-accent); background: var(--story-tint); }

.story-chapters__number {
  flex-shrink: 0;
  color: var(--story-accent);
  font-size: 0.65rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.story-reading-note,
.story-body,
.ryokan-story .source-row {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.story-reading-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.75rem 0 1.1rem;
  color: var(--ink-soft);
}

.story-reading-note > span { font-size: 0.65rem; font-weight: 650; letter-spacing: 0.17em; }
.story-reading-note p { margin: 0; font-size: 0.73rem; }

.story-body { display: grid; gap: 1.4rem; }

.scene.passage-card {
  padding: clamp(1.4rem, 4vw, 3rem);
  border-radius: 0.6rem;
  box-shadow: 0 3px 14px color-mix(in srgb, var(--ink) 2%, transparent);
  scroll-margin-top: 1.5rem;
}

.scene-heading {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.scene-number {
  display: grid;
  flex: 0 0 2.5rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--story-accent) 25%, var(--line));
  border-radius: 1.25rem 1.25rem 0.25rem 0.25rem;
  color: var(--story-accent);
  background: var(--story-tint);
  font-family: var(--serif);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.scene-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 2;
  overflow-wrap: anywhere;
  scroll-margin-top: 3rem;
}

.passage { margin-bottom: 2rem; }
.passage:last-child { margin-bottom: 0; }
.passage--illustrated { display: flow-root; }

.story-art {
  float: right;
  width: clamp(4rem, 10vw, 6.5rem);
  height: auto;
  margin: 0.35rem 0 0.65rem 1.5rem;
  fill: none;
  stroke: var(--water-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.story-art__wash { fill: var(--steam); }
.story-art__paper { fill: var(--card); }
.story-art__green { fill: var(--water); }
.story-art__red { fill: var(--vermilion); }
.story-art__gold { fill: var(--sulfur); }

.story-body .japanese {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 2.3;
  line-break: strict;
  overflow-wrap: anywhere;
}

.story-body rt { font-weight: 500; }

.story-body .translation {
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: 0;
  font-size: 0.87rem;
  line-height: 1.85;
}

.dialogue {
  padding: 1.25rem 1.4rem;
  border: 0;
  border-left: 2px solid var(--theme-red);
  border-radius: 0 0.5rem 0.5rem 0;
  background: color-mix(in srgb, var(--theme-red) 5%, var(--card));
}

.dialogue--staff,
.dialogue--guest,
.dialogue--host {
  border-left-color: var(--theme-green);
  background: var(--theme-green-soft);
}

.dialogue--grandfather {
  border-left-color: var(--theme-gold);
  background: color-mix(in srgb, var(--theme-gold) 7%, var(--card));
}

.speaker {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--theme-red);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 650;
}

:is(.dialogue--staff, .dialogue--guest, .dialogue--host) .speaker { color: var(--theme-green); }
.dialogue--grandfather .speaker { color: var(--theme-gold); }

.sound {
  padding: 1.5rem 0.75rem;
  border-block: 1px solid var(--line);
  text-align: center;
}

.story-body .sound .japanese {
  color: var(--story-accent);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 0.05em;
}

.ending {
  padding: 1.5rem;
  border-radius: 0.4rem;
  color: var(--story-accent);
  background: var(--story-tint);
  text-align: center;
}

.ryokan-story .source-row {
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1rem 0;
}

.ryokan-story .source-link { min-height: 2rem; font-size: 0.72rem; font-weight: 500; }

.story-related { margin-top: 3.25rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.story-related__heading { margin-bottom: 1.5rem; }
.story-related__heading h2 { margin: 0; font: 400 1.9rem/1.3 var(--serif); letter-spacing: -0.025em; }
.story-related__heading p { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.story-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.story-related__link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--ink);
  background: var(--card);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.story-related__link:hover { border-color: var(--story-accent); background: var(--story-tint); }
.story-related__link img { flex: 0 0 6rem; width: 6rem; height: 5rem; object-fit: cover; border-radius: 0.25rem; }
.story-related__copy { display: grid; gap: 0.45rem; }
.story-related__title { font-family: var(--serif); font-size: 1.12rem; }
.story-related__copy > [lang="en"] { color: var(--ink-soft); font-size: 0.73rem; }
.story-related__arrow { margin-left: auto; color: var(--story-accent); font-size: 1.25rem; }

/* Preserve the existing playback/toggle handlers and measured bottom clearance. */
.js .ryokan-story .reading-controls {
  right: 0;
  left: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  padding: 0.6rem 0.8rem;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: var(--theme-shadow);
}

.story-listen-label { padding-inline: 0.25rem 0.5rem; color: var(--ink-soft); font-size: 0.7rem; font-weight: 650; }
.ryokan-story .reading-audio-controls { gap: 0.3rem; padding-right: 0.7rem; border-right: 1px solid var(--line); }
.ryokan-story .reading-audio-progress { width: clamp(6rem, 12vw, 10rem); }
.ryokan-story .reading-audio-button { flex-basis: 2.5rem; width: 2.5rem; min-height: 2.5rem; }
.ryokan-story #audio-toggle { color: var(--card); background: var(--story-accent); }
.ryokan-story #audio-toggle:hover { filter: brightness(0.9); }
.ryokan-story .reading-audio-seek { --reading-audio-accent: var(--story-accent); }
.ryokan-story .control-button { font-size: 0.7rem; }
.ryokan-story .control-button__state { min-width: 2rem; padding: 0.15rem 0.35rem; font-size: 0.55rem; }
.ryokan-story .control-button[aria-pressed="true"] .control-button__state { color: var(--card); background: var(--story-accent); }

@media (max-width: 55rem) {
  .story-header { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .story-header .reading-header__copy { padding: 1.75rem; }
  .story-header h1 { font-size: 2.35rem; }
  .story-header__footer { gap: 0.8rem; }
  .story-chapters a { flex-direction: column; gap: 0.3rem; }
  .story-related__link { gap: 0.8rem; }
  .story-related__link img { flex-basis: 4.5rem; width: 4.5rem; height: 4.5rem; }
}

@media (max-width: 42rem) {
  .story-breadcrumb > span { display: none; }
  .story-header { grid-template-columns: 1fr; }
  .story-header .reading-header__copy { padding: 1.75rem 1.5rem; }
  .story-header .eyebrow { margin-bottom: 1.25rem; }
  .story-header h1 { font-size: clamp(1.8rem, 7vw, 2.7rem); }
  .story-header__footer { margin-top: 1.4rem; gap: 1rem; }
  .story-cover { min-height: 0; aspect-ratio: 2 / 1; }
  .story-cover img { object-position: center 57%; }
  .story-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 0; }
  .story-chapters a { padding: 0.25rem 0.65rem; }
  .story-chapters a:nth-child(4) { border-left: 0; }
  .story-reading-note { flex-direction: column; gap: 0.5rem; padding-top: 2rem; }
  .story-body { gap: 1rem; }
  .scene-heading { gap: 0.8rem; margin-bottom: 1.5rem; padding-bottom: 1rem; }
  .story-related__grid { grid-template-columns: 1fr; }
  .story-related { margin-top: 2rem; }
  .story-related__link img { flex-basis: 5rem; width: 5rem; height: 4.5rem; }
  .js .ryokan-story .reading-controls { width: calc(100% - 1.5rem); max-width: none; flex-wrap: wrap; gap: 0.3rem; padding: 0.45rem 0.6rem; bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)); }
  .ryokan-story .reading-audio-controls { flex: 1 0 100%; border: 0; padding: 0 0 0.3rem; border-bottom: 1px solid var(--line); }
  .ryokan-story .reading-audio-progress { flex: 1; }
  .ryokan-story .reading-controls > .control-button { flex: 1; justify-content: center; }
  .ryokan-story .control-button { min-height: 2.75rem; }
  .ryokan-story .reading-controls .theme-toggle { flex-basis: 2.75rem; width: 2.75rem; height: 2.75rem; }
}

@media (max-width: 26rem) {
  .scene.passage-card { padding: 1.15rem; }
  .scene-heading h2 { font-size: 1.2rem; }
  .dialogue { padding: 1rem; }
  .story-art { width: 3.8rem; margin-left: 0.8rem; }
  .story-listen-label { font-size: 0.65rem; padding-right: 0.25rem; }
  .story-header .reading-header__copy { padding: 1.5rem 1.2rem; }
  .ryokan-story .reading-controls > .control-button {
    gap: 0.3rem;
    padding-inline: 0.25rem;
    font-size: 0.65rem;
  }
  .ryokan-story .control-button__state { min-width: 1.7rem; }
}

@media print {
  .ryokan-story { background: white; }
  .ryokan-story main { padding-block: 0; }
  .skip-link, .story-breadcrumb, .story-header__footer, .story-chapters,
  .story-cover, .story-reading-note, .story-related { display: none; }
  .story-header { display: block; border: 0; box-shadow: none; }
  .story-header .reading-header__copy { padding: 0 0 1.5rem; }
  .story-body { width: 100%; gap: 1rem; }
  .scene.passage-card { break-inside: auto; box-shadow: none; }
  .scene-heading { break-after: avoid; }
  .passage { break-inside: avoid; }
}