/* A quiet transcript library: one bold book-and-headphones cover, then room for the words. */
.story-library-surface { --library-paper:#fffefd; --library-ink:#190b26; --library-muted:#62566e; --library-soft:#f6f1eb; --library-line:#d8cfdf; --library-sun:#ffc83d; --library-lilac:#b9a1e8; background:var(--library-paper); color:var(--library-ink); }
.story-library-surface [hidden] { display:none !important; }
.story-library-surface .library-shell { max-width:1240px; padding:0 clamp(20px,4vw,64px) 40px; margin:0 auto; background:transparent; box-shadow:none; border:0; }
.story-library-surface .library-header { position:static; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; background:transparent; box-shadow:none; border:0; border-radius:0; }
.library-header .brand { display:flex; align-items:center; gap:12px; min-width:0; color:var(--library-ink); }
.library-header .brand img { width:52px; height:52px; object-fit:contain; }
.library-header .brand strong { font-size:22px; }
.library-header nav { display:flex; gap:24px; align-items:center; }
.library-header nav a { font-size:15px; font-weight:650; color:var(--library-ink); text-decoration:none; text-underline-offset:5px; }
.library-header nav a:hover { text-decoration:underline; }
.story-library-surface h1,.story-library-surface h2,.story-library-surface h3 { font-family:var(--font-display); color:var(--library-ink); letter-spacing:-.025em; }
.story-library-surface a { text-underline-offset:4px; }
.story-library-surface :is(a,button,input):focus-visible { outline:3px solid var(--library-ink); outline-offset:5px; }
.story-library-surface :is(.library-feature,.worksheet-paper) :is(a,button,input):focus-visible { outline-color:#190b26; }
.story-library-surface p { line-height:1.6; }
.story-library-surface .library-kicker { margin:0 0 18px; font-size:15px; font-weight:650; letter-spacing:0; text-transform:none; }
.library-hero { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:28px; padding:52px 0 58px; }
.library-hero__copy { position:relative; z-index:1; }
.library-hero h1 { font-size:clamp(44px,5.9vw,76px); line-height:1.02; font-weight:550; margin:0 0 25px; max-width:10ch; }
.library-hero__copy > p:not(.library-kicker) { font-size:19px; max-width:36ch; margin:0 0 28px; color:var(--library-muted); }
.library-hero__art { margin:0; position:relative; isolation:isolate; padding:20px 0 0; }
.library-hero__art:before { content:''; position:absolute; z-index:-1; width:92%; aspect-ratio:1; border-radius:50%; left:4%; top:-6%; background:var(--library-sun); }
.library-hero__art img { display:block; width:100%; height:370px; object-fit:cover; object-position:center; border-radius:160px 160px 32px 32px; border:7px solid var(--library-paper); transform:rotate(3deg); }
.library-hero__art figcaption { position:relative; background:var(--library-ink); color:var(--library-paper); padding:12px 18px; width:max-content; max-width:95%; margin:-18px auto 0; border-radius:8px; font-size:15px; font-weight:600; transform:rotate(-3deg); }
.library-button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 24px; border-radius:100px; color:#190b26; background:var(--library-sun); text-decoration:none; font-weight:750; font-size:16px; border:2px solid #190b26; box-shadow:0 4px 0 #190b26; }
.library-button:hover { box-shadow:0 2px 0 #190b26; transform:translateY(2px); }
.library-button--plum { background:#190b26; color:#fffefd; box-shadow:none; }
.library-feature { display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:center; padding:30px; background:var(--library-lilac); border-radius:8px 28px 28px 28px; margin:10px 0 78px; color:#190b26; }
.library-feature__label { font-size:15px; font-weight:650; }
.library-feature__label p { margin:5px 0 0; }
.library-star { font-size:46px; line-height:1; }
.library-feature h2 { margin:0 0 10px; font-size:30px; line-height:1.16; color:#190b26; }
.library-feature h2 a { color:inherit; text-decoration:none; }
.library-feature h2 a:hover { text-decoration:underline; }
.library-feature__copy p { margin:0 0 10px; font-size:16px; max-width:52ch; }
.library-feature__copy > span { font-size:14px; }
.library-browse { scroll-margin-top:24px; }
.library-browse__heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.library-browse__heading .library-kicker { margin-bottom:8px; }
.library-browse h2 { margin:0; font-size:clamp(30px,3.8vw,46px); line-height:1.15; }
.library-browse__heading > p { font-size:14px; color:var(--library-muted); white-space:nowrap; }
.library-search { padding:22px 24px 12px; background:var(--library-soft); border-radius:16px; margin:0 0 30px; }
.library-search label { display:block; font-size:16px; font-weight:650; margin-bottom:10px; }
.library-search__field { display:flex; align-items:center; gap:12px; border-bottom:2px solid var(--library-ink); }
.library-search__field svg { width:23px; height:23px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
.library-search__field input { width:100%; min-width:0; padding:12px 0; background:transparent; border:0; border-radius:0; color:var(--library-ink); font:inherit; font-size:18px; box-shadow:none; }
.library-search__field input::placeholder { color:var(--library-muted); opacity:1; }
.library-search__field button { min-height:44px; padding:6px 12px; border:0; background:transparent; color:var(--library-ink); font:inherit; font-size:14px; font-weight:650; text-decoration:underline; cursor:pointer; }
.library-search__status { color:var(--library-muted); font-size:14px; margin:12px 0 0; }
.library-month { display:grid; grid-template-columns:180px minmax(0,1fr); gap:26px; margin:0; }
.library-month > h3 { font-size:24px; margin:30px 0 0; line-height:1.2; }
.story-library-surface .story-index { max-width:none; margin:0; padding:0; list-style:none; }
.story-library-surface .library-row { display:grid; grid-template-columns:minmax(0,1fr) auto 20px; align-items:center; gap:22px; padding:26px 0; border-bottom:1px solid var(--library-line); }
.library-row__copy a { display:block; width:fit-content; color:var(--library-ink); font-family:var(--font-display); font-size:25px; font-weight:500; line-height:1.2; text-decoration:none; }
.library-row__copy a:hover { text-decoration:underline; }
.story-library-surface .story-index__book { margin-top:6px; color:var(--library-muted); font-size:15px; }
.library-row__episode { display:block; font-size:14px; line-height:1.5; color:var(--library-muted); margin-top:5px; }
.library-row__facts { display:grid; gap:4px; text-align:right; color:var(--library-muted); font-size:14px; white-space:nowrap; }
.library-row__arrow { font-size:23px; }
.library-empty { padding:32px; border:1px dashed var(--library-line); border-radius:16px; }
.library-note { margin:70px 0 36px; padding:36px 40px; display:grid; grid-template-columns:64px 1fr; gap:22px; border-radius:24px 24px 8px 24px; background:var(--library-soft); }
.library-note__mark { font-family:Georgia,serif; font-size:100px; line-height:1; color:var(--library-ink); }
.library-note h2 { font-size:30px; margin:0 0 12px; }
.library-note p { max-width:66ch; margin:0; color:var(--library-muted); }
.library-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 30px; padding:20px 0; border-top:1px solid var(--library-line); }
.library-footer a,.library-text-link { color:var(--library-ink); font-size:15px; font-weight:650; }
/* Detail pages keep playback and reading comfortably in the same column. */
.story-page .library-shell { max-width:1100px; }
.story-page .library-header { padding:12px 0; }
.story-page .story-crumb { display:flex; flex-wrap:wrap; gap:10px; font-size:14px; margin:12px 0 16px; color:var(--library-muted); }
.story-crumb a { color:inherit; }
.story-intro { max-width:820px; }
.story-intro .library-kicker { margin:0 0 8px; color:var(--library-muted); }
.story-intro h1 { font-size:clamp(32px,4.5vw,54px); line-height:1.08; margin:0 0 10px; max-width:26ch; font-weight:550; }
.story-episode-title,.story-book-credit { font-size:15px; color:var(--library-muted); margin:0 0 8px; }
.story-details { margin:20px 0 0; }
.story-page .story-summary { font-size:18px; max-width:65ch; margin:8px 0 0; line-height:1.6; }
.story-facts { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:12px 0 16px; }
.story-facts li { padding:5px 11px; border:1px solid var(--library-line); border-radius:100px; font-size:14px; }
.story-listen { background:#190b26; color:#fffefd; padding:18px 24px; border-radius:24px; }
.story-listen strong { font-family:var(--font-display); font-size:25px; font-weight:500; }
.story-page .story-listen .story-hint { margin:10px 0 0; color:#e5daed; font-size:15px; }
.story-page .story-listen #story-audio { display:block; width:100%; max-width:none; margin:12px 0 0; }
.story-jumps { display:flex; flex-wrap:wrap; gap:12px 24px; margin:24px 0 38px; }
.story-jumps a { color:var(--library-ink); font-size:15px; font-weight:600; }
.story-page .story-transcript { padding:clamp(22px,5vw,54px); border:1px solid var(--library-line); border-radius:8px 8px 28px 28px; background:var(--library-paper); box-shadow:8px 8px 0 var(--library-soft); }
.story-transcript h2 { font-size:34px; margin:0 0 28px; scroll-margin-top:24px; }
.story-page .story-transcript p { font-size:19px; line-height:1.9; max-width:65ch; margin:0 0 19px; }
.story-page .story-transcript .story-reading-note { padding:18px 22px; margin:30px 0; background:var(--library-soft); border:0; border-left:4px solid var(--library-sun); color:var(--library-muted); font-size:15px; line-height:1.65; border-radius:0 12px 12px 0; }
.story-page .worksheet-paper { max-width:none; margin:58px 0 38px; border:1px solid #d4c9b5; border-radius:8px; background:#fff9e9; color:#190b26; padding:clamp(24px,5vw,50px); }
.story-page .worksheet-paper h2 { color:#190b26; font-size:40px; margin:0 0 15px; scroll-margin-top:24px; }
.story-page .worksheet-paper .library-kicker { font-size:14px; }
.story-page .worksheet-question > p { font-size:18px; font-weight:550; }
.story-next { padding:10px 0 35px; }
.story-next h2 { font-size:34px; }
.story-page .story-related { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0; }
.story-related li { margin:0; }
.story-related a { display:block; min-height:76px; padding:20px; color:var(--library-ink); background:var(--library-soft); border-radius:12px; font-family:var(--font-display); font-size:23px; text-decoration:none; }
.story-related a:hover { text-decoration:underline; }
html[data-night="on"] .story-library-surface { --library-paper:#fff1df; --library-soft:#f5e1c6; --library-lilac:#d5bdd7; }
html[data-calm="on"] .story-library-surface { --library-paper:#f7f8f7; --library-soft:#e9eeeb; --library-sun:#c8dfc3; --library-lilac:#d8d6e3; }
html[data-calm="on"] .library-hero__art img { filter:saturate(.6); transform:none; }
html[data-dark="on"] .story-library-surface { --library-paper:#21142d; --library-ink:#f8f1e7; --library-muted:#c9bdd2; --library-soft:#30213e; --library-line:#5c4869; --library-lilac:#b9a1e8; }
html[data-dark="on"] .story-library-surface .library-header { background:transparent; }
html[data-dark="on"] .library-hero__art img { border-color:#21142d; filter:brightness(.8); }
html[data-dark="on"] .story-library-surface .library-feature h2 { color:#190b26; }
html[data-dark="on"] .story-library-surface .worksheet-paper,html[data-night="on"] .story-library-surface .worksheet-paper { background:#f5e9d1; }
@media(max-width:760px) {
  .story-library-surface .library-header { gap:12px; padding:20px 0; }
  .library-header .brand { gap:8px; }
  .library-header .brand strong { font-size:18px; }
  .library-header .brand img { width:40px; height:40px; }
  .library-header nav { gap:12px; }
  .library-header nav a { font-size:14px; }
  .library-hero { grid-template-columns:1fr; gap:30px; padding:30px 0 40px; }
  .library-hero h1 { font-size:clamp(44px,10vw,65px); max-width:none; }
  .library-hero__copy > p:not(.library-kicker) { font-size:18px; max-width:38ch; }
  .library-hero__art { width:min(100%,430px); justify-self:center; }
  .library-hero__art img { height:285px; }
  .library-feature { grid-template-columns:1fr; gap:14px; padding:26px; margin:22px 0 52px; }
  .library-feature__label { display:flex; align-items:center; gap:10px; }
  .library-feature__label p { margin:0; }
  .library-star { font-size:30px; }
  .library-feature .library-button { justify-self:start; margin-top:6px; }
  .library-browse__heading { display:block; }
  .library-browse__heading > p { margin-top:12px; }
  .library-search { padding:18px 18px 12px; }
  .library-search__field input { font-size:16px; }
  .library-month { display:block; }
  .library-month > h3 { padding:24px 0 8px; margin:0; font-size:22px; }
  .story-library-surface .library-row { padding:22px 0; gap:12px; grid-template-columns:minmax(0,1fr) auto; }
  .library-row__copy a { font-size:23px; }
  .library-row__arrow { display:none; }
  .library-row__facts { font-size:14px; }
  .library-note { padding:26px; gap:8px; grid-template-columns:1fr; margin-top:50px; }
  .library-note__mark { height:45px; font-size:80px; }
  .library-note h2 { font-size:28px; }
  .story-page .story-summary { font-size:18px; }
  .story-page .story-transcript p { font-size:18px; }
  .story-page .story-related { grid-template-columns:1fr; }
  .story-page .library-header { padding:12px 0; }
  .story-listen { padding:16px; }
  .story-listen strong { font-size:23px; }
}
@media(max-width:410px) { .library-header .brand strong { max-width:85px; line-height:1.05; } .library-header nav { gap:10px; } .library-header nav a { max-width:70px; line-height:1.2; } }
@media(max-width:410px) {
  .story-page .library-header { flex-wrap:nowrap; gap:10px; padding:8px 0; }
  .story-page .story-crumb { margin:4px 0 12px; }
  .story-page .story-intro h1 { font-size:30px; }
  .story-page .library-header .brand { gap:6px; }
  .story-page .library-header .brand img { width:36px; height:36px; }
  .story-page .library-header .brand strong { font-size:16px; max-width:75px; }
  .story-page .library-header nav { gap:8px; }
  .story-page .library-header nav a { font-size:12px; max-width:60px; }
  .story-page .story-facts { gap:6px; margin:8px 0 12px; }
  .story-page .story-facts li { padding:5px 8px; font-size:12px; }
  .story-page .story-listen strong { font-size:20px; line-height:1.25; display:block; }
}
@media(prefers-reduced-motion:reduce) { .library-button:hover { transform:none; } }
@media print {
  /* Print tokens override saved display modes for the whole page, including
     ordinary browser printing without the worksheet-only body class. */
  .story-library-surface { --library-paper:#fff !important; --library-ink:#000 !important; --library-muted:#333 !important; --library-soft:#fff !important; --library-line:#aaa !important; --library-sun:#fff !important; --library-lilac:#fff !important; background:white !important; color:black !important; }
  .story-library-surface * { color:inherit !important; text-shadow:none !important; }
  .story-library-surface :is(.story-transcript,.library-feature,.library-note,.story-related a,.library-button) { box-shadow:none; }
  .story-library-surface .library-button { background:white; color:black; }
  .story-library-surface .spoken-word { background:transparent; color:inherit; }
  .story-library-surface .library-shell { max-width:none; padding:0; }
  .story-page .worksheet-paper { border:0; padding:0; margin:0; background:white !important; }
  .story-page .worksheet-paper h2 { font-size:22pt; }
  .story-page .worksheet-question > p { font-size:12pt; }
  .library-header,.library-search,.library-hero__art,.story-listen,.story-jumps { display:none !important; }
}

.library-hero__copy > p.library-scope-note { font-size:14px; line-height:1.55; max-width:42ch; margin:20px 0 0; color:var(--library-muted); }

.story-listen .story-unclear-note { font-size:14px; color:#e5daed; margin:6px 0 0; }
