/* Lesson 3 prototype — one serif face, one red (Eri's correction red), paper and ink. */

@font-face {
  font-family: "Lesson Serif";
  /* Noto Serif CJK JP Regular (SIL OFL 1.1), subset to the glyphs this page uses — fonts/OFL.txt, tools/subset_font.py */
  src: url("fonts/NotoSerifCJKjp-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #faf7f1;
  --paper-2: #f2ede3;
  --ink: #221d19;
  --ink-2: #5f564e;
  --rule: #ddd4c6;
  --red: #c8361f;
  --red-soft: rgba(200, 54, 31, 0.10);
  --path-w: 13rem;
  --bar-h: 0px;
  --measure: 38rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1rem); }

body {
  margin: 0;
  display: grid; grid-template-columns: var(--path-w) minmax(0, 1fr);
  /* the site's own page background (style.css body): the same colour and tile, reached by ../images/ from here, which is /static/images/ on takase.com and the repo's website/static/images/ in the prototype (the images/ link) */
  background: #f8f7f5 url("../images/bg_body-repeat.jpg") repeat;
  color: var(--ink);
  font-family: "Lesson Serif", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

i, em { font-style: italic; }
[lang="ja"] { font-style: normal; }
/* The one face is Regular only, so italic is the browser's own slant, allowed for Latin text in italic runs (and the vocabulary terms set italic below).
   Kanji and kana never slant: [lang="ja"] is font-style normal, so nothing there asks the browser to synthesize. */
i, em, .term, .pop-romaji, .vocab td:first-child { font-synthesis-style: auto; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- the path (replaces the 2003 sidebar) ---------- */

.path {
  position: sticky; top: 0; height: 100vh; align-self: start;
  padding: 2.5rem 1.25rem 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1.75rem;
  border-right: 1px solid var(--rule);
  /* no fill on a wide screen: nothing scrolls under this column, so the page background shows through it (the phone bar below keeps a fill) */
  z-index: 20;
}
.path a { text-decoration: none; }
.path-home { font-size: 0.95rem; color: var(--ink-2); letter-spacing: 0.04em; }
.path-home span { color: var(--ink); font-size: 1.4rem; margin-right: 0.35rem; vertical-align: -0.1em; }
.path ol { list-style: none; margin: 0; padding: 0; position: relative; }
.path ol::before {           /* the rail line */
  content: ""; position: absolute; left: 0.8rem; top: 1rem; bottom: 1rem;
  width: 1px; background: var(--rule);
}
.path li a {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0;
  color: var(--ink-2); position: relative;
}
.path-n {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8rem;
  background: var(--paper); border: 1px solid var(--rule);
  transition: background .25s, color .25s, border-color .25s;
}
.path li a.done .path-n { border-color: var(--ink-2); color: var(--ink); }
.path li a.current { color: var(--ink); }
.path li a.current .path-n { background: var(--red); border-color: var(--red); color: #fff; }
.path-vocab { font-size: 0.9rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 1rem; }
.path-vocab:hover, .path li a:hover { color: var(--ink); }

/* a lesson with many sections (Lesson 1 has ten): the path scrolls inside itself when the screen is shorter than it is */
@media (min-width: 901px) { .path { overflow-y: auto; } }

main { padding: 0 3rem 6rem; max-width: 70rem; min-width: 0; background: url("../images/bg_body.jpg") center top no-repeat; }  /* the site's main texture (style.css main) */

/* ---------- header ---------- */

.lesson-head { padding: 4.5rem 0 2.5rem; max-width: var(--measure); }
.eyebrow { margin: 0; color: var(--ink-2); letter-spacing: 0.12em; font-size: 0.85rem; text-transform: uppercase; }
h1 { margin: 0.3rem 0 0.4rem; font-weight: 400; line-height: 1.1; display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.h1-kanji { font-size: 4.2rem; line-height: 1; }
.h1-text { font-size: 2rem; }
.byline { margin: 0; color: var(--ink-2); }

/* ---------- movements ---------- */

.movement { padding: 3.5rem 0 1.5rem; border-top: 1px solid var(--rule); }
h2 { font-weight: 400; font-size: 1.75rem; margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
.mv-n {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--red);
  color: var(--red); display: grid; place-items: center; font-size: 1rem; flex: none;
}
h3.sub { font-weight: 400; font-size: 1.3rem; margin: 2.5rem 0 1rem; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }

/* vocabulary terms in running text */
.term {
  font-style: italic; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); text-decoration: underline dotted var(--red); text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
}
.term:hover, .term:focus-visible, .term[aria-expanded="true"] { color: var(--red); outline: none; }

/* bold and links in running text. The one face is Regular only, so bold is the browser's own (font-synthesis allows it here, on the callout and for italic, and nowhere else). */
strong, b { font-synthesis-weight: auto; }
.prose a, .fig figcaption a, .callout a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.prose a:hover, .prose a:focus-visible, .fig figcaption a:hover, .callout a:hover { color: var(--red); outline: none; }

/* a figure: Eri's photograph and her whole caption beside it, below it where the width is short */
.fig { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem 1.6rem; margin: 1.8rem 0; max-width: 60rem; }
.fig img { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(60,40,20,.07); }
.fig > img, .fig > .enlarge { flex: none; max-width: 100%; }
.fig figcaption { flex: 1 1 17rem; max-width: var(--measure); margin: 0; font-size: 1rem; color: var(--ink); line-height: 1.6; }
.fig figcaption p { margin: 0 0 0.7em; }
.fig figcaption p:last-child { margin-bottom: 0; }
/* a group of figures side by side (the two papers): each picture over its caption */
.figs { margin: 1.8rem 0; }
.figs-title { margin: 0 0 0.8rem; font-size: 1.1rem; }
.figs-row { display: flex; flex-wrap: wrap; gap: 1.8rem 2.4rem; align-items: flex-start; }
.figs .fig { flex-direction: column; flex-wrap: nowrap; margin: 0; max-width: 16rem; gap: 0.7rem; }
.figs .fig figcaption { flex: none; }
/* a picture that opens its larger picture: nothing changes but the cursor */
.enlarge { display: block; cursor: zoom-in; }

/* Eri's one set-apart warning line, set the way the note band is */
.callout {
  max-width: var(--measure); margin: 1.4rem 0; padding: 0.7rem 1rem; font-weight: 700; font-synthesis: weight;
  background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--red); border-radius: 3px;
}

/* ---------- 1 · Watch ---------- */

figure figcaption { font-size: 0.92rem; color: var(--ink-2); margin-top: 0.7rem; }

.video-frame {
  width: 560px; max-width: 100%;            /* 1.75x the 320x240 source — never full width */
  aspect-ratio: 4 / 3; background: #111; border-radius: 3px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(40,25,10,.18);
}
.video-frame video { width: 100%; height: 100%; display: block; object-fit: contain; }

.speed { display: flex; gap: 0.4rem; margin-top: 0.75rem; align-items: center; flex-wrap: wrap; }
.speed button, .ctl {
  border: 1px solid var(--rule); background: #fff; border-radius: 999px;
  padding: 0.2rem 0.8rem; font-size: 0.85rem; cursor: pointer; color: var(--ink-2);
  min-height: 2rem;
}
.speed button[aria-pressed="true"], .ctl[aria-pressed="true"] { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.speed .sep { width: 1px; height: 1.2rem; background: var(--rule); margin: 0 0.3rem; }

/* ---------- 2 · stroke atlas + map ---------- */

.atlas { display: grid; grid-template-columns: minmax(16rem, 23rem) minmax(0, 1fr); gap: 3rem; margin: 2rem 0 2.5rem; align-items: start; }
.map { position: sticky; top: 1.5rem; }
.map-stage { position: relative; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(60,40,20,.07); }
.map-stage img { width: 100%; }
.map-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-box { fill: none; stroke: var(--red); stroke-width: 0.5; stroke-dasharray: 1.4 1; opacity: 0; transition: opacity .2s; vector-effect: non-scaling-stroke; }
.map-box.on { opacity: 1; }
.map-leader { stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity .2s; }
.map-leader.on { opacity: .9; }
.marker {
  position: absolute; transform: translate(-50%, -50%);
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1.5px solid var(--red); background: #fff; color: var(--red);
  font-size: 0.9rem; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .2s, color .2s, transform .2s;
}
.marker:hover, .marker.on { background: var(--red); color: #fff; transform: translate(-50%, -50%) scale(1.12); }
.marker:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.map-legend { list-style: none; margin: 1rem 0 0; padding: 0; font-size: 0.92rem; columns: 2; column-gap: 1rem; }
.map-legend li { break-inside: avoid; }
.map-legend button { background: none; border: 0; padding: 0.15rem 0; cursor: pointer; text-align: left; color: var(--ink-2); display: flex; gap: 0.45rem; align-items: baseline; }
.map-legend button.on { color: var(--red); }
.map-legend .lg-n { color: var(--red); width: 1rem; flex: none; }

.cards { display: flex; flex-direction: column; gap: 1.5rem; }
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 1.6rem 1.8rem 1.4rem;
  transition: border-color .2s, box-shadow .2s;
  scroll-margin-top: calc(var(--bar-h) + 1.5rem);
}
.card.on { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.card-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.card-n {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 0.95rem; flex: none; align-self: center;
  border: 0; cursor: pointer; padding: 0;
}
.card-head h3 { margin: 0; font-weight: 400; font-size: 1.35rem; }
.card-head .kanji { font-size: 1.35rem; }
.card-head .en { color: var(--ink-2); }
.card-lede { margin: 0 0 0.9rem; }
.phases { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: ph; }
.phases li {
  counter-increment: ph; position: relative; padding: 0.55rem 0 0.55rem 2.3rem;
  border-top: 1px solid var(--paper-2);
}
.phases li:first-child { border-top: 0; }
.phases li::before {
  content: counter(ph); position: absolute; left: 0; top: 0.72rem;
  width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1px solid var(--rule);
  font-size: 0.78rem; display: grid; place-items: center; color: var(--ink-2); line-height: 1;
}
.card-after { margin: 0 0 1rem; color: var(--ink); }
.diagram { margin: 0.5rem 0 0; }
.diagram img { max-height: 15rem; width: auto; margin: 0 auto; }

/* ---------- synced player: video, its note directly under it ---------- */

/* the sheet players read left to right as before / during / after: Eri's annotated sheet | the video | her finished piece.
   Below 1200px the video and its note come first and the two images sit under them, annotated then finished. */
.sp {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 1.1rem; margin: 0 0 2rem; align-items: start;
  grid-template-areas: "video video" "band band" "bar bar" "title title" "left right" "strip strip";
}
@media (min-width: 1200px) {
  .sp-tri {
    grid-template-columns: minmax(0, 1fr) 480px minmax(0, 1fr); column-gap: 1.1rem;   /* 1.5x the 320x240 source: the smallest the video goes */
    grid-template-areas: "left video right" "band band band" "bar bar bar" "title title title" "strip strip strip";
  }
}
@media (min-width: 1340px) { .sp-tri { grid-template-columns: minmax(0, 1fr) 560px minmax(0, 1fr); } }   /* more room: 1.75x */
.sp-extras { grid-template-columns: minmax(0, 560px) minmax(12rem, 1fr); column-gap: 2rem; grid-template-areas: "video side" "band side" "bar side" "title side" "strip strip"; }   /* student videos: the plain video and close-up run down the right */
/* a video with no notes (no band, title or strip): only the rows it uses, so no empty rows stretch */
.sp-plain { grid-template-areas: "video side" "bar side"; }
.sp-plain.sp-titled { grid-template-areas: "video side" "bar side" "title side"; }   /* a plain video with Eri's link line under it */
.sp > .video-frame { grid-area: video; }
@media (min-width: 1200px) { .sp-tri > .video-frame { width: 100%; } }
.sp > .sp-side { grid-area: side; min-width: 0; }
.sp > .sp-left { grid-area: left; }
.sp > .sp-right { grid-area: right; }
.sp-left, .sp-right { margin: 0; min-width: 0; }
.sp-left .sheet-stage, .sp-right .sheet-stage { display: block; }
.sp-left .sheet-stage img, .sp-right .sheet-stage img { width: 100%; max-height: none; }
.sp-left figcaption, .sp-right figcaption { margin-top: 0.4rem; }
.sp > .sp-band { grid-area: band; }
.sp > .sp-bar { grid-area: bar; }
.sp > .rp-title { grid-area: title; }
.sp > .sp-strip { grid-area: strip; }
.sp-bar { gap: 0.35rem; margin-top: 0; }
.sp-bar .ctl { padding: 0.15rem 0.65rem; font-size: 0.8rem; min-height: 1.85rem; }
.sp-bar .nav { padding: 0.15rem 0.7rem; font-size: 1rem; line-height: 1; }
.rp-title { font-size: 0.92rem; color: var(--ink-2); margin: 0; }

/* the note band: outside the picture, one fixed height (set from the longest note) so nothing moves */
.sp-band {
  display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.8rem;
  background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--red); border-radius: 3px;
  font-size: 0.93rem; line-height: 1.5; overflow: hidden; cursor: pointer; box-sizing: border-box;
}
.sp-band:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-band.off > * { visibility: hidden; }
.sp-band.probe { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none; height: auto; }
.b-n {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 0.78rem; line-height: 1; margin-top: 0.1rem;
}
.b-body { min-width: 0; }
.b-body p { margin: 0 0 0.35em; }
.b-body p:last-child { margin-bottom: 0; }
.b-head .en { color: var(--ink-2); }
.b-phases { margin: 0 0 0.35em; padding-left: 1.25rem; }
.b-phases li { margin: 0 0 0.25em; padding-left: 0.1rem; }

/* Eri's sheet: beside the video, and optionally laid over it */
.sp-side figure { margin: 0 0 1rem; }
.sheet-stage { position: relative; display: inline-block; vertical-align: top; background: #fff; max-width: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(60,40,20,.07); }
.sheet-stage img { display: block; width: auto; max-width: 100%; max-height: 24rem; }   /* with its caption, no taller than the video beside it */
.sheet-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-box.cur { opacity: 1; fill: var(--red-soft); }
.ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.85; }
.ov-in { position: relative; width: 320px; height: 240px; transform-origin: 0 0; }
.ov .sheet-stage { display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; background: none; box-shadow: none; }
.ov .sheet-stage img { width: 100%; height: 100%; max-width: none; max-height: none; filter: url(#sheet-key); }
.video-frame { position: relative; }

.sp-side .mini-frame { width: 320px; max-width: 100%; aspect-ratio: 4/3; background: #111; border-radius: 3px; overflow: hidden; }
.sp-side .mini-frame video { width: 100%; height: 100%; display: block; }
.sp-side .closeup img { width: 12rem; max-width: 100%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(60,40,20,.08); }

/* the strip: the still each note was written against, or one chip per stroke */
.sp-strip { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0.9rem 0 0; border-top: 1px solid var(--rule); }
.sp-strip.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.45rem; }
.sp-strip button { background: none; border: 2px solid transparent; border-radius: 3px; padding: 0; cursor: pointer; position: relative; display: block; width: 100%; }
.sp-strip.thumbs img { width: 100%; height: auto; border-radius: 1px; }
.sp-strip button.on { border-color: var(--red); }
.th-n {
  position: absolute; left: 0.2rem; top: 0.2rem; min-width: 1.15rem; height: 1.15rem; border-radius: 50%; padding: 0 0.15rem;
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 0.68rem; display: grid; place-items: center; line-height: 1;
}
.sp-strip button.on .th-n { background: var(--red); color: #fff; }
.sp-strip.chips { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.sp-strip.chips button { border: 0; width: auto; padding: 0.15rem 0; text-align: left; color: var(--ink-2); display: flex; gap: 0.45rem; align-items: baseline; }
.sp-strip.chips button.on { color: var(--red); }
.sp-strip.chips .lg-n { color: var(--red); width: 1rem; flex: none; }

/* ---------- vocabulary ---------- */

.vocab-section { padding: 3.5rem 0 1rem; border-top: 1px solid var(--rule); }
.vocab { border-collapse: collapse; width: 100%; max-width: 46rem; font-size: 0.98rem; }
.vocab th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: 0.85rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--ink-2); padding: 0.4rem 0.6rem; }
.vocab td { border-bottom: 1px solid var(--rule); padding: 0.55rem 0.6rem; vertical-align: middle; }
.vocab td:first-child { font-style: italic; }
.vocab td[lang="ja"] { white-space: nowrap; }
.vocab .vk { display: none; }
/* a `table` block (the line tables) is the vocabulary table's own style: its first column is ordinary text, and no column hides on a phone */
.vocab.lines { margin: 0 0 2rem; }
.vocab.lines caption { caption-side: top; text-align: left; font-size: 0.92rem; color: var(--ink-2); padding: 0 0 0.5rem; }
.vocab.lines td:first-child { font-style: normal; }
.vocab.lines.bare { max-width: 56rem; }
.vocab.lines.bare tr:first-child td { border-top: 1px solid var(--ink-2); }
.play {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--rule); background: #fff;
  cursor: pointer; display: inline-grid; place-items: center; padding: 0; color: var(--red);
}
.play:hover, .play.playing { border-color: var(--red); background: var(--red-soft); }
.play svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
/* small speaker beside a word: the size of the text it sits next to; a coarse pointer gets a larger tap area without a larger button */
.play-sm { width: 1.45em; height: 1.45em; flex: none; position: relative; vertical-align: middle; margin: -0.2em 0 -0.2em 0.35em; font-size: inherit; }
.play-sm svg { width: 0.55em; height: 0.55em; }
.play-sm::before { content: ""; position: absolute; inset: -0.3rem; }
.play.playing { background: var(--red); color: #fff; border-color: var(--red); }
.play.playing:hover { background: var(--red); }
.lesson-head .play-sm { font-size: 1.1rem; align-self: center; }
.card-head .play-sm { align-self: center; margin: 0 0 0 -0.4rem; font-size: 1.2rem; }
.sp-strip.chips li { display: flex; align-items: baseline; }
/* the chip rules above (.sp-strip.chips button) would flatten the speaker, so it restates its own look here */
.sp-strip.chips li .play.play-sm { width: 1.45em; height: 1.45em; border: 1px solid var(--rule); border-radius: 50%; place-items: center; background: #fff; color: var(--red); padding: 0; display: inline-grid; align-self: center; margin: 0 0 0 0.3rem; font-size: 0.95rem; }
.sp-strip.chips li .play.play-sm:hover { border-color: var(--red); background: var(--red-soft); }
.sp-strip.chips li .play.play-sm.playing { background: var(--red); color: #fff; border-color: var(--red); }

/* ---------- popover ---------- */

.popover {
  position: absolute; z-index: 50; width: 18rem; background: #fff; border: 1px solid var(--rule);
  border-radius: 6px; box-shadow: 0 16px 40px rgba(40,25,10,.18); padding: 1rem 1.1rem 1.1rem;
}
.pop-top { display: flex; align-items: center; gap: 0.9rem; }
.pop-kanji { font-size: 2rem; line-height: 1.1; }
.pop-kana { color: var(--ink-2); font-size: 0.95rem; }
.pop-romaji { font-style: italic; font-size: 1.1rem; }
.pop-en { margin: 0.5rem 0 0; }
.pop-play { margin-left: auto; }
.pop-stroke { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--paper-2); text-decoration: none; color: var(--ink-2); font-size: 0.9rem; }
.pop-stroke img { width: 5.5rem; background: #fff; }
.pop-stroke:hover { color: var(--red); }

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  :root { --bar-h: 3.1rem; }
  body { display: block; }
  .path {
    width: auto; height: var(--bar-h); padding: 0 0.75rem;
    flex-direction: row; align-items: center; gap: 0.6rem;
    border-right: 0; border-bottom: 1px solid var(--rule);
    background: rgba(250, 247, 241, 0.96); backdrop-filter: blur(6px);
  }
  .path-home { font-size: 0; }
  .path-home span { font-size: 1.35rem; margin: 0; }
  .path ol { display: flex; flex: 1; justify-content: space-between; }
  .path ol::before { left: 0.8rem; right: 0.8rem; top: 50%; bottom: auto; width: auto; height: 1px; }
  .path li a { padding: 0; gap: 0.35rem; }
  .path-t { display: none; }
  .path li a.current .path-t { display: inline; font-size: 0.85rem; background: var(--paper); padding-right: 0.3rem; }
  /* ten numbered dots and the vocabulary link fill the bar: no room for the current section's name, and the dots are a little smaller */
  .path-many li a.current .path-t { display: none; }
  .path-many .path-n { width: 1.4rem; height: 1.4rem; font-size: 0.72rem; }
  .path-vocab { border: 0; padding: 0 0 0 0.4rem; font-size: 0.8rem; }
  main { padding: 0 1rem 4rem; }
  .lesson-head { padding: 2.2rem 0 1.5rem; }
  .h1-kanji { font-size: 3.4rem; }
  .h1-text { font-size: 1.6rem; }
  .movement { padding-top: 2.5rem; }
  h2 { font-size: 1.5rem; }
  .atlas { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .map { top: var(--bar-h); z-index: 5; background: var(--paper); padding: 0.5rem 0; display: flex; gap: 0.9rem; align-items: flex-start; }
  .map-stage { height: 34vh; aspect-ratio: 756 / 1100; flex: none; }
  .map-stage img { width: auto; height: 100%; }
  .marker { width: 1.6rem; height: 1.6rem; font-size: 0.78rem; }
  .map-legend { columns: 1; margin: 0; font-size: 0.85rem; }
  .card { padding: 1.2rem 1.1rem 1rem; }
  .vocab th:nth-child(2), .vocab td:nth-child(2) { display: none; }
  .vocab.lines th:nth-child(2), .vocab.lines td:nth-child(2) { display: table-cell; }
  /* a table with no head (the tool legend) flows its cells in lines on a phone instead of keeping five columns */
  .vocab.lines.bare, .vocab.lines.bare tbody { display: block; }
  .vocab.lines.bare tr { display: flex; flex-wrap: wrap; column-gap: 1.1rem; border-bottom: 1px solid var(--rule); }
  .vocab.lines.bare { border-top: 1px solid var(--ink-2); }
  .vocab.lines.bare td, .vocab.lines.bare tr:first-child td { border: 0; white-space: nowrap; padding: 0.5rem 0; }
  .vocab .vk { display: block; font-style: normal; font-size: 0.85rem; color: var(--ink-2); }
  .vocab td { padding: 0.5rem 0.35rem; }
  .card { scroll-margin-top: calc(var(--bar-h) + 34vh + 1.5rem); }
  .sp { gap: 0.7rem; }
  .sp-extras { grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "band" "bar" "title" "side" "strip"; }
  .sp-plain { grid-template-areas: "video" "bar" "side"; }
  .sp-plain.sp-titled { grid-template-areas: "video" "bar" "title" "side"; }
  .sp-plain.sp-titled > .rp-title { display: block; }
  /* the band keeps its fixed height unless the screen cannot hold it under the video; then it scrolls inside itself */
  .sp-band { font-size: 0.84rem; line-height: 1.4; gap: 0.5rem; padding: 0.45rem 0.55rem; overflow-y: auto;
    max-height: max(10rem, calc(100svh - var(--bar-h) - (100vw - 2rem) * 0.75 - 9.5rem)); }
  .b-n { width: 1.35rem; height: 1.35rem; font-size: 0.7rem; }
  .sp-strip.thumbs { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
  .rp-title { display: none; }
  .popover { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: 12px 12px 0 0; padding-bottom: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}