/* Tales on the website (server/tales-pages.js): /tales and /tales/<slug>.
   The shelf, cards, covers and reader are tales.css's, shared with the game's
   overlay; this is the page around them: a slim header in the reader's ink,
   cream paper on a desk, and a long story set for reading. */
:root {
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --ink: #1c2e33; --paper: #f4eedf; --desk: #e8e0cb; --text: #33453f; --soft: #6f7563; --gold: #a08a55; --green: #3f6559;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.tales-body { margin: 0; min-height: 100vh; background: var(--desk); color: var(--text); font: 16px/1.5 Georgia, 'Iowan Old Style', serif; }
.tales-site [hidden] { display: none !important; }
.tales-body a { color: inherit; }
.tales-body a:focus-visible, .tales-body button:focus-visible { outline: 3px solid #c99a3e; outline-offset: 3px; }

/* ------- the site's header ------- */
.ts-head { background: var(--ink); color: #f3ead2; padding: var(--sat) var(--sar) 0 var(--sal); }
.ts-in { display: flex; align-items: center; gap: 22px; max-width: 1132px; min-height: 58px; margin: 0 auto; padding: 0 26px; }
.ts-brand { display: inline-flex; align-items: center; gap: 9px; color: #faf0d6 !important; font: 500 21px/1 Georgia, serif; letter-spacing: .01em; text-decoration: none; }
.ts-star { color: #e4d2a2; font-size: 17px; }
.ts-nav { display: flex; gap: 18px; padding-left: 22px; border-left: 1px solid #80938d55; }
.ts-nav a { color: #c4cdbf !important; font: 15px/1 Georgia, serif; text-decoration: none; padding: 8px 0; }
.ts-nav a:hover, .ts-nav a[aria-current="page"] { color: #faf0d6 !important; }
.ts-nav a[aria-current="page"] { box-shadow: inset 0 -2px #bdcc9b; }
.ts-play {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 38px; padding: 8px 18px; border-radius: 999px;
  background: #dce9ca; color: #182e29 !important; font: 15px/1 Georgia, serif; text-decoration: none; transition: background .15s;
}
.ts-play:hover { background: #f1f7dc; }

/* ------- the page's paper ------- */
.tales-site { display: block; max-width: 1132px; margin: 0 auto; padding: 30px calc(26px + var(--sar)) calc(64px + var(--sab)) calc(26px + var(--sal)); }
.tales-site .tl-sheet {
  width: 100%; margin: 0 auto; padding: 30px 36px 40px; text-align: left; border-radius: 6px;
  background: var(--paper); color: #3b4946; border: 1px solid #c9b88d66; box-shadow: 0 1px 0 #d8cba7, 0 14px 40px #6b5a2c14;
  overflow-wrap: break-word;
}
/* no script, no chips: they only work with one */
html.nojs .tl-chipslot { display: none; }
.tales-site .tales-library { min-height: 60vh; }

/* the reader, drawn into the page (a player's own tale, or a story page by the page) */
.tales-site .tl-sheet.tales-reader {
  display: flex; flex-direction: column; width: min(760px, 100%);
  height: calc(100vh - 58px - 60px - var(--sat)); height: calc(100dvh - 58px - 60px - var(--sat)); min-height: 420px; max-height: 900px; overflow: hidden;
  padding: 16px 0 12px; background: var(--ink); color: #f3ead2; border: 1px solid #7c9684; border-top: 3px solid #bdcc9b; border-radius: 15px; box-shadow: 0 18px 50px #1c2e3333;
}
.tales-site .tales-write, .tales-site .tales-progress, .tales-site .tales-failed, .tales-site .tales-rewriting { max-width: 760px; }

/* ------- a story's own page ------- */
.tales-story { max-width: 860px; }
.tl-article {
  max-width: 760px; margin: 0 auto; overflow: hidden; border-radius: 8px;
  background: var(--paper); border: 1px solid #c9b88d66; box-shadow: 0 1px 0 #d8cba7, 0 14px 40px #6b5a2c14;
}
/* the cover beside the title, a book's own cover; on a phone, a band above it */
.tl-ahead {
  display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: center; gap: 0 30px;
  padding: 40px 56px 28px; border-bottom: 1px solid #d8cba7aa;
}
.tl-acover .tl-cover { border-radius: 8px; box-shadow: 0 1px 0 #e6dcc0, 0 6px 18px #6b5a2c26; }
.tl-atext { min-width: 0; }
.tl-ahead .tl-eyebrow { margin: 0 0 8px; }
.tl-ahead .tl-crumb { margin: 0 0 8px; }
.tl-ahead .tl-crumb .tl-eyebrow { margin: 0; }
.tl-abar { grid-column: 1 / -1; }
.tl-ahead h1 { margin: 0 0 10px; color: #2f4039; font: 500 40px/1.14 Georgia, serif; letter-spacing: -.012em; text-wrap: balance; }
.tl-ameta { margin: 0; color: var(--soft); font: italic 16px/1.5 Georgia, serif; }
.tl-abar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.tl-abar:has(.tl-lslot[hidden]):has(.tl-tools[hidden]) { display: none; }
.tl-abar .tl-lslot { flex: 1 1 320px; min-width: 0; max-width: 520px; margin: 0; }
.tl-abar .tl-lslot[hidden] { display: none; }
.tl-abar audio { display: block; width: 100%; max-width: 460px; height: 40px; }
.tl-tools { flex: none; margin-left: auto; }
.tl-pagesbtn {
  min-height: 38px; padding: 7px 16px; border: 1px solid #b9b08f; border-radius: 999px; background: #fbf7ec;
  color: #45554e; font: 14px/1.2 Georgia, serif; cursor: pointer; transition: background .15s, border-color .15s;
}
.tl-pagesbtn:hover { background: #fffcf3; border-color: #9fa47f; }
/* the Listen control on paper (tales.css draws it for the reader's ink) */
.tl-article .tl-listen { gap: 12px; }
.tl-article .tl-play { border-color: var(--green); background: var(--green); color: #fff4dd; width: 42px; height: 42px; }
.tl-article .tl-play:hover:not(:disabled) { background: #2c5147; }
.tl-article .tl-lword { color: #7b8665; }
.tl-article .tl-ltime { color: #85866f; }
.tl-article .tl-seek::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--green) var(--p), #cfc5a8 var(--p)); }
.tl-article .tl-seek::-webkit-slider-thumb { background: var(--green); box-shadow: 0 0 0 3px var(--paper); }
.tl-article .tl-seek::-moz-range-track { background: #cfc5a8; }
.tl-article .tl-seek::-moz-range-progress { background: var(--green); }
.tl-article .tl-seek::-moz-range-thumb { background: var(--green); }
.tl-article .tl-listen.loading .tl-play::after { border-top-color: var(--gold); }
.tl-article .tl-lerr { margin: 6px 0 0; color: #9a4b23; font: 13px/1.5 system-ui, sans-serif; }
.tl-article .tl-lerr:empty { display: none; }
/* "Read it aloud", and "Narrating…" while it is made (server/curated-narrate.js) */
.tl-article .tl-lnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; color: var(--soft); font: italic 15px/1.5 Georgia, serif; }
.tl-article .tl-link { border-color: #b9b08f; background: #fbf7ec; color: #45554e; }
.tl-article .tl-link:hover:not(:disabled) { background: #fffcf3; border-color: #9fa47f; }
.tl-article .tl-aloud .tl-picon { border-left-color: var(--green); }
.tl-article .tl-spin.small { border-color: #cfc5a8; border-top-color: var(--green); }

/* the story itself: one long page, set for reading */
.tl-body { padding: 34px 56px 6px; }
.tl-body p { margin: 0 0 1.05em; color: #2c3b36; font: 20px/1.75 Georgia, 'Iowan Old Style', serif; font-size: calc(20px * var(--tl-scale, 1)); text-wrap: pretty; hanging-punctuation: first; }
.tl-body p:first-child::first-letter { float: left; margin: .1em .1em 0 0; color: var(--green); font: 3.3em/.82 Georgia, serif; }
.tl-body em { font-style: italic; }
.tl-body strong { font-weight: 700; color: #1f2d29; }
.tl-body .tl-break { margin: 1.3em 0 1.5em; text-align: center; color: var(--gold); letter-spacing: .6em; }
.tl-article .tl-fin { margin: 10px 0 30px; text-align: center; color: var(--gold); font: 24px Georgia, serif; }
/* "How was it?" under the ✧, on paper */
.tl-rateslot { margin: -18px 56px 30px; }
.tl-rateslot[hidden] { display: none; }
.tl-article .tl-rq { color: var(--soft); }
.tl-article .tl-star { color: #cfc5a8; }
.tl-article .tl-star.on { color: #c79a2e; }
.tl-article .tl-star:focus-visible { outline-color: var(--green); }
@media (hover: hover) and (pointer: fine) {
  .tl-article .tl-stars:hover .tl-star { color: #c79a2ecc; }
  .tl-article .tl-stars .tl-star:hover ~ .tl-star { color: #cfc5a8; }
}
.tl-article .tl-rnotebtn { color: var(--green); text-decoration-color: #3f655966; }
.tl-article .tl-rnotebtn:hover { color: #2c5147; }
.tl-article .tl-rnote textarea { border-color: #b9b08f; background: #fbf7ec; color: #33453f; }
.tl-article .tl-rnote textarea:focus { outline-color: var(--green); }
.tl-arate { white-space: nowrap; font-style: normal; color: #9b8656; }

/* previous and next */
.tl-pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #d8cba7aa; }
.tl-pn a { display: flex; flex-direction: column; gap: 4px; padding: 20px 56px 24px; text-decoration: none; transition: background .15s; }
.tl-pn a:hover { background: #efe7d2; }
.tl-pn a + a, .tl-pn span + a { border-left: 1px solid #d8cba7aa; }
.tl-pnnext { text-align: right; }
.tl-pnword { color: #7b8665; font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.tl-pntitle { color: #2f4039; font: 17px/1.35 Georgia, serif; }

/* more tales */
.tl-more { max-width: 760px; margin: 44px auto 0; }
.tl-more .tl-sh { margin: 0 0 14px; color: #7b8665; font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.tl-more .tl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tl-all { margin: 20px 0 0; text-align: right; font: 15px Georgia, serif; }
.tl-all a { color: var(--green); text-decoration: none; }
.tl-all a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* the story page by page: the reader where the long page was */
.tales-story .tl-host.tales-reader { margin: 0 auto; }

/* not on the shelf */
.tl-missing { max-width: 640px; text-align: center !important; padding: 56px 30px !important; }
.tl-missing h1 { margin: 0 0 22px; font: 500 30px/1.2 Georgia, serif; color: #33453f; }
.tl-missing p { margin: 0; }
.tl-missing a { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 760px) {
  .tl-more .tl-grid { grid-template-columns: 1fr; gap: 10px; }
}
/* phones: the paper runs edge to edge */
@media (max-width: 640px) {
  .ts-in { gap: 14px; min-height: 52px; padding: 0 16px; }
  .ts-brand { font-size: 19px; }
  .ts-nav { padding-left: 14px; }
  .ts-play { min-height: 34px; padding: 7px 14px; font-size: 14px; }
  .tales-site { padding: 0 0 calc(40px + var(--sab)); }
  .tales-site .tl-sheet { padding: 18px calc(16px + var(--sar)) 28px calc(16px + var(--sal)); border: 0; border-radius: 0; box-shadow: none;
    min-height: calc(100vh - 52px - var(--sat)); min-height: calc(100dvh - 52px - var(--sat)); }
  .tales-site .tl-sheet.tales-reader {
    height: calc(100vh - 52px - var(--sat)); height: calc(100dvh - 52px - var(--sat)); max-height: none; min-height: 0;
    padding: 10px 0 calc(10px + var(--sab)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
  }
  .tl-article { border: 0; border-radius: 0; box-shadow: none; }
  .tl-ahead { display: block; padding: 0 20px 20px; }
  .tl-acover { margin: 0 -20px 22px; }
  .tl-acover .tl-cover { aspect-ratio: 16 / 8; border-radius: 0; box-shadow: none; border-bottom: 1px solid #0000000f; }
  .tl-ahead h1 { font-size: 30px; }
  .tl-ameta { font-size: 15px; }
  .tl-abar .tl-lslot { flex-basis: 100%; }
  .tl-tools { margin-left: 0; }
  .tl-body { padding: 26px 20px 4px; }
  .tl-rateslot { margin: -18px 16px 26px; }
  .tl-body p { font-size: calc(18.5px * var(--tl-scale, 1)); line-height: 1.7; }
  .tl-pn a { padding: 16px 20px 20px; }
  .tl-pntitle { font-size: 15.5px; }
  .tl-more { margin-top: 30px; padding: 0 16px; }
}
/* Aa on paper, beside Page by page */
.tl-tools { display: flex; align-items: center; gap: 6px; }
.tl-article .tl-aa { color: #6f7563; }
.tl-article .tl-aa:hover, .tl-article .tl-aa[aria-expanded="true"] { color: #2f4039; background: #e9e1cb; }
.tl-article .tl-etcbtn { color: #6f7563; }
.tl-article .tl-etcbtn:hover, .tl-article .tl-etcbtn[aria-expanded="true"] { color: #2f4039; background: #e9e1cb; }
.tl-article .tl-moon { color: #9a9a82; }
.tl-article .tl-moon:hover { color: #3f6559; background: #e9e1cb; }
.tl-article .tl-moon.on { color: var(--green); }
.tl-article .tl-sleft { color: #85866f; }
/* night on paper: a dim sepia page, warm low-contrast type */
html.tl-night body.tales-body { background: #1b1712; }
.tales-story.tl-night .tl-article { background: #2a2219; border-color: #3d3326; box-shadow: none; }
.tales-story.tl-night .tl-ahead, .tales-story.tl-night .tl-pn, .tales-story.tl-night .tl-pn a + a, .tales-story.tl-night .tl-pn span + a { border-color: #4a3e2e; }
.tales-story.tl-night .tl-ahead h1 { color: #d9c193; }
.tales-story.tl-night .tl-ameta, .tales-story.tl-night .tl-arate, .tales-story.tl-night .tl-eyebrow { color: #9d8a6c; }
.tales-story.tl-night .tl-body p { color: #c9b28a; }
.tales-story.tl-night .tl-body strong { color: #d9c193; }
.tales-story.tl-night .tl-body p:first-child::first-letter { color: #a88553; }
.tales-story.tl-night .tl-body .tl-break, .tales-story.tl-night .tl-article .tl-fin { color: #8a7150; }
.tales-story.tl-night .tl-acover { opacity: .7; }
.tales-story.tl-night .tl-pagesbtn { background: #352b20; border-color: #5a4c39; color: #d0b98e; }
.tales-story.tl-night .tl-pagesbtn:hover { background: #3d3226; }
.tales-story.tl-night .tl-article .tl-aa, .tales-story.tl-night .tl-article .tl-moon, .tales-story.tl-night .tl-article .tl-etcbtn { color: #9d8a6c; }
.tales-story.tl-night .tl-article .tl-etcbtn:hover, .tales-story.tl-night .tl-article .tl-etcbtn[aria-expanded="true"],
.tales-story.tl-night .tl-article .tl-aa:hover, .tales-story.tl-night .tl-article .tl-aa[aria-expanded="true"],
.tales-story.tl-night .tl-article .tl-moon:hover { color: #d9c193; background: #352b20; }
.tales-story.tl-night .tl-article .tl-moon.on { color: #c9a66b; }
.tales-story.tl-night .tl-article .tl-play { background: #8a7048; border-color: #8a7048; color: #2a2219; }
.tales-story.tl-night .tl-article .tl-lword, .tales-story.tl-night .tl-article .tl-ltime, .tales-story.tl-night .tl-article .tl-sleft { color: #9d8a6c; }
.tales-story.tl-night .tl-article .tl-seek::-webkit-slider-runnable-track { background: linear-gradient(to right, #a88553 var(--p), #4a3e2e var(--p)); }
.tales-story.tl-night .tl-article .tl-seek::-webkit-slider-thumb { background: #a88553; box-shadow: 0 0 0 3px #2a2219; }
.tales-story.tl-night .tl-article .tl-seek::-moz-range-track { background: #4a3e2e; }
.tales-story.tl-night .tl-article .tl-seek::-moz-range-progress, .tales-story.tl-night .tl-article .tl-seek::-moz-range-thumb { background: #a88553; }
.tales-story.tl-night .tl-pntitle { color: #d0b98e; }
.tales-story.tl-night .tl-pn a:hover { background: #30271d; }
.tales-story.tl-night .tl-more .tl-sh, .tales-story.tl-night .tl-pnword { color: #9d8a6c; }
body.tales-body, .tl-article, .tl-body p { transition: background-color .4s, color .4s; }
@media (prefers-reduced-motion: reduce) {
  body.tales-body, .tl-article, .tl-body p { transition: none; }
}
@media (max-width: 380px) {
  .ts-nav { display: none; }
}

/* ------- your own tale's long page on /tales (js/tales.js showArticle) -------
   A story's page (above), drawn in the page's script, with what is yours
   alone: the details line and "Your idea", Edit · Rewrite… · History under
   the title, "Continue the story?" at the end, a serial's parts as
   Previous and Next, and the way back to your tales beneath. */
.tales-site .tales-book.tales-article { display: block; }
/* the library's buttons inherit their font (tales.css .tales-book button); the story page's own don't */
.tl-article .tl-pagesbtn { font: 14px/1.2 Georgia, serif; }
.tl-article .tl-cstep { font: 17px/1 Georgia, serif; }
.tl-article .tl-nudgex { font: 18px/1 system-ui, sans-serif; }
.tales-site .tales-book .tl-article .tl-ssum { margin: 0 0 8px; }
.tl-article .tl-rdet { gap: 2px 16px; margin: 10px 0 0; color: var(--soft); font: 13px/1.5 system-ui, sans-serif; }
.tales-site .tales-book .tl-article .tl-rfacts { color: #85866f; font-size: 13px; }
.tl-article .tl-idea summary { color: var(--green); min-height: 26px; }
.tl-article .tl-idea summary:hover { color: #2c5147; text-decoration: underline; text-underline-offset: 3px; }
.tales-site .tales-book .tl-article .tl-idea summary:focus-visible { outline-color: #c99a3e; }
.tl-article .tl-ideabox { margin: 6px 0 2px; border-left-color: #bdb48f; background: #ebe3cc80; }
.tales-site .tales-book .tl-article .tl-iprompt { color: #3b4946; font-size: 16px; }
.tales-site .tales-book .tl-article .tl-iprompt.tl-inone { color: var(--soft); }
.tl-article .tl-ipers dt { color: var(--soft); }
.tl-article .tl-ipers dd { color: #3b4946; }
/* Edit · Rewrite… · History: a quiet row under the title */
.tl-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 0 -10px; }
.tl-owner .tl-tool { min-height: 34px; padding: 5px 10px; border-radius: 999px; color: var(--green); font: 14px/1.2 Georgia, serif !important; }
.tl-owner .tl-tool:hover:not(:disabled) { color: #2c5147; background: #e9e1cb; }
.tl-article .tl-renamable:hover { text-decoration-color: #9fa47f; }
.tl-article .tl-rninput { background: #fffdf6; color: #2f4039; border-color: #a3a58f; padding: 2px 8px; }
.tl-article .tl-rninput:focus { outline-color: #c99a3e; }
.tl-article .tl-cstep { color: var(--green); }
/* "Continue the story?" under the stars */
.tl-aend { margin: -14px 56px 26px; }
.tl-aend:empty { display: none; }
.tl-article .tl-nudge .tl-link { color: var(--green); }
.tl-article .tl-nudgex { color: var(--soft); }
.tl-article .tl-nudgex:hover { color: #2f4039; background: #e9e1cb; }
/* a serial's parts: the story page's Previous and Next, as buttons */
.tl-pn button {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 56px 24px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.tl-pn button.tl-pnnext { text-align: right; align-items: flex-end; }
.tl-pn button:hover { background: #efe7d2; }
.tl-pn button + button, .tl-pn span + button { border-left: 1px solid #d8cba7aa; }
.tl-allmine { max-width: 760px; margin: 22px auto 0; text-align: left; }
.tl-allmine .tl-link { min-height: 36px; padding: 6px 2px; border: 0; border-radius: 4px; background: none; color: var(--green); font: 15px Georgia, serif !important; }
.tl-allmine .tl-link:hover:not(:disabled) { background: none; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
  .tl-owner { margin-top: 10px; }
  .tl-aend { margin: -14px 16px 22px; }
  .tl-pn button { padding: 16px 20px 20px; }
  .tl-allmine { margin: 18px 0 0; padding: 0 calc(16px + var(--sar)) 0 calc(16px + var(--sal)); }
}
/* ...at night */
.tales-story.tl-night .tl-article .tl-rdet, .tales-story.tl-night .tales-book .tl-article .tl-rfacts,
.tales-story.tl-night .tl-article .tl-ipers dt { color: #8a7656; }
.tales-story.tl-night .tl-article .tl-idea summary, .tales-story.tl-night .tl-owner .tl-tool, .tales-story.tl-night .tl-article .tl-cstep,
.tales-story.tl-night .tl-article .tl-nudge .tl-link, .tales-story.tl-night .tl-allmine .tl-link { color: #b39a70; }
.tales-story.tl-night .tl-owner .tl-tool:hover:not(:disabled), .tales-story.tl-night .tl-article .tl-nudgex:hover { color: #d9c193; background: #352b20; }
.tales-story.tl-night .tl-article .tl-ssum { color: #8a7656; }
.tales-story.tl-night .tl-article .tl-ideabox { border-color: #6b583c; background: #00000018; }
.tales-story.tl-night .tales-book .tl-article .tl-iprompt, .tales-story.tl-night .tl-article .tl-ipers dd { color: #c9b28a; }
.tales-story.tl-night .tl-pn button + button, .tales-story.tl-night .tl-pn span + button { border-color: #4a3e2e; }
.tales-story.tl-night .tl-pn button:hover { background: #30271d; }
.tales-story.tl-night .tl-article .tl-rninput { background: #1f1913; color: #d9c193; border-color: #5a4c39; }

/* ------- dialogs, menus and the editor on the website's paper -------
   tales.css draws Rewrite, History, Share, the sequel question, ⋯ and Aa and
   the editor in the reader's ink, for the game's overlay and the paged
   reader. On the website's light pages (a story's page, your own tale's
   long page, the write form and the shelf) they are set on the page's own
   paper instead: cream, ink-coloured Georgia, soft borders, the page's
   green and outline buttons, a warm dim behind. Only what is drawn outside
   a .tales-reader is touched, so the paged reader (and anything opened over
   it) keeps its ink, and the overlay (no .tales-site) is never reached.
   Night reading (.tales-story.tl-night, html.tl-night) swaps the palette for
   the article's own night one. */
.tales-site {
  --dp-box: #f8f3e6; --dp-line: #d8cba7; --dp-edge: #c9b88d99; --dp-head: #2f4039; --dp-text: #3b4946; --dp-soft: #6f7563;
  --dp-field: #fffdf6; --dp-fline: #b9b08f; --dp-hover: #efe7d2; --dp-pick: #e3e9d6; --dp-pickline: #3f6559;
  --dp-green: #3f6559; --dp-greenhi: #2c5147; --dp-ongreen: #fff1d3; --dp-sline: #a7b09a; --dp-stext: #4b5f4c; --dp-shover: #e9e5d2;
  --dp-warn: #9a4b23; --dp-note: #7b6431; --dp-focus: #c99a3e; --dp-dim: #4a3c1f59; --dp-shadow: 0 1px 0 #e6dcc0, 0 22px 60px #4a3c1f40;
}
.tales-site.tales-story.tl-night, html.tl-night .tales-site {
  --dp-box: #2a2219; --dp-line: #4a3e2e; --dp-edge: #5a4c39; --dp-head: #d9c193; --dp-text: #c9b28a; --dp-soft: #9d8a6c;
  --dp-field: #1f1913; --dp-fline: #5a4c39; --dp-hover: #352b20; --dp-pick: #3d3226; --dp-pickline: #a88553;
  --dp-green: #a88553; --dp-greenhi: #b8955f; --dp-ongreen: #1f1913; --dp-sline: #5a4c39; --dp-stext: #d0b98e; --dp-shover: #352b20;
  --dp-warn: #e0a370; --dp-note: #c9a66b; --dp-focus: #c9a66b; --dp-dim: #0b0805b3; --dp-shadow: 0 22px 60px #0009;
}
/* the dialog: over the whole page, on screen wherever the page is scrolled */
.tales-site .tales-book:not(.tales-reader) > .tl-modal { position: fixed; inset: 0; z-index: 50; border-radius: 0; background: var(--dp-dim); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-mbox {
  padding: 24px 26px; border-radius: 10px; background: var(--dp-box); color: var(--dp-text); border: 1px solid var(--dp-edge);
  box-shadow: var(--dp-shadow); scrollbar-width: thin; scrollbar-color: var(--dp-fline) transparent; color-scheme: light;
}
.tales-site.tales-story.tl-night .tales-book:not(.tales-reader) > .tl-modal .tl-mbox { color-scheme: dark; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-mh { margin: 0 0 14px; color: var(--dp-head); font: 500 23px/1.25 Georgia, serif; letter-spacing: -.005em; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-mtext { color: var(--dp-text); font: 16.5px/1.6 Georgia, serif; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-mnote { color: var(--dp-soft); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-eerr { color: var(--dp-warn); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal :is(textarea, .tl-shurl) { border-color: var(--dp-fline); background: var(--dp-field); color: var(--dp-head); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal textarea::placeholder { color: var(--dp-soft); opacity: .8; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal :is(textarea, .tl-shurl):focus { outline: 3px solid var(--dp-focus); outline-offset: 1px; }
/* the page's own buttons: green, and outlined */
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-primary { border-color: var(--dp-green); background: var(--dp-green); color: var(--dp-ongreen); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-primary:hover:not(:disabled) { border-color: var(--dp-greenhi); background: var(--dp-greenhi); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-primary:disabled { opacity: .7; cursor: default; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-secondary { border-color: var(--dp-sline); background: transparent; color: var(--dp-stext); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-secondary:hover { background: var(--dp-shover); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal :is(button, input, summary, .tl-hprev):focus-visible { outline: 3px solid var(--dp-focus); outline-offset: 2px; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-primary .tl-spin.small { border-color: #fff1d355; border-top-color: var(--dp-ongreen); }
/* Rewrite's three ways, and the line that offers the other one */
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-rwmode { border-color: var(--dp-line); background: transparent; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-rwmode:hover { border-color: var(--dp-fline); background: var(--dp-hover); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-rwmode:has(input:checked) { border-color: var(--dp-pickline); background: var(--dp-pick); box-shadow: inset 0 0 0 1px var(--dp-pickline); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-rwmode input { accent-color: var(--dp-green); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-rwmode b { color: var(--dp-head); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-rwmode small { color: var(--dp-soft); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-suggest { color: var(--dp-note); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-sgbtn { border-color: var(--dp-fline); background: var(--dp-field); color: var(--dp-text); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-sgbtn:hover { background: var(--dp-hover); }
/* History: the versions, and the one picked set out below like a page */
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hitem { border-color: transparent; background: var(--dp-hover); color: var(--dp-text); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hitem:hover { border-color: var(--dp-line); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hitem[aria-pressed="true"] { border-color: var(--dp-pickline); background: var(--dp-pick); box-shadow: inset 0 0 0 1px var(--dp-pickline); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hwhen { color: var(--dp-soft); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hprev { background: var(--dp-field); border: 1px solid var(--dp-line); scrollbar-color: var(--dp-fline) transparent; }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hprev p { color: var(--dp-text); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hprev .tl-htitle { color: var(--dp-head); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-hprev .tl-break { color: var(--gold); }
/* Share: what moderation said, and Stop sharing set quietly apart */
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-shmod { color: var(--dp-warn); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-shpers { color: var(--dp-soft); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-shoff { border-color: transparent; background: none; color: var(--dp-warn); }
.tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-shoff:hover:not(:disabled) { border-color: var(--dp-fline); background: var(--dp-hover); }
/* ⋯ and Aa on a long page: a small card of the same paper */
.tl-article .tl-pop { border-color: var(--dp-edge); background: var(--dp-box); box-shadow: 0 1px 0 #e6dcc044, 0 10px 28px #4a3c1f33; }
.tl-article .tl-pop button, .tl-article .tl-pop a { color: var(--dp-text); }
.tl-article .tl-pop button:hover, .tl-article .tl-pop button:focus-visible, .tl-article .tl-pop a:hover, .tl-article .tl-pop a:focus-visible { background: var(--dp-hover); color: var(--dp-head); }
.tl-article .tl-pop button:focus-visible, .tl-article .tl-pop a:focus-visible { outline: 2px solid var(--dp-focus); outline-offset: -2px; }
.tl-article .tl-pop .tl-quiet { border-color: var(--dp-line); color: var(--dp-soft); }
.tl-article .tl-aapop .tl-size[aria-pressed="true"], .tl-article .tl-aapop .tl-nightbtn[aria-checked="true"],
.tl-article .tl-sleepmenu button[aria-checked="true"] { background: var(--dp-pick); color: var(--dp-head); box-shadow: inset 0 0 0 1px var(--dp-pickline); }
.tales-story.tl-night .tl-article .tl-pop { box-shadow: 0 10px 28px #0007; }
/* the editor: the article's column and type, on the page's paper; Save and Cancel held at the foot of the screen */
.tales-site .tl-sheet.tales-edit {
  display: block; width: min(760px, 100%); height: auto; min-height: 0; max-height: none; overflow: visible;
  padding: 18px 0 0; background: var(--paper); color: var(--text); border: 1px solid #c9b88d66; border-radius: 8px;
  box-shadow: 0 1px 0 #d8cba7, 0 14px 40px #6b5a2c14;
}
.tales-site .tales-edit .tl-rtop { padding: 0 56px 6px; }
.tales-site .tales-edit .tl-back { color: #58635b; }
.tales-site .tales-edit .tl-back:hover { color: #2c3d36; }
.tales-site .tales-edit .tl-pageof { color: var(--dp-soft); font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.tales-site .tales-edit .tl-editing { display: block; overflow: visible; padding: 6px 45px 26px; }
.tales-site .tales-edit :is(.tl-etitle, .tl-eblock) { background: transparent; color: #2c3b36; }
.tales-site .tales-edit .tl-etitle { margin: 4px 0 18px; color: var(--dp-head); font: 500 34px/1.2 Georgia, serif; letter-spacing: -.012em; }
.tales-site .tales-edit .tl-eblock { margin-bottom: 6px; font: 20px/1.75 Georgia, 'Iowan Old Style', serif; font-size: calc(20px * var(--tl-scale, 1)); }
.tales-site .tales-edit :is(.tl-etitle, .tl-eblock):hover { border-color: var(--dp-line); background: #fbf7ec99; }
.tales-site .tales-edit :is(.tl-etitle, .tl-eblock):focus { border-color: var(--dp-focus); background: var(--dp-field); box-shadow: 0 0 0 1px var(--dp-focus); }
.tales-site .tales-edit .tl-eblock.tl-ehit { border-color: #c0703a; background: #f6e6d4; }
.tales-site .tales-edit .tl-ebar {
  position: sticky; bottom: 0; z-index: 2; padding: 12px 56px calc(12px + var(--sab)); border-top: 1px solid var(--dp-line);
  border-radius: 0 0 8px 8px; background: var(--paper); box-shadow: 0 -8px 18px #f4eedfcc;
}
.tales-site .tales-edit .tl-ebar .tl-eerr { color: var(--dp-warn); }
.tales-site .tales-edit .tl-primary { border-color: var(--dp-green); background: var(--dp-green); color: var(--dp-ongreen); }
.tales-site .tales-edit .tl-primary:hover:not(:disabled) { border-color: var(--dp-greenhi); background: var(--dp-greenhi); }
.tales-site .tales-edit .tl-secondary { border-color: var(--dp-sline); background: transparent; color: var(--dp-stext); }
.tales-site .tales-edit .tl-secondary:hover { background: var(--dp-shover); }
.tales-site .tales-edit button:focus-visible { outline: 3px solid var(--dp-focus); outline-offset: 3px; }
/* ...at night (js/tales.js pageNight: html.tl-night while you edit) */
html.tl-night .tales-site .tl-sheet.tales-edit { background: #2a2219; color: #c9b28a; border-color: #3d3326; box-shadow: none; }
html.tl-night .tales-site .tales-edit :is(.tl-etitle, .tl-eblock) { color: #c9b28a; }
html.tl-night .tales-site .tales-edit .tl-etitle { color: #d9c193; }
html.tl-night .tales-site .tales-edit :is(.tl-etitle, .tl-eblock):hover { background: #00000014; }
html.tl-night .tales-site .tales-edit .tl-eblock.tl-ehit { border-color: #c0703a; background: #3a2a1c; }
html.tl-night .tales-site .tales-edit .tl-back { color: #9d8a6c; }
html.tl-night .tales-site .tales-edit .tl-back:hover { color: #d9c193; }
html.tl-night .tales-site .tales-edit .tl-ebar { background: #2a2219; box-shadow: 0 -8px 18px #2a2219cc; }
@media (max-width: 640px) {
  .tales-site .tales-book:not(.tales-reader) > .tl-modal { padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); }
  .tales-site .tales-book:not(.tales-reader) > .tl-modal .tl-mbox { padding: 20px 18px; }
  .tales-site .tl-sheet.tales-edit { padding: 12px 0 0; border: 0; border-radius: 0; box-shadow: none; min-height: calc(100dvh - 52px - var(--sat)); }
  .tales-site .tales-edit .tl-rtop { padding: 0 20px 4px; }
  .tales-site .tales-edit .tl-editing { padding: 4px 9px 20px; }
  .tales-site .tales-edit .tl-etitle { font-size: 25px; }
  .tales-site .tales-edit .tl-eblock { font-size: calc(18.5px * var(--tl-scale, 1)); line-height: 1.7; }
  .tales-site .tales-edit .tl-ebar { padding: 10px calc(20px + var(--sar)) calc(10px + var(--sab)) calc(20px + var(--sal)); border-radius: 0; }
}

/* a player's tale shared by link: under the ✧, a quiet way to write one's own */
.tl-ownlink { margin: -14px 56px 30px; text-align: center; font: 15px Georgia, serif; }
.tl-ownlink a { color: var(--green); text-decoration: none; }
.tl-ownlink a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* under every tale, quieter still: Report (server/tale-moderation.js reportBox) */
.tl-report { max-width: 720px; margin: -40px auto 0; padding: 0 calc(26px + var(--sar)) calc(40px + var(--sab)) calc(26px + var(--sal)); text-align: center; font: 13px/1.5 Georgia, serif; color: var(--soft); }
.tl-report summary { display: inline-block; cursor: pointer; list-style: none; color: var(--soft); padding: 4px 8px; border-radius: 4px; }
.tl-report summary::-webkit-details-marker { display: none; }
.tl-report summary:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tl-report details[open] summary { color: var(--text); }
.tl-reportform { margin: 8px auto 0; max-width: 420px; padding: 14px 16px; text-align: left; background: var(--paper); border: 1px solid #c9b88d66; border-radius: 6px; font-size: 14px; color: var(--text); }
.tl-reportform fieldset { margin: 0 0 10px; padding: 0; border: 0; }
.tl-reportform legend { margin-bottom: 6px; font-weight: 600; }
.tl-reportform fieldset label { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.tl-reportnote { display: block; }
.tl-reportnote textarea { display: block; width: 100%; margin-top: 4px; padding: 6px 8px; font: 14px/1.4 Georgia, serif; border: 1px solid #c9b88d; border-radius: 4px; background: #fffdf7; color: inherit; resize: vertical; }
.tl-reportrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; }
.tl-reportrow button { min-height: 34px; padding: 6px 14px; font: 14px Georgia, serif; border-radius: 999px; border: 1px solid #b7a77c; background: #efe6cf; color: var(--text); cursor: pointer; }
.tl-reportrow button:disabled { opacity: .55; cursor: default; }
.tl-reportmsg { color: var(--soft); }
.tl-reportdone { margin: 0; text-align: center; }
/* the report's form in the page's own controls: its green, its focus ring */
.tl-reportform input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.tl-reportrow button { border-color: var(--green); background: var(--green); color: #fff1d3; }
.tl-reportrow button:hover:not(:disabled) { background: #2c5147; }
.tl-report :is(summary, button, input, textarea):focus-visible { outline: 3px solid #c99a3e; outline-offset: 2px; }
.tl-reportnote textarea:focus { outline: 3px solid #c99a3e; outline-offset: 1px; }
/* ...and at night, the article's night paper */
html.tl-night .tl-report, html.tl-night .tl-report summary { color: #9d8a6c; }
html.tl-night .tl-report summary:hover, html.tl-night .tl-report details[open] summary { color: #d0b98e; }
html.tl-night .tl-reportform { background: #2a2219; border-color: #4a3e2e; color: #c9b28a; color-scheme: dark; }
html.tl-night .tl-reportnote textarea { background: #1f1913; border-color: #5a4c39; }
html.tl-night .tl-reportform input[type="radio"] { accent-color: #a88553; }
html.tl-night .tl-reportrow button { border-color: #a88553; background: #a88553; color: #1f1913; }
html.tl-night .tl-reportrow button:hover:not(:disabled) { background: #b8955f; }
html.tl-night .tl-reportmsg { color: #9d8a6c; }

/* ------- collections (/tales/collections, /tales/collections/<slug>) -------
   and the rows of links to them: on the shelf under Tonight, at the foot of a
   story, and at the foot of a collection. Links on the page's paper, quieter
   than the shelf's filter chips (which are buttons, filled when pressed). */
.tl-colls { margin: 0 0 30px; }
.tl-colls .tl-sh, .tl-incoll .tl-sh { margin: 0 0 12px; color: #7b8665; font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.tl-collchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tl-collchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid #d6cba9; background: transparent; color: #3f6559 !important; font: 15px/1.2 Georgia, serif; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.tl-collchip:hover { background: #fbf7ec; border-color: #9fa47f; }
.tl-collchip[aria-current="page"] { background: #e9e1cb; border-color: #c9b88d; color: #33453f !important; }
.tl-collall { margin: 14px 0 0; font: 14.5px Georgia, serif; }
.tl-collall a { color: var(--green); text-decoration: none; }
.tl-collall a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* "Listen as a podcast": under the shelf's Collections row, and in the read-aloud collection's introduction */
.tl-podcast { margin: 8px 0 0; font: 14.5px Georgia, serif; }
.tl-podcast a { color: var(--green); text-decoration: none; }
.tl-podcast a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tl-collintro .tl-podcast { margin: 0 0 14px; font-size: 16px; }
/* a story's "In these collections", under More tales */
.tl-incoll { max-width: 760px; margin: 40px auto 0; }
.tales-story.tl-night .tl-incoll .tl-sh { color: #9d8a6c; }
.tales-story.tl-night .tl-collchip { border-color: #4a3e2e; color: #c9b28a !important; }
.tales-story.tl-night .tl-collchip:hover { background: #30271d; }
.tales-story.tl-night .tl-collall a { color: #b39a70; }
/* a collection's own page */
.tl-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 14px; padding: 0; list-style: none; color: #7f846c; font: 13px/1.4 system-ui, sans-serif; }
.tl-crumbs li + li::before { content: '›'; margin: 0 8px; color: #b3a987; }
.tl-crumbs a { color: #5b675f; text-decoration: none; }
.tl-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-collintro { max-width: 680px; margin: 0 0 30px; }
.tl-collintro p { margin: 0 0 14px; color: #3b4946; font: 17px/1.68 Georgia, 'Iowan Old Style', serif; }
.tl-collintro a { color: var(--green); text-decoration: underline; text-decoration-color: #3f655966; text-underline-offset: 3px; }
.tl-collintro a:hover { text-decoration-color: currentColor; }
.tl-collpage .tl-related { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #d8cba7aa; }
.tl-collpage > .tl-all { margin-top: 26px; }
/* the index: a card for each collection, three of its covers across the top */
.tl-collgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px 20px; margin: 4px 0 0; padding: 0; list-style: none; }
.tl-collcard a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 8px; text-decoration: none;
  background: #fbf7ec; border: 1px solid #d8cba7; box-shadow: 0 1px 0 #d8cba7; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.tl-collcard a:hover { border-color: #c4b583; box-shadow: 0 10px 26px #6b5a2c1f; transform: translateY(-2px); }
.tl-collcovers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #d8cba7; }
.tl-collcovers .tl-cover { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
.tl-collbody { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; }
.tl-colltitle { color: #33453f; font: 500 19px/1.25 Georgia, serif; }
.tl-collcount { color: #7b8665; font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.tl-collblurb { color: #5b675f; font: 15px/1.5 Georgia, serif; }
@media (max-width: 640px) {
  /* on a phone the rows scroll sideways, as the filter chips do */
  .tl-colls .tl-collchips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
  .tl-colls .tl-collchips::-webkit-scrollbar { display: none; }
  .tl-collchip { flex: none; font-size: 14.5px; }
  .tl-colls { margin-bottom: 22px; }
  .tl-incoll { margin-top: 30px; padding: 0 16px; overflow: hidden; }
  .tl-incoll .tl-collchips { margin: 0 -16px; }
  .tl-collintro p { font-size: 16.5px; }
  .tl-collgrid { grid-template-columns: 1fr; gap: 14px; }
  .tl-collcovers .tl-cover { aspect-ratio: 1 / 1; }
}

/* Print / Save as PDF: the title, its tags line and the story, set in a
   book's serif with page margins; nothing of the site around it (header,
   narration, buttons, ratings, neighbours, more tales, films; on your own
   tale, its details and tools). The cover
   drawing comes along small, above the title. Night and text size are
   the screen's, not the page's. */
@media print {
  @page { margin: 22mm 20mm 24mm; }
  html, html.tl-night body.tales-body, body.tales-body { background: #fff !important; }
  body.tales-body, .tl-article, .tl-body p { transition: none !important; }
  body.tales-body { min-height: 0; color: #1d1d1b; }
  .ts-head, .tl-abar, .tl-tools, .tl-lslot, .tl-rateslot, .tl-pn, .tl-more, .tl-host, .tl-ownlink, .tl-toast, .tl-report,
  .tl-pop, .tl-modal, audio, video, .tl-films, .tl-arate, .tl-owner, .tl-rdet, .tl-aend, .tl-allmine, .tl-colls { display: none !important; }
  .tales-site, .tales-story { max-width: none; padding: 0; margin: 0; }
  /* the paged reader may be open: the long page is what prints */
  .tales-story .tl-article[hidden] { display: block !important; }
  .tl-article, .tales-story.tl-night .tl-article { max-width: none; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
  .tl-ahead, .tales-story.tl-night .tl-ahead { display: block; padding: 0 0 6mm; border: 0; }
  .tl-acover { width: 34mm; margin: 0 0 6mm; }
  .tl-acover .tl-cover { aspect-ratio: 8 / 5; border-radius: 4px; box-shadow: none; border: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tl-ahead h1, .tales-story.tl-night .tl-ahead h1 { margin: 0 0 2mm; color: #1d1d1b; font: 500 24pt/1.15 Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
  .tl-ameta, .tl-eyebrow, .tales-story.tl-night .tl-ameta, .tales-story.tl-night .tl-eyebrow { color: #6d6a5e !important; font-size: 11pt; }
  .tl-body { padding: 0; }
  .tl-body p, .tales-story.tl-night .tl-body p {
    color: #1d1d1b; font: 12.5pt/1.6 Georgia, 'Iowan Old Style', 'Times New Roman', serif; text-align: justify; hyphens: auto;
    orphans: 3; widows: 3; transition: none;
  }
  .tl-body p:first-child::first-letter, .tales-story.tl-night .tl-body p:first-child::first-letter { color: #1d1d1b; }
  .tl-body strong, .tales-story.tl-night .tl-body strong { color: #1d1d1b; }
  .tl-body .tl-break, .tl-article .tl-fin, .tales-story.tl-night .tl-body .tl-break, .tales-story.tl-night .tl-article .tl-fin { color: #8a7d55; }
  .tl-article .tl-fin { margin: 6mm 0 0; font-size: 14pt; }
  .tales-body a { text-decoration: none; }
}

/* a story with an animated video on YouTube */
.tl-ayt { margin: 6px 0 0; font: 14.5px Georgia, serif; }
.tl-ayt a { color: var(--green); text-decoration: none; }
.tl-ayt a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tales-story.tl-night .tl-ayt a { color: #b39a70; }
@media print { .tl-ayt { display: none; } }