/* Words of the Apostle: limestone, olive-black ink, olive leaf. Gentium for Greek and headings, Atkinson Hyperlegible for reading. */
:root {
  --paper: #ecefe9;
  --paper-2: #e0e5dc;
  --card: #f7f9f5;
  --ink: #18261f;
  --ink-2: #435047;
  --olive: #52661c;
  --olive-dark: #36450f;
  --rule: #c3cabd;
  --serif: "Gentium Book Plus", "Gentium Plus", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --measure: 40rem;
  --margin: 17rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.125rem/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--olive-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 9; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; color: var(--ink); }
[lang="grc"] { font-family: var(--serif); }

/* ---------- header ---------- */
.top { border-bottom: 1px solid var(--rule); }
.top-in { max-width: 74rem; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 24px; }
.mark { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.mark-g { font-size: 1.6rem; font-style: italic; color: var(--olive); line-height: 1; }
.mark-t { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
#nav { display: flex; gap: 4px 18px; flex-wrap: wrap; }
#nav a { color: var(--ink-2); text-decoration: none; font-size: 1rem; padding: 4px 0; border-bottom: 2px solid transparent; }
#nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
#nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--olive); }
.menu { display: none; font: inherit; font-size: 1rem; background: none; border: 1px solid var(--rule); color: var(--ink); padding: 6px 14px; border-radius: 3px; cursor: pointer; }

/* ---------- shared containers ---------- */
.wide { max-width: 74rem; margin: 0 auto; padding: 0 20px; }
.page { max-width: calc(var(--measure) + var(--margin) + 3rem); margin: 0 auto; padding: 56px 20px 72px; }
.page > * { max-width: var(--measure); }
.kicker { font-family: var(--serif); font-style: italic; color: var(--olive); font-size: 1.15rem; margin: 0 0 6px; }
.title { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 14px; letter-spacing: -.01em; }
.lede { font-size: 1.3rem; color: var(--ink-2); margin: 0 0 28px; line-height: 1.5; }

/* ---------- reading: prose with margin notes ---------- */
.prose { position: relative; font-size: 1.15rem; line-height: 1.72; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.6rem; margin: 1.8em 0 .5em; }
.scripture { margin: 1.6em 0; padding: 0 0 0 22px; border-left: 3px solid var(--olive); }
.scripture p { font-family: var(--serif); font-size: 1.32rem; line-height: 1.5; margin: 0 0 .35em; }
.scripture cite { font-style: normal; font-size: .95rem; color: var(--ink-2); }
.gw { text-decoration: none; color: inherit; border-bottom: 1px dotted var(--olive); white-space: nowrap; }
.gw span { color: var(--olive); }
.gw i { font-style: italic; }
.gw:hover { border-bottom-style: solid; color: var(--olive-dark); }
.note { float: right; clear: right; width: calc(var(--margin) - 1.5rem); margin: .25em calc(-1 * var(--margin)) 1em 0; padding: 0 0 0 14px; border-left: 1px solid var(--rule); font-size: .95rem; line-height: 1.45; }
.note-g { display: block; font-size: 1.85rem; line-height: 1.15; color: var(--ink); }
.note-t { display: block; font-family: var(--serif); font-style: italic; color: var(--olive); margin: 2px 0 4px; }
.note-t .say { font-style: normal; color: var(--ink-2); font-family: var(--sans); font-size: .85rem; }
.note-m { display: block; color: var(--ink-2); }
.verse-top { margin: 0 0 34px; }
.verse-top p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.45; margin: 0 0 6px; }
.verse-top cite { font-style: normal; color: var(--ink-2); }
.remember { clear: both; margin: 44px 0 0; padding: 22px 24px; background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--olive); }
.remember h2 { font-size: 1.15rem; margin: 0 0 6px; font-style: italic; font-weight: 400; color: var(--olive); }
.remember p { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; }
.pager { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; border-top: 1px solid var(--rule); padding-top: 18px; }
.pager a { text-decoration: none; color: var(--ink); }
.pager a span { display: block; font-size: .9rem; color: var(--ink-2); }
.pager a b { font-family: var(--serif); font-size: 1.2rem; }
.pager .next { text-align: right; }

/* ---------- home ---------- */
.hero { border-bottom: 1px solid var(--rule); }
.hero-in { max-width: 74rem; margin: 0 auto; padding: 64px 20px 56px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.hero-word { font-family: var(--serif); font-size: min(9.6vw, 8.8rem); line-height: 1; margin: 0; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.hero-word .ch { display: inline-block; }
.hero-gloss { margin: 18px 0 0; font-size: 1.15rem; color: var(--ink-2); }
.hero-gloss i { font-family: var(--serif); color: var(--olive); font-size: 1.3rem; }
.hero-gloss b { color: var(--ink); font-weight: 700; }
.hero-text h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0 0 14px; }
.hero-text p { margin: 0 0 22px; font-size: 1.2rem; color: var(--ink-2); max-width: 32rem; }
.btn { display: inline-block; font: 700 1.05rem/1 var(--sans); padding: 15px 22px; background: var(--ink); color: var(--paper); text-decoration: none; border: 2px solid var(--ink); border-radius: 3px; cursor: pointer; }
.btn:hover { background: var(--olive-dark); border-color: var(--olive-dark); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

.section { padding: 64px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head h2 { font-size: 2rem; margin: 0; }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc li { border-top: 1px solid var(--rule); }
.toc li:last-child { border-bottom: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: baseline; padding: 16px 0; text-decoration: none; color: var(--ink); }
.toc .n { font-family: var(--serif); font-size: 1.6rem; color: var(--olive); }
.toc .t { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.toc .l { color: var(--ink-2); font-size: 1.02rem; }
.toc a:hover .t { text-decoration: underline; text-decoration-color: var(--olive); text-underline-offset: .2em; }

.jail { background: var(--ink); color: var(--paper); }
.jail-in { max-width: 74rem; margin: 0 auto; padding: 72px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.jail q { display: block; font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.2; quotes: "\201C" "\201D"; }
.jail .who { margin: 12px 0 0; color: #b9c4b3; font-size: 1rem; }
.jail .ans q { color: #dfe8c9; }
.jail a { color: #dfe8c9; }
.jail .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); margin-top: 22px; }
.jail .btn:hover { background: #dfe8c9; border-color: #dfe8c9; color: var(--ink); }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.wotd { background: var(--card); border: 1px solid var(--rule); padding: 28px; }
.wotd .g { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; margin: 6px 0 8px; }
.wotd .t { font-family: var(--serif); font-style: italic; color: var(--olive); font-size: 1.25rem; }
.wotd .say { color: var(--ink-2); font-size: .95rem; }
.wotd p { margin: 12px 0 0; }
.wotd .ref { color: var(--ink-2); font-size: .95rem; }
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--rule); }
.posts li:last-child { border-bottom: 0; }
.posts a { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; text-decoration: none; color: var(--ink); }
.posts a:hover { text-decoration: underline; text-decoration-color: var(--olive); }
.posts .d { display: block; font-size: .92rem; color: var(--ink-2); margin: 2px 0 6px; }
.posts p { margin: 0; color: var(--ink-2); }
.empty { color: var(--ink-2); font-style: italic; }

/* ---------- believe ---------- */
.lean { margin: 34px 0; padding: 26px 28px; background: var(--card); border: 1px solid var(--rule); }
.lean p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; margin: 0; }
.lean small { display: block; margin-top: 10px; color: var(--ink-2); font-size: .95rem; }

/* ---------- questions ---------- */
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-family: var(--sans); font-weight: 400; font-size: 1.6rem; color: var(--olive); }
.qa details[open] summary::after { content: "\2212"; }
.qa .a { padding: 0 0 16px; font-size: 1.1rem; line-height: 1.68; }
.qa .a p { margin: 0 0 .9em; }

/* ---------- greek words ---------- */
.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-top: 10px; }
.words > div { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 20px 20px 18px; scroll-margin-top: 20px; }
.words > div:target { background: var(--card); box-shadow: inset 0 0 0 2px var(--olive); }
.words .g { font-family: var(--serif); font-size: 2rem; line-height: 1.1; margin: 0; }
.words .t { font-family: var(--serif); font-style: italic; color: var(--olive); margin: 4px 0 0; font-size: 1.1rem; }
.words .say { color: var(--ink-2); font-size: .9rem; margin: 0 0 8px; }
.words .m { margin: 0 0 8px; font-size: 1rem; line-height: 1.45; }
.words .r { margin: 0; font-size: .9rem; color: var(--ink-2); }
.words .r a { color: var(--ink-2); }
.page.full > * { max-width: none; }

/* ---------- books ---------- */
.books { display: grid; gap: 44px; margin-top: 10px; }
.book { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 28px; align-items: start; }
.book img { border: 1px solid var(--rule); box-shadow: 6px 6px 0 var(--paper-2); }
.book h2 { font-size: 1.6rem; margin: 0 0 4px; }
.book .fmt { color: var(--ink-2); margin: 0 0 10px; font-size: 1rem; }
.book p { margin: 0 0 14px; }
.soon { display: inline-block; color: var(--ink-2); font-style: italic; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; max-width: 34rem; }
.form label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.form .hint, .hint { font-weight: 400; color: var(--ink-2); font-size: .92rem; }
input[type=text], input[type=email], textarea { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--card); border: 1px solid #9ea896; border-radius: 3px; padding: 11px 12px; }
textarea { min-height: 170px; resize: vertical; }
input:focus, textarea:focus { outline: 3px solid var(--olive); outline-offset: 1px; border-color: var(--olive); }
.notice { padding: 14px 16px; margin: 0 0 18px; border-radius: 3px; border: 1px solid var(--rule); background: var(--card); }
.notice.ok { border-left: 6px solid var(--olive); }
.notice.err { border-left: 6px solid #8a2f1d; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); background: var(--paper-2); }
.foot-in { max-width: 74rem; margin: 0 auto; padding: 40px 20px 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 48px; }
.foot-verse { font-family: var(--serif); font-size: 1.45rem; line-height: 1.35; margin: 0; }
.foot-verse span { display: block; font-family: var(--sans); font-size: .95rem; color: var(--ink-2); margin-top: 6px; }
.foot-sub label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 1rem; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; min-width: 0; }
.inline button { font: 700 1rem var(--sans); background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: 0 18px; cursor: pointer; }
.inline button:hover { background: var(--olive-dark); }
.foot-small { grid-column: 1 / -1; margin: 10px 0 0; font-size: .88rem; color: var(--ink-2); }
.foot-small a { color: var(--ink-2); }

/* ---------- motion: one reveal of the hero word ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-word .ch { opacity: 0; transform: translateY(.18em); animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .page { max-width: calc(var(--measure) + 3rem); }
  .note { float: none; width: auto; margin: 0 0 1.1em; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--olive); display: block; }
  .note-g { font-size: 1.5rem; }
}
@media (max-width: 860px) {
  .menu { display: inline-block; }
  .top-in { flex-wrap: wrap; }
  #nav { display: none; width: 100%; flex-direction: column; gap: 0; padding: 6px 0 4px; }
  #nav.open { display: flex; }
  #nav a { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 1.08rem; }
  #nav a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--olive); font-weight: 700; }
  .hero-in, .jail-in, .two, .foot-in { grid-template-columns: 1fr; gap: 32px; }
  .hero-in { padding: 40px 16px 40px; }
  .hero-word { font-size: 14.5vw; }
  .toc a { grid-template-columns: 3rem minmax(0, 1fr); }
  .toc .l { grid-column: 2; }
  .book { grid-template-columns: 7rem minmax(0, 1fr); gap: 18px; }
  .page, .wide, .top-in, .foot-in, .jail-in { padding-left: 16px; padding-right: 16px; }
  .page { padding-top: 36px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
}
@media print {
  .top, .foot, .pager, .skip { display: none; }
  body { background: #fff; }
  .note { float: none; width: auto; margin: 0 0 1em; }
}

/* ---------- added: offers, listen, share, devotional, group guide, steps, sample, install, language ---------- */
#nav a.lang { color: var(--olive); font-style: italic; font-family: var(--serif); }
.offers { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.offers-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 52px; padding-bottom: 52px; }
.offer h2 { font-size: 1.5rem; margin: 0 0 8px; }
.offer p { margin: 0 0 16px; color: var(--ink-2); }
.listen { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 99px; padding: 8px 18px 8px 10px; margin: 0 0 26px; cursor: pointer; }
.listen:hover { border-color: var(--olive); }
.listen-i { width: 26px; height: 26px; border-radius: 50%; background: var(--olive); position: relative; flex: none; }
.listen-i::after { content: ""; position: absolute; left: 10px; top: 7px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.listen.on .listen-i::after { left: 8px; top: 8px; width: 10px; height: 10px; border: 0; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.reading-now { background: #dfe8c9; box-shadow: 0 0 0 4px #dfe8c9; border-radius: 2px; }
.share { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.share-l { font-family: var(--serif); font-style: italic; color: var(--olive); margin-right: 4px; }
.share a, .share button { font: inherit; font-size: .98rem; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.share a:hover, .share button:hover { text-decoration-color: var(--olive); }
.group-link { margin: 18px 0 0; color: var(--ink-2); }
.devo-box { clear: both; background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--olive); padding: 12px 16px; margin: 0 0 12px; }
.devo-lab { display: block; font-family: var(--serif); font-style: italic; color: var(--olive); margin-bottom: 2px; }
.steps { list-style: none; margin: 10px 0 0; padding: 0; }
.steps > li { padding: 26px 0 8px; border-top: 1px solid var(--rule); }
.steps h2 { font-size: 1.6rem; margin: 0 0 10px; }
.steps h2 span { display: block; font-style: italic; font-weight: 400; color: var(--olive); font-size: 1.05rem; margin-bottom: 2px; }
.steps .do { background: var(--card); border: 1px solid var(--rule); padding: 10px 14px; }
.sample { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 36px; align-items: start; }
.sample img { border: 1px solid var(--rule); box-shadow: 6px 6px 0 var(--paper-2); }
.page.group > * { max-width: 46rem; }
.session { padding: 28px 0; border-top: 2px solid var(--ink); break-inside: avoid-page; }
.session h2 { font-size: 2rem; margin: 0 0 6px; }
.session h3 { font-size: 1.1rem; margin: 18px 0 4px; font-style: italic; font-weight: 400; color: var(--olive); }
.session p, .session li { font-size: 1.05rem; }
.session .sv { font-family: var(--serif); font-size: 1.2rem; }
.session .sv span { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); }
.leader-tip { margin-top: 18px; font-size: .95rem !important; color: var(--ink-2); font-style: italic; }
.pick { margin: 10px 0 20px; } .pick select { font: inherit; padding: 8px 10px; border: 1px solid #9ea896; border-radius: 3px; background: var(--card); color: var(--ink); max-width: 100%; }
.foot-links { grid-column: 1 / -1; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .98rem; }
.foot-links a { color: var(--ink); }
.install { font: inherit; font-size: .98rem; background: none; border: 0; padding: 0; color: var(--olive); text-decoration: underline; cursor: pointer; }
.install-ios { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .offers-in { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 40px; }
  .sample { grid-template-columns: 1fr; } .sample img { max-width: 12rem; }
}
@media print {
  body.print-friendly .noprint, body.print-friendly .top, body.print-friendly .foot { display: none !important; }
  .session { border-top: 1.5pt solid #000; padding: 0 0 16pt; break-after: page; }
  .listen, .share { display: none; }
}

/* ---------- added: verse of the day, search, answers, quiz, podcast, progress, prayer ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vod { border-bottom: 1px solid var(--rule); }
.vod-in { padding-top: 40px; padding-bottom: 40px; text-align: center; }
.vod blockquote { margin: 6px auto 8px; max-width: 46rem; }
.vod blockquote p { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.4; margin: 0 0 8px; }
.vod cite { font-style: normal; color: var(--ink-2); }
.vod-more { margin: 0; font-size: 1rem; }
.search { display: flex; gap: 8px; margin: 0 0 26px; max-width: 34rem; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 12px 14px; border: 1px solid #9ea896; border-radius: 3px; background: var(--card); color: var(--ink); }
.search button { font: 700 1rem var(--sans); padding: 0 18px; background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; cursor: pointer; }
.search button:hover { background: var(--olive-dark); }
.search-count { color: var(--ink-2); }
.results { list-style: none; padding: 0; margin: 0; }
.results li { border-top: 1px solid var(--rule); padding: 16px 0; }
.results .rt { display: block; font-family: var(--serif); font-style: italic; color: var(--olive); font-size: .95rem; }
.results a { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; text-decoration: none; color: var(--ink); }
.results a:hover { text-decoration: underline; }
.results p { margin: 4px 0 0; color: var(--ink-2); font-size: 1rem; }
.ask { border-bottom: 1px solid var(--rule); }
.ask-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 48px; align-items: center; padding-top: 44px; padding-bottom: 44px; }
.ask h2 { margin: 0 0 6px; font-size: 1.7rem; }
.ask p { margin: 0; color: var(--ink-2); }
.ask .search { margin: 0 0 10px; max-width: none; }
.ask-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 1rem; }
.ans-group { font-size: 1.5rem; margin: 40px 0 8px; }
.ans-list { list-style: none; padding: 0; margin: 0; }
.ans-list li { border-top: 1px solid var(--rule); }
.ans-list a { display: block; padding: 14px 0; text-decoration: none; color: var(--ink); }
.ans-list b { display: block; font-family: var(--serif); font-size: 1.25rem; }
.ans-list span { color: var(--ink-2); font-size: 1rem; }
.ans-list a:hover b { text-decoration: underline; text-decoration-color: var(--olive); }
.short-answer { font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; background: var(--card); border-left: 6px solid var(--olive); padding: 16px 20px; margin: 0 0 30px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0 0 26px; }
.tools .listen { margin: 0; }
.tools audio.ep { width: min(100%, 22rem); height: 40px; }
.tool-link { font-size: 1rem; font-weight: 700; }
.mark-read { margin: 26px 0 0; }
.readbtn { font: 700 1rem var(--sans); background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 99px; padding: 8px 18px; cursor: pointer; }
.readbtn.done { background: var(--olive); border-color: var(--olive); color: #fff; }
.readbtn.done::before { content: "\2713  "; }
.progress { font-family: var(--serif); font-style: italic; color: var(--olive); margin: 0 0 12px; font-size: 1.1rem; }
.toc li.read .n::after { content: "\2713"; font-family: var(--sans); font-style: normal; font-size: 1rem; margin-left: 6px; color: var(--olive); }
.toc li.read .t { color: var(--ink-2); }
fieldset.series { border: 1px solid var(--rule); border-radius: 3px; padding: 12px 16px 6px; margin: 0; }
fieldset.series legend { font-weight: 700; padding: 0 6px; }
fieldset.series .check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 1rem; }
fieldset.series input { margin-top: 5px; }
/* quiz */
.quiz-tabs { display: flex; gap: 8px; margin: 0 0 22px; }
.quiz-tabs button { font: 700 1rem var(--sans); background: none; border: 1px solid var(--rule); color: var(--ink-2); padding: 9px 18px; border-radius: 99px; cursor: pointer; }
.quiz-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qz { max-width: 34rem; }
.card { display: block; width: 100%; min-height: 15rem; position: relative; perspective: 1200px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.card .face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 24px; background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--olive); border-radius: 4px; backface-visibility: hidden; transition: transform .45s ease; text-align: center; }
.card .back { transform: rotateY(180deg); }
.card.flip .front { transform: rotateY(-180deg); }
.card.flip .back { transform: rotateY(0); }
.card .g, .qz .g { font-family: var(--serif); font-size: 3rem; line-height: 1.1; margin: 0; }
.card .t, .qz .t { font-family: var(--serif); font-style: italic; color: var(--olive); font-size: 1.3rem; margin: 0; }
.card .say { color: var(--ink-2); font-size: 1rem; }
.card .m { font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; }
.qz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; }
.btn.small { font-size: .95rem; padding: 10px 16px; }
.linkish { background: none; border: 0; color: var(--olive); font: inherit; text-decoration: underline; cursor: pointer; }
.qz-q { font-weight: 700; margin: 0 0 6px; }
#quiz .g { margin-top: 4px; }
.choices { display: grid; gap: 10px; margin: 18px 0 6px; }
.choice { text-align: left; font: inherit; font-size: 1.02rem; padding: 12px 16px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; }
.choice:hover { border-color: var(--olive); }
.choice.right { border: 2px solid var(--olive); background: #e3ead2; }
.choice.wrong { border: 2px solid #9b3b2b; background: #f3e1dc; }
.qz-fb { min-height: 1.6em; font-family: var(--serif); font-size: 1.15rem; }
.score { color: var(--ink-2); }
/* podcast */
.pod-sub { background: var(--card); border: 1px solid var(--rule); padding: 16px 20px; margin: 0 0 30px; }
.pod-sub p { margin: 0 0 10px; font-size: 1rem; }
.pod-sub .feed { display: flex; gap: 8px; margin: 0; }
.pod-sub input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: 9px 10px; border: 1px solid #9ea896; border-radius: 3px; background: #fff; color: var(--ink); }
.episodes { list-style: none; padding: 0; margin: 0; }
.episodes li { border-top: 1px solid var(--rule); padding: 20px 0; }
.episodes h2 { margin: 0 0 4px; font-size: 1.45rem; }
.episodes h2 a { color: var(--ink); text-decoration: none; }
.episodes p { margin: 0 0 10px; color: var(--ink-2); }
.episodes audio { width: 100%; height: 40px; }
@media (max-width: 860px) { .ask-in { grid-template-columns: 1fr; } }
@media print { .tools, .mark-read, .group-link, .readbtn { display: none !important; } }
/* ---------- added: season banner, launch, stories ---------- */
.season { display: block; background: var(--olive-dark); color: #fff; text-decoration: none; text-align: center; padding: 12px 20px; font-size: 1rem; line-height: 1.4; }
.season:hover { background: var(--ink); color: #fff; }
.season-k { font-family: var(--serif); font-style: italic; opacity: .85; margin-right: 6px; }
.season b { font-family: var(--serif); font-size: 1.15rem; }
.season-l { display: block; opacity: .85; font-size: .95rem; }
.page label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; margin: 4px 0 14px; }
.page label.check input { margin-top: 5px; }
.launch-in { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 34px; align-items: start; max-width: none; }
.launch-in img { box-shadow: 0 10px 28px rgba(24, 38, 31, .22); }
.launch-in .lede { margin-bottom: 14px; }
.stories { display: grid; gap: 22px; margin: 10px 0 20px; }
.story { margin: 0; background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--olive); padding: 18px 22px; }
.story blockquote { margin: 0; }
.story p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; margin: 0 0 10px; }
.story figcaption { color: var(--olive); font-style: italic; font-family: var(--serif); }
@media (max-width: 700px) { .launch-in { grid-template-columns: 1fr; } .launch-in img { max-width: 11rem; } }