:root {
  color-scheme: light;
  --paper: #f4efe6;
  --paper-light: #fbf8f2;
  --card: #fffdf8;
  --ink: #20332e;
  --ink-soft: #53645c;
  --line: rgba(32, 51, 46, .14);
  --accent: #496759;
  --focus: #984632;
  --content-width: 68rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --grid-gap: clamp(.75rem, 1.5vw, 1rem);
  --serif: "Iowan Old Style", "Palatino Linotype", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}

html { background: var(--paper); scroll-behavior: smooth; scroll-padding-bottom: 7rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.8 var(--sans); }
[hidden] { display: none !important; }
main { padding-block: clamp(1.5rem, 4vw, 3rem) calc(8rem + env(safe-area-inset-bottom, 0px)); }
a { color: var(--accent); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
ruby { ruby-position: over; ruby-align: center; }
rt { color: var(--ink-soft); font-family: var(--sans); font-size: .8125rem; font-weight: 400; letter-spacing: .025em; }

.visit-header { position: relative; isolation: isolate; overflow: hidden; margin-bottom: var(--grid-gap); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: .8rem; background: var(--card); }
.visit-header::before { position: absolute; inset: 0; border-top: 2px solid #617e70; border-radius: inherit; content: ""; pointer-events: none; }
.visit-header__glyph { position: absolute; z-index: -1; top: .25rem; right: .6rem; color: rgba(66, 100, 84, .055); font: 500 clamp(8rem, 15vw, 13rem)/1 var(--serif); pointer-events: none; user-select: none; }
.visit-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; margin-bottom: 1.5rem; color: var(--ink-soft); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; line-height: 1.5; }
.visit-header__badge { display: inline-grid; flex: 0 0 auto; min-width: 2.5rem; min-height: 1.875rem; padding-inline: .65rem; place-items: center; border-radius: 999px; color: white; background: var(--accent); font-size: .8125rem; font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
h1 { margin: 0; font: 500 clamp(2rem, 5vw, 3.25rem)/1.8 var(--serif); letter-spacing: .03em; text-wrap: balance; }
h1 rt { font-size: max(.75rem, .25em); }
.visit-title-en { margin: .55rem 0 0; color: var(--accent); font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.journey-stage { scroll-margin-top: 2rem; }
.journey-stage + .journey-stage { margin-top: var(--grid-gap); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--grid-gap); list-style: none; margin: 0; padding: 0; }
.step { min-width: 0; border: 1px solid rgba(32, 51, 46, .24); border-radius: .8rem; background: var(--card); scroll-margin-top: 2rem; }
.step-main { min-width: 0; padding: 1.25rem; }
.step-visual { position: relative; min-width: 0; margin: 0; border-radius: .75rem .75rem 0 0; overflow: hidden; }
.step-heading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .5rem; margin: 0; padding: 1rem 1.25rem; color: white; background: radial-gradient(ellipse 90% 55% at left bottom, rgba(12, 24, 20, .64) 0%, rgba(12, 24, 20, .36) 45%, rgba(12, 24, 20, 0) 100%); }
.step-number { flex: 0 0 auto; padding: .1rem .4rem; border-radius: .25rem; color: white; background: rgba(12, 24, 20, .62); font-size: .875rem; font-variant-numeric: tabular-nums; letter-spacing: .07em; }
.step h2 { margin: 0; font: 500 1.75rem/1.8 var(--serif); letter-spacing: .025em; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.step-heading rt { color: white; font-weight: 500; }
.step-heading-text { min-width: 0; max-width: 100%; }
.step-heading-translation { margin: .125rem 0 0; color: white; font: 500 .9375rem/1.4 var(--sans); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
/* Each square exposes a single scene in the existing nine-scene atlas. */
.step-art { width: 100%; aspect-ratio: 1; background-image: url("../images/optimized/first-onsen-visit-atlas-vector-1254w-51967c018073.webp"); background-size: 300% 300%; background-repeat: no-repeat; background-color: var(--paper-light); }
.step-art--entrance { background-position: 0% 0%; }
.step-art--reception { background-position: 50% 0%; }
.step-art--noren { background-image: url("../images/optimized/first-onsen-visit-noren-vector-800w-cdcdd95334c4.webp"); background-size: cover; background-position: center; }
.step-art--changing { background-position: 0% 50%; }
.step-art--rinse { background-position: 50% 50%; }
.step-art--wash { background-position: 100% 50%; }
.step-art--bath { background-position: 0% 100%; }
.step-art--dry { background-position: 50% 100%; }
.step-art--rest { background-position: 100% 100%; }

.japanese { margin: 0; font: 500 1.375rem/2.1 var(--sans); overflow-wrap: anywhere; }
.translation { margin: .25rem 0 .5rem; color: var(--ink-soft); }
.audio-button { display: inline-flex; align-items: center; justify-content: flex-start; gap: .6rem; min-width: 2.75rem; min-height: 2.75rem; padding: .3rem 0; border: 0; border-radius: .25rem; color: var(--ink); background: transparent; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.audio-button svg { flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; color: var(--ink-soft); }
.audio-button:hover, .audio-button[aria-pressed="true"] { color: var(--focus); }
.audio-button:hover svg, .audio-button[aria-pressed="true"] svg { color: currentColor; }
.audio-button[aria-busy="true"] { cursor: progress; }
.audio-button:disabled { cursor: default; }
.audio-button:disabled svg { display: none; }
.heading-audio { padding: 0; color: white; letter-spacing: inherit; text-shadow: inherit; }
.heading-audio svg { flex-basis: 1.25rem; width: 1.25rem; height: 1.25rem; color: inherit; }
.heading-audio:hover, .heading-audio[aria-pressed="true"] { color: white; background: rgba(12, 24, 20, .45); }
.heading-audio:focus-visible { outline-color: white; }
.phrase-audio { max-width: 100%; }
.phrase-audio > span { min-width: 0; }

.vocabulary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.word-audio { font-size: 1.0625rem; line-height: 2; }
.word-audio > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.sign-character { font-weight: 700; }
.sign-character--otokoyu { color: #294a67; }
.sign-character--onnayu { color: #984632; }
.sign-arrow { color: var(--ink-soft); font-size: .875rem; }
.step-explanation { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.step-explanation:not([hidden]) + .step-explanation { margin-top: 0; padding-top: 0; border-top: 0; }
.place-name { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 600; }
.romanization { margin: .15rem 0 .65rem; font-size: .875rem; }
.vocabulary-meanings { margin: .25rem 0 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.9; }
.instruction, .detail { margin: .8rem 0 0; }
.detail { font-size: .9375rem; }

.visit-end { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; padding-top: 2rem; }
.visit-end > p { margin: 0; }
.back-link { display: inline-flex; align-items: baseline; gap: .6rem; min-height: 2.75rem; font-size: .9375rem; text-decoration: none; }
.back-link--top { align-items: center; gap: .55rem; min-height: 0; margin-bottom: clamp(2rem, 4.5vw, 3.25rem); color: var(--ink-soft); font-size: .85rem; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
.back-link--top .back-link__arrow { color: var(--focus); font-size: 1.05rem; }
.visit-intro, .facility-note, .source-note { flex-basis: 100%; color: var(--ink-soft); font-size: .875rem; }
.end-explanation { display: block; margin-top: .35rem; font-size: .875rem; }

.lesson-controls { position: fixed; z-index: 10; right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right, 0px)); bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .55rem; max-width: calc(100% - 2rem); padding: .55rem; border: 1px solid rgba(32, 51, 46, .16); border-radius: 999px; background: rgba(251, 248, 242, .92); box-shadow: 0 14px 40px rgba(56, 48, 37, .16); -webkit-backdrop-filter: blur(.8rem); backdrop-filter: blur(.8rem); }
.audio-speed, .content-toggle { display: inline-flex; flex-shrink: 0; align-items: center; gap: .5rem; min-height: 2.65rem; padding: .55rem .8rem; border: 0; border-radius: 999px; color: var(--ink); background: transparent; font: 800 .75rem/1.4 var(--sans); cursor: pointer; touch-action: manipulation; transition: color 200ms ease, background 200ms ease; }
.audio-speed:hover, .content-toggle:hover { background: rgba(32, 51, 46, .07); }
.lesson-control__state { min-width: 2.35rem; padding: .2rem .42rem; border-radius: 999px; color: white; background: var(--accent); font-size: .62rem; letter-spacing: .08em; text-align: center; }
.audio-speed .lesson-control__state { font-variant-numeric: tabular-nums; }
.audio-speed[aria-pressed="false"] .lesson-control__state, .content-toggle[aria-expanded="false"] .lesson-control__state { color: var(--ink-soft); background: rgba(32, 51, 46, .1); }
@media (max-width: 31rem) {
  .lesson-controls { right: calc(.75rem + env(safe-area-inset-right, 0px)); bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); left: calc(.75rem + env(safe-area-inset-left, 0px)); max-width: none; justify-content: center; border-radius: 1.15rem; }
  .audio-speed, .content-toggle { flex: 1; justify-content: center; padding-inline: .55rem; }
}
.audio-status { position: fixed; z-index: 11; right: 1rem; bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); max-width: min(25rem, calc(100% - 2rem)); margin: 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .6rem; color: var(--ink); background: var(--card); font-size: .9375rem; }
.audio-status:empty { display: none; }
.script-note { margin: 1rem; color: var(--ink-soft); font-size: .9375rem; }
/* Preserve the current Japanese line when translations or info change the page height. */
html.restoring-reading-position { scroll-behavior: auto; overflow-anchor: none; }
html.restoring-reading-position body { overflow-anchor: none; }

/* Scale the rem-based lesson layout down on desktop, like the conversation page. */
@media screen and (min-width: 50.0625rem) and (hover: hover) and (pointer: fine) {
  html { font-size: 90%; }
}

@media (max-width: 66rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  html, body { background: white; }
  main { padding-block: 0; }
  .page-shell { width: 100%; }
  .lesson-controls, .audio-button svg, .audio-status, .script-note { display: none; }
  .steps { display: block; }
  .step { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; padding-block: 1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: white; break-inside: avoid; }
  .step-main { display: block; padding: 0; }
  .step-visual { width: 100%; border-radius: .6rem; }
  .step-heading { padding: .5rem; }
  .step h2 { font-size: 1.125rem; }
  .step-art, .step-heading, .step-number { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}