/* learn_series.css v1.01 2026-10-10 — (v1.01: section blurbs show whole on a phone, the online lessons on the index are underlined) the Learn series index (templates/learn_index.html) and a section's page (templates/learn_section.html).
 *
 * The lesson pages' own type and colors (static/lesson-player/style.css: Lesson Serif, ink, rule, Eri's correction red as the only
 * accent), scoped under .learn because both pages extend base.html and keep the site's frame and background (style.css: body
 * bg_body-repeat.jpg, main bg_body.jpg). The player's stylesheet cannot be loaded here (it styles bare body, main, h1, a, img), so the
 * few values are repeated, not a new set: when the player's change, change these.
 */
@font-face {
  font-family: "Lesson Serif";
  src: url("/static/lesson-player/fonts/NotoSerifCJKjp-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.learn {
  --ink: #221d19; --ink-2: #5f564e; --ink-3: #8a8077; --rule: #ddd4c6; --red: #c8361f; --paper: #faf7f1;
  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.6; color: var(--ink);
  padding: 2.5rem 0 1rem;
}
.learn i, .learn em { font-style: italic; font-synthesis-style: auto; }
.learn [lang="ja"] { font-style: normal; }
.learn a { color: inherit; }

/* the site gives every bare <header> a papered band with a red bottom border (style.css header) and every h1/h2/h3 the site font in
   the site's red (style.css h1, h2, h3); a lesson page's title block is neither, so these take the player's values instead. */
.learn-head { background: none; padding: 0; border: 0; }
.learn h1, .learn h2, .learn h3 { font-family: inherit; color: var(--ink); font-weight: 400; }
.learn-head h1 { margin: 0 0 0.4rem; font-size: 2.2rem; line-height: 1.15; }
.learn-byline { margin: 0; color: var(--ink-2); }

.learn-intro { margin: 2rem 0 0; padding-top: 2rem; border-top: 1px solid var(--rule); max-width: 38rem; }
.learn-intro h2 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.25; }
.learn-intro p { margin: 0 0 1em; }
.learn-intro a, .learn-glossary a, .learn-back a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.learn-intro a:hover, .learn-intro a:focus-visible, .learn-glossary a:hover, .learn-glossary a:focus-visible,
.learn-back a:hover, .learn-back a:focus-visible { color: var(--red); outline: none; }

/* the index: a year heading, then one compact row per section — "Section N  title" with its lessons inline as Eri's characters.
   An online lesson is a link in ink; every other lesson is muted and not a link. */
.series-map { margin-top: 1.4rem; max-width: 46rem; }
.learn h2.series-year { margin: 1.6rem 0 0.2rem; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.series-rows { list-style: none; margin: 0; padding: 0; }
.series-row { padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.series-row p { margin: 0; }
.series-head { font-size: 0.95rem; line-height: 1.4; }
.series-sec { color: var(--ink-2); letter-spacing: 0.04em; }
.series-sec a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.series-sec a:hover, .series-sec a:focus-visible { color: var(--red); outline: none; }
.series-title { color: var(--ink); }
.series-pending { margin-left: 0.4rem; color: var(--ink-3); font-size: 0.8rem; font-style: italic; }
.series-lessons { margin-top: 0.1rem; font-size: 1.35rem; line-height: 1.5; }
.series-lesson { display: inline-block; margin-right: 0.75rem; text-decoration: none; }
/* the underline is the tap cue (ink on grey alone does not read as a link on a phone); it replaces the faint rule that was here, which would double it */
.series-lesson.series-on { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.series-lesson.series-on:hover, .series-lesson.series-on:focus-visible { color: var(--red); outline: none; }
.series-lesson.series-off { color: var(--ink-3); opacity: 0.8; }

.learn-glossary { margin: 2rem 0 0; }

/* a section's page: the lessons as compact rows. The picture sits in a small square and is contained, so the whole image is always
   shown (never a crop through the brushwork). The whole row is the link. */
.sec-lessons { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 46rem; border-top: 1px solid var(--rule); }
.sec-lessons li { border-bottom: 1px solid var(--rule); }
.sec-lesson { display: flex; gap: 1rem; align-items: flex-start; padding: 0.8rem 0.2rem; text-decoration: none; }
.sec-lesson img { flex: none; display: block; width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--rule); }
.sec-lesson-body { display: block; min-width: 0; }
.sec-lesson-n { display: block; color: var(--ink-2); letter-spacing: 0.12em; font-size: 0.78rem; text-transform: uppercase; line-height: 1.4; }
.sec-lesson-title { display: block; font-size: 1.2rem; line-height: 1.3; }
.sec-lesson-line { display: block; margin-top: 0.2rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.sec-lesson:hover .sec-lesson-title, .sec-lesson:focus-visible .sec-lesson-title { color: var(--red); }
.sec-lesson:focus-visible { outline: 1px solid var(--red); }

/* the foot row: the same form as the lesson pages' previous/next lesson row (lesson_frame.css .lesson-nav). A section with no page yet is shown, greyed, not linked. */
.learn-nav { max-width: 46rem; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.9rem; }
.learn-nav a { color: var(--color-link); text-decoration: none; }
.learn-nav a:hover, .learn-nav a:focus-visible { text-decoration: underline; outline: none; }
.learn-nav-next { text-align: right; margin-left: auto; }
.learn-nav-off { color: var(--ink-3); }

.learn-back { margin: 1.6rem 0 0; }

@media (max-width: 600px) {
  .learn { padding-top: 1.2rem; font-size: 1rem; line-height: 1.5; }
  .learn-head h1 { font-size: 1.8rem; }
  .learn-intro { margin-top: 1.2rem; padding-top: 1.2rem; }
  .learn-intro h2 { font-size: 1.25rem; margin-bottom: 0.7rem; }
  .learn-head h1 { font-size: 1.6rem; }
  .learn-intro p { margin-bottom: 0.8em; }
  .learn h2.series-year { margin-top: 1.1rem; }
  .series-row { padding: 0.35rem 0; }
  .series-lessons { font-size: 1.2rem; line-height: 1.4; }
  .series-lesson { margin-right: 0.55rem; }
  .sec-lessons { margin-top: 1.4rem; }
  .sec-lesson { gap: 0.8rem; padding: 0.6rem 0.2rem; }
  .sec-lesson img { width: 64px; height: 64px; }
  .sec-lesson-title { font-size: 1.1rem; }
}