/* Self-hosted fonts (SIL Open Font License 1.1), served from /assets/fonts.
   Latin subset covers English, Spanish and French. Shared themes add their own
   faces in themes/<id>/skin.css. See the Fonts section in DEPENDENCIES.md. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/alegreya-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/alegreya-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/alegreya-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/alegreya-latin-800-normal.woff2") format("woff2"); }

/* Site chrome: warm paper and lamplight. Follows the system light or dark setting. */
:root {
  --paper: #faf6ef; --paper2: #f3ece0; --ink: #22201c; --ink-muted: #5d564c; --lamp: #8a5410; --lamp-soft: #e9b25a;
  --card: #ffffff; --rule: #e3d9c8; --focus: #1d4fa3; --on-lamp: #ffffff;
  --f-display: "Playfair Display", Georgia, serif; --f-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --f-serif: "Alegreya", Georgia, serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #15130f; --paper2: #1d1a15; --ink: #f3ede3; --ink-muted: #c6bcad; --lamp: #f0bd6a; --lamp-soft: #f0bd6a;
    --card: #211d18; --rule: #3a342b; --focus: #9cc0ff; --on-lamp: #15130f; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--f-text); }
img, svg { max-width: 100%; }
a { color: var(--lamp); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.45rem; }
p:where(:not(.stage *)) { margin: 0 0 1em; }
.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2.5rem); }
.muted { color: var(--ink-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--card); color: var(--ink); padding: .6rem 1rem; border-radius: 8px; border: 2px solid var(--focus); }
.skip:focus { top: 1rem; }
main:focus { outline: none; }

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.hdr { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: .9rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font: 600 1.5rem/1 var(--f-display); }
.logo { width: 2.4rem; height: 2.4rem; }
.logo path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logo .lg-flame { fill: var(--lamp-soft); stroke: var(--lamp); }
.logo .lg-body, .logo .lg-line { stroke: var(--ink); }
.main-nav { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; }
.main-nav a { color: var(--ink); text-decoration: none; padding: .35rem .1rem; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--lamp); }
/* Language menu: a globe button that opens the three languages. */
.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .3rem .75rem .3rem .65rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); cursor: pointer; font-size: .95rem; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--lamp); }
.lang-menu summary:focus-visible, .lang-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lang-menu summary .ico:last-child { width: 1rem; height: 1rem; transition: transform .15s ease; }
.lang-menu[open] summary .ico:last-child { transform: rotate(180deg); }
.lang-code { display: none; font-weight: 600; letter-spacing: .04em; }
.langs { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; display: grid; gap: .2rem; min-width: 12rem; padding: .4rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .45); }
.lang-link { display: flex; align-items: center; min-height: 2.75rem; padding: .45rem .9rem; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 1rem; }
.lang-link:hover { background: color-mix(in srgb, var(--lamp) 12%, transparent); }
.lang-link[aria-current="true"] { background: var(--lamp); color: var(--on-lamp); }
@media (max-width: 600px) {
  .hdr { row-gap: .5rem; }
  .lang-menu { order: 1; margin-left: auto; }
  .main-nav { order: 2; width: 100%; margin-left: 0; }
  .lang-cur { display: none; }
  .lang-code { display: inline; }
  .langs { min-width: min(16rem, calc(100vw - 2rem)); }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--lamp); background: transparent; color: var(--ink); font: 500 1rem/1.2 var(--f-text); text-decoration: none; cursor: pointer; }
.btn:hover { background: color-mix(in srgb, var(--lamp) 12%, transparent); }
.btn-primary { background: var(--lamp); color: var(--on-lamp); }
.btn-primary:hover { background: color-mix(in srgb, var(--lamp) 85%, var(--ink)); }
.btn-quiet { border-color: var(--rule); }
.btn-small { min-height: 2.25rem; padding: .3rem .8rem; font-size: .95rem; }
.btn-big { min-height: 3.25rem; font-size: 1.15rem; padding-inline: 1.6rem; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.hero { background: linear-gradient(180deg, var(--paper2), var(--paper)); border-bottom: 1px solid var(--rule); }
.hero-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; padding: 4rem 0; }
.eyebrow, .lc-kicker { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--lamp); margin-bottom: .6rem; }
.hero-title { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.hero-lead { font-size: 1.25rem; color: var(--ink-muted); max-width: 34rem; }
.lesson-card { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: 2rem 2rem 1.75rem; box-shadow: 0 20px 50px -30px rgba(40, 25, 0, .45); position: relative; overflow: hidden; }
.lesson-card::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lamp-soft) 26%, transparent), transparent); pointer-events: none; }
.lc-dates { color: var(--ink-muted); margin-bottom: .4rem; }
.lc-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .35rem; }
.lc-block { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; }
.lc-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; position: relative; }
.how { padding: 3.5rem 0 4rem; }
.steps { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.5rem; }
.step-n { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--lamp); color: var(--lamp); font: 600 1.3rem/1 var(--f-display); margin-bottom: .8rem; }
.free { color: var(--ink-muted); }

.site-footer { border-top: 1px solid var(--rule); background: var(--paper2); margin-top: 3rem; }
.ftr { padding: 1.75rem 0 2.25rem; font-size: .95rem; color: var(--ink-muted); }
.ftr .notice { max-width: 60rem; }

.about { padding: 3rem 0; }
.about-sec { margin-top: 2.25rem; }
.nf { padding: 5rem 0; }

/* Lesson page */
.lesson-head { padding: 2.5rem 0 1rem; }
.lesson-title { margin-bottom: .2rem; }
.sel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 2.5rem; align-items: start; padding: 1rem 0 2rem; }
.sel-h { margin-top: .5rem; }
.side-in { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.preview-wrap { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: .75rem; }
.preview { position: relative; overflow: hidden; border-radius: 10px; }
.preview .mini { width: 100%; height: 100%; border-radius: 10px; }
.preview-label { margin: .6rem .25rem 0; font-size: .95rem; color: var(--ink-muted); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.actions .btn-big { grid-column: 1 / -1; }
.status { min-height: 1.6em; margin: 0; color: var(--ink); font-weight: 500; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg legend { width: 100%; }
.seg-opt, .swatch-opt { position: relative; }
.seg-opt input, .swatch-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span { display: inline-block; padding: .45rem 1rem; border: 1.5px solid var(--rule); border-radius: 999px; cursor: pointer; }
.seg-opt input:checked + span { background: var(--lamp); color: var(--on-lamp); border-color: var(--lamp); }
.seg-opt input:focus-visible + span, .swatch-opt input:focus-visible + .swatch { outline: 3px solid var(--focus); outline-offset: 2px; }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.swatch-opt { display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem; border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; font-size: .95rem; }
.swatch-opt:has(input:checked) { border-color: var(--lamp); box-shadow: inset 0 0 0 1px var(--lamp); }
.swatch { display: inline-flex; border-radius: 8px; overflow: hidden; flex: none; border: 1px solid var(--rule); }
.sw { display: block; width: .95rem; height: 1.9rem; }
.tree-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.count { margin: 0 0 0 auto; color: var(--ink-muted); }
.hint { font-size: .95rem; }
.tree, .slides { list-style: none; margin: 0; padding: 0; }
.grp { border: 1px solid var(--rule); border-radius: 16px; background: var(--card); margin-bottom: .9rem; overflow: hidden; }
.grp-row { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: color-mix(in srgb, var(--lamp) 7%, transparent); }
.grp-label { font: 600 1.15rem/1.25 var(--f-display); flex: 1; cursor: pointer; }
.slides { padding: .4rem .6rem .6rem; }
.slide-row { display: flex; align-items: center; gap: .75rem; padding: .45rem .4rem; border-radius: 12px; }
.slide-row.focus { background: color-mix(in srgb, var(--lamp) 9%, transparent); }
.slide-row.off .mini { opacity: .45; filter: grayscale(.6); }
.slide-label { flex: 1; cursor: pointer; font-size: 1rem; line-height: 1.35; }
input[type="checkbox"] { width: 1.3rem; height: 1.3rem; accent-color: var(--lamp); flex: none; cursor: pointer; }
.thumb { padding: 0; border: 1px solid var(--rule); border-radius: 9px; background: none; cursor: pointer; flex: none; line-height: 0; }
.moves { display: inline-flex; gap: .25rem; flex: none; }
.ibtn { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; }
.ibtn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ibtn[disabled] { opacity: .35; cursor: default; }
.sources { padding: 2rem 0 1rem; border-top: 1px solid var(--rule); margin-top: 1rem; }
.src-list { padding-left: 1.2rem; }
.src-list li { margin-bottom: .35rem; }

.mini { width: 192px; height: 108px; overflow: hidden; position: relative; border-radius: 8px; }
.mini .stage { transform: scale(.1); transform-origin: 0 0; pointer-events: none; }
.export-host { position: fixed; left: -40000px; top: 0; width: 1920px; height: 1080px; pointer-events: none; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0; }
  .steps { grid-template-columns: 1fr; }
  .sel-grid { grid-template-columns: minmax(0, 1fr); }
  .sel-grid > * { min-width: 0; }
  .side-in { position: static; }
  .sel-side { order: -1; }
}
@media (max-width: 520px) {
  .hdr { gap: .7rem; }
  .main-nav { margin-left: 0; width: 100%; order: 3; gap: .9rem; }
  .langs { margin-left: auto; }
  .mini { width: 128px; height: 72px; }
  .mini .stage { transform: scale(.0666667); }
  .actions { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: 1fr; }
  .slide-row { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Slide preview button in the slide list. */
.ibtn.pv-btn { width: auto; min-width: 2.75rem; height: 2.75rem; padding: 0 .8rem; border-radius: 999px; display: inline-flex; gap: .4rem; font: 500 .95rem/1 var(--f-text); flex: none; }
.ibtn.pv-btn svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.9; }
@media (max-width: 600px) { .pv-tx { display: none; } .ibtn.pv-btn { padding: 0; } }

/* Modal dialogs: slide preview and picture lightbox. */
.dlg { width: min(1100px, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--rule); border-radius: 18px;
  background: var(--card); color: var(--ink); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.dlg::backdrop { background: rgba(10, 8, 5, .72); }
.dlg-in { display: flex; flex-direction: column; gap: .6rem; padding: .7rem 1rem 1rem; max-height: calc(100dvh - 1.5rem); box-sizing: border-box; }
.dlg-head { display: flex; align-items: center; gap: .75rem; }
.dlg-title { flex: 1; margin: 0; font: 600 1.15rem/1.3 var(--f-display); min-width: 0; }
.dlg-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 1px solid var(--rule); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.dlg-btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dlg-btn[disabled] { opacity: .35; cursor: default; }
.dlg-btn:not([disabled]):hover { border-color: var(--lamp); }
.dlg-close { border-color: transparent; }
.dlg-body { min-height: 0; display: flex; justify-content: center; }
.dlg-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.dlg-count { margin: 0; min-width: 9rem; text-align: center; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dlg-foot { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.dlg-foot:empty { display: none; }
.dlg-stage { position: relative; width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid var(--rule); }
.dlg-slide .dlg-in { width: min(100%, calc((100dvh - 12rem) * 16 / 9)); margin: 0 auto; }
.dlg-stage .stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.dlg-fig { margin: 0; display: grid; gap: .6rem; justify-items: center; min-height: 0; }
.dlg-fig img, .dlg-art svg { display: block; max-width: 100%; max-height: calc(100dvh - 17rem); width: auto; height: auto; border-radius: 10px; }
.dlg-fig figcaption { max-width: 60rem; text-align: center; }

/* Images gallery. */
.gallery { padding: 2rem 0 1rem; border-top: 1px solid var(--rule); margin-top: 1rem; scroll-margin-top: 1rem; }
.gal-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.gal-head h2 { margin: 0; }
.gal-status:empty { display: none; }
.gal-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.gal-item { display: flex; flex-direction: column; gap: .55rem; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: .7rem; }
.gal-item figure { margin: 0; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.gal-open { display: block; border-radius: 10px; overflow: hidden; line-height: 0; aspect-ratio: 4 / 3; background: var(--paper2); }
.gal-open img, .gal-art svg { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gal-open:hover img { transform: scale(1.03); }
.gal-cap { margin: 0; font: 600 1rem/1.3 var(--f-display); }
.gal-ref { margin: 0; color: var(--lamp); font-size: .9rem; font-style: italic; }
.gal-alt { margin: 0; color: var(--ink-muted); font-size: .9rem; line-height: 1.45; }
.gal-dl { align-self: flex-start; }
.btn-small { min-height: 2.75rem; }
@media (max-width: 600px) {
  .dlg { width: calc(100vw - .75rem); max-height: calc(100dvh - .75rem); border-radius: 14px; }
  .dlg-in { padding: .5rem .6rem .8rem; max-height: calc(100dvh - .75rem); }
}

/* The 1920x1080 stage: one design system shared by every theme.
   All sizes are stage pixels on an 8 px grid with 120 px side margins.
   Colors come from the eight palette roles (--bg, --bg2, --surface, --text,
   --muted, --accent, --accent2, --line). Type and shape come from the theme's
   "system" tokens, which LL.theme.apply sets on the stage's host:
     --t-display --w-display --tt-display --ls-display --lh-display
     --t-text --t-scripture --ls-label --radius
     --rule-h (rule weight)
     data-heading (text | accent | accent2), data-rulec (accent | accent2 | line),
     data-marker (round | square), data-cardtop (accent | accent2 | line),
     data-head (rule | bar), data-num (plain | badge), data-feature (frame | bar),
     data-title (text | accent)
   Each palette sets its own tokens, so palettes differ in shape and type,
   not only in color. Feature slides (title, closing) swap in the dark roles
   and draw a frame or a bar.
   Content slides carry a foot rule. Text in .fit boxes scales by --k. */
.stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; color: var(--text);
  --f-display-x: var(--t-display, "Playfair Display"), Georgia, serif;
  --f-text-x: var(--t-text, "Source Sans 3"), "Segoe UI", Calibri, sans-serif;
  --f-scripture-x: var(--t-scripture, "Alegreya"), Georgia, serif;
  font-family: var(--f-text-x); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
  font-variant-numeric: lining-nums; }
:where(.stage) :where(p, h1, h2, ol, ul, li, blockquote, figure) { margin: 0; padding: 0; }
.sc { position: absolute; inset: 0; visibility: hidden; opacity: 0;
  --c-heading: var(--text); --c-rule: var(--accent); --r-mark: 50%; --c-card: var(--accent); --c-title: var(--text); }
[data-heading="accent"] .sc { --c-heading: var(--accent); }
[data-heading="accent2"] .sc { --c-heading: var(--accent2); }
[data-rulec="line"] .sc { --c-rule: var(--line); }
[data-rulec="accent2"] .sc { --c-rule: var(--accent2); }
[data-cardtop="accent2"] .sc { --c-card: var(--accent2); }
[data-cardtop="line"] .sc { --c-card: var(--line); }
[data-title="accent"] .sc { --c-title: var(--accent); }
[data-marker="square"] .sc { --r-mark: var(--radius, 4px); }
.sc.on, .sc.leaving { visibility: visible; opacity: 1; }
.sc-title, .sc-closing {
  --bg: var(--inv-bg); --bg2: var(--inv-bg2); --surface: var(--inv-surface); --text: var(--inv-text);
  --muted: var(--inv-muted); --accent: var(--inv-accent); --accent2: var(--inv-accent2); --line: var(--inv-line); }
.sc-bg { position: absolute; inset: 0; background: var(--bg); }

/* frame (feature slides) and foot rule (content slides) */
.deco { position: absolute; inset: 0; pointer-events: none; }
.deco i { position: absolute; display: none; background: var(--c-rule); }
.deco .foot { display: block; left: 120px; right: 120px; top: 1010px; height: 4px; }
.sc-title .deco .foot, .sc-closing .deco .foot { display: none; }
.sc-title .deco .fr, .sc-closing .deco .fr { display: block; opacity: .75; }
.fr-t { left: 60px; right: 60px; top: 60px; height: 2px; }
.fr-b { left: 60px; right: 60px; bottom: 60px; height: 2px; }
.fr-l { left: 60px; top: 60px; bottom: 60px; width: 2px; }
.fr-r { right: 60px; top: 60px; bottom: 60px; width: 2px; }
.sc-title .deco .fr, .sc-closing .deco .fr { opacity: 1; }
.fr-t, .fr-b { height: 3px; } .fr-l, .fr-r { width: 3px; }
/* feature "bar": one heavy bar down the left edge instead of the frame */
[data-feature="bar"] .sc-title .deco .fr, [data-feature="bar"] .sc-closing .deco .fr { display: none; }
[data-feature="bar"] .sc-title .deco .fr-l, [data-feature="bar"] .sc-closing .deco .fr-l { display: block; left: 0; top: 0; bottom: 0; width: 36px; }
.sc-title.has-image .fr-t, .sc-title.has-image .fr-b, .sc-closing.has-image .fr-t, .sc-closing.has-image .fr-b { right: 920px; }
.sc-title.has-image .fr-r, .sc-closing.has-image .fr-r { right: 920px; }

/* line art (optional; lessons may ship none) */
.art { position: absolute; pointer-events: none; }
.art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.art [class^="k"] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .k1 { stroke: var(--accent); stroke-width: 5; }
.art .k2 { stroke: var(--accent2); stroke-width: 5; }
.art .k3 { stroke: var(--line); stroke-width: 3; }
.art .f1 { fill: var(--accent); }
.art .f2 { fill: var(--accent2); }
.art-corner { right: 120px; top: 80px; width: 236px; height: 236px; }
.art-side { right: 140px; top: 300px; width: 440px; height: 440px; }
.art-top { left: 50%; top: 70px; width: 160px; height: 160px; margin-left: -80px; }

/* type: display */
.heading, .title, .word { font-family: var(--f-display-x); font-weight: var(--w-display, 700);
  text-transform: var(--tt-display, none); letter-spacing: var(--ls-display, 0); }
.heading { font-size: max(26px, calc(66px * var(--k, 1))); line-height: var(--lh-display, 1.1); color: var(--c-heading); text-wrap: balance; }
/* head "bar": a thick bar beside each content heading replaces the rule below it */
[data-head="bar"] .sc:not(.sc-title):not(.sc-closing) .heading { border-left: var(--rule-h, 12px) solid var(--c-rule); padding-left: 32px; }
[data-head="bar"] .sc:not(.sc-title):not(.sc-closing) .rule { visibility: hidden; }
/* type: labels (always the text face, bold, spaced capitals) */
.kicker, .label, .ref, .ex-label, .ex-ref, .ctitle, .by, .pill, .vn, .bnum, .num, .dates {
  font-family: var(--f-text-x); font-weight: 700; font-style: normal; }
.kicker, .label, .ex-label, .ctitle, .pill { text-transform: uppercase; letter-spacing: var(--ls-label, .14em); }
.kicker { font-size: 30px; line-height: 1.25; color: var(--accent); text-wrap: balance; }
.label { font-size: 28px; line-height: 1.2; color: var(--accent2); margin-bottom: 18px; }
.ref { font-size: 30px; line-height: 1.2; letter-spacing: .04em; color: var(--accent); }
/* type: reading text and scripture */
.qs li, .plist li, .ov-text, .idea, .ptext, .qtext, .itext, .rtext, .pause, .dates { font-family: var(--f-text-x); font-weight: 400; }
.verse, .ex-text, .block, .cverse, .rverse, .quote { font-family: var(--f-scripture-x); font-weight: 400; }

/* Headings placed on the grid sit on their rule: the box has a fixed height
   and the heading is anchored to its foot, so one-line and two-line headings
   keep the same gap above the rule. */
.hbox-anchor, .sc-ponder .hbox, .sc-kids .hbox, .hbox-wide, .hbox-tl { display: flex; flex-direction: column; justify-content: safe flex-end; }

/* rules and cards */
.rule { height: var(--rule-h, 8px); width: 160px; background: var(--c-rule); border-radius: 0; }
.card { position: relative; background: var(--surface); border: 0; border-top: 6px solid var(--c-card); border-radius: var(--radius, 4px); }
.fit { overflow: hidden; min-height: 0; }

/* verses */
.verse-card { display: flex; flex-direction: column; padding: 34px 48px 34px 60px; border-top-width: 0; }
.verse-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c-rule); border-radius: var(--radius, 4px) 0 0 var(--radius, 4px); }
.verse-card .ref { margin-bottom: 16px; flex: none; }
.vbox { flex: 1 1 0; }
.verse { font-size: max(26px, calc(44px * var(--k, 1))); line-height: 1.4; color: var(--text); margin-bottom: calc(14px * var(--k, 1)); text-wrap: pretty; }
.vn { font-size: 26px; line-height: 1; color: var(--accent2); margin-right: 6px; position: relative; top: -.32em; }

/* question and idea cards */
.q-card, .idea-card, .list-card { display: flex; flex-direction: column; padding: 30px 44px 28px; }
.qs, .plist, .ibox { flex: 1 1 0; list-style: none; }
.qs { counter-reset: q; }
/* Discuss and Talk lists: one size range on every slide (30 to 34 px) */
.qs li { counter-increment: q; position: relative; padding-left: 58px; font-size: max(30px, calc(34px * var(--k, 1))); line-height: 1.28; color: var(--text); margin-bottom: calc(18px * var(--k, 1)); text-wrap: pretty; }
.qs li::before { content: counter(q); position: absolute; left: 0; top: 0; width: 40px; font: 700 1em/1.28 var(--f-text-x); color: var(--accent); }
[data-num="badge"] .qs li::before { top: .14em; width: 1.3em; height: 1.3em; font-size: .78em; line-height: 1.3em; text-align: center; color: var(--bg); background: var(--accent); border-radius: var(--r-mark); }
/* card numerals (overview, ponder) */
.mark { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-mark); }
.mark .num { font: var(--w-display, 700) 44px/1 var(--f-display-x); color: var(--accent); }
[data-num="badge"] .mark { background: var(--accent); }
[data-num="badge"] .mark .num { color: var(--bg); font-size: 34px; font-family: var(--f-text-x); font-weight: 700; }
.plist li { position: relative; padding-left: 34px; font-size: max(26px, calc(34px * var(--k, 1))); line-height: 1.3; color: var(--text); margin-bottom: calc(10px * var(--k, 1)); }
.plist li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 12px; height: 12px; border-radius: var(--r-mark); background: var(--accent); }
.idea-card { border-top-color: var(--c-rule); }
.idea { font-size: max(26px, calc(36px * var(--k, 1))); line-height: 1.34; color: var(--text); text-wrap: pretty; }

/* title (feature slide) */
.sc-title .title-wrap { position: absolute; left: 180px; right: 180px; top: 0; bottom: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sc-title .dates { font-size: 32px; line-height: 1.3; color: var(--muted); margin-top: 12px; }
.sc-title .title { font-size: 112px; line-height: var(--lh-display, 1.08); color: var(--c-title); margin-top: 36px; text-wrap: balance; max-width: 1500px; }
.sc-title .rule { margin: 40px 0 36px; width: 200px; }
.sc-title .block { font-size: 44px; line-height: 1.3; font-style: italic; color: var(--text); text-wrap: balance; }
.block .nw { white-space: nowrap; }
.sc-title .pill { order: -1; margin-bottom: 30px; padding: 10px 30px; border: 2px solid var(--c-rule); border-radius: var(--radius, 4px); color: var(--text); font-size: 28px; line-height: 1.2; }

/* overview */
.sc-overview .kicker { position: absolute; left: 120px; top: 100px; width: 1200px; }
.sc-overview .heading { position: absolute; left: 120px; top: 148px; font-size: 84px; }
.sc-overview .rule { position: absolute; left: 120px; top: 274px; }
.ov-grid { position: absolute; left: 120px; right: 120px; top: 340px; bottom: 110px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 28px; }
.ov-grid.n-2, .ov-grid.n-4 { grid-template-columns: repeat(2, 1fr); }
.ov-card { display: flex; flex-direction: column; gap: 22px; padding: 30px 36px 26px; min-height: 0; }
.ov-box { flex: 1 1 0; }
.ov-text { font-family: var(--f-text-x); font-size: max(26px, calc(38px * var(--k, 1))); line-height: 1.26; color: var(--text); text-wrap: balance; }

/* passage */
.sc-passage .col-l { width: 860px; }
.sc-passage .hbox { flex: none; max-height: 290px; }
.sc-passage .col-l .rule { flex: none; margin: 16px 0 30px; }
.sc-passage .verse-card { flex: 1 1 0; min-height: 0; }
.sc-passage .col-r { position: absolute; left: 1040px; right: 120px; top: 332px; bottom: 110px; display: flex; flex-direction: column; gap: 28px; }
.sc-passage .q-card { flex: 1.45 1 0; min-height: 0; }
.sc-passage .q-card.q-short { flex: 1 1 0; }
.sc-passage .idea-card, .sc-passage .list-card { flex: 1 1 0; min-height: 0; }
.sc-passage .list-card { flex: 1.25 1 0; }
.sc-passage.has-list .col-r { top: 92px; }

/* ponder */
.sc-ponder .hbox { position: absolute; left: 120px; top: 92px; width: 1400px; height: 210px; }
.sc-ponder .rule { position: absolute; left: 120px; top: 318px; }
.sc-ponder .sub { position: absolute; left: 120px; top: 350px; right: 420px; display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.sc-ponder .sub .label { margin: 0; }
.sc-ponder .grid4 { position: absolute; left: 120px; right: 120px; top: 412px; height: 378px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; }
.pcard { display: flex; gap: 26px; padding: 22px 34px 20px 30px; align-items: center; min-height: 0; }
.pbox { flex: 1; max-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.ptext { font-size: max(26px, calc(36px * var(--k, 1))); line-height: 1.3; color: var(--text); text-wrap: pretty; }
.sc-ponder .qline { position: absolute; left: 120px; right: 120px; top: 816px; bottom: 110px; padding: 24px 44px; display: flex; border-top-color: var(--c-rule); }
.sc-ponder .qbox { flex: 1; }
.qtext { font-size: max(26px, calc(38px * var(--k, 1))); line-height: 1.3; color: var(--text); font-weight: 400; font-style: italic; }

/* quote */
.sc-quote .kicker { position: absolute; left: 200px; right: 200px; top: 250px; text-align: center; }
.sc-quote .qwrap { position: absolute; left: 230px; right: 230px; top: 320px; height: 460px; display: flex; align-items: center; justify-content: center; }
.quote { font-size: max(26px, calc(62px * var(--k, 1))); line-height: 1.3; font-style: italic; color: var(--c-heading); text-align: center; text-wrap: balance; }
.sc-quote .by-rule { position: absolute; left: 50%; margin-left: -80px; top: 806px; }
.sc-quote .by { position: absolute; left: 200px; right: 200px; top: 846px; text-align: center; font-size: 30px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* closing (feature slide) */
.sc-closing .kicker { position: absolute; left: 200px; right: 200px; top: 150px; text-align: center; }
.sc-closing .cwrap { position: absolute; left: 220px; right: 220px; top: 210px; height: 360px; display: flex; align-items: center; justify-content: center; }
.cverse { font-size: max(26px, calc(54px * var(--k, 1))); line-height: 1.34; font-style: italic; color: var(--c-title); text-align: center; text-wrap: balance; }
.sc-closing .ref { position: absolute; left: 200px; right: 200px; top: 596px; text-align: center; }
.sc-closing .invite { position: absolute; left: 330px; right: 330px; top: 680px; padding: 30px 48px; text-align: center; border-top-color: var(--c-rule); }
.itext { font-size: 38px; line-height: 1.3; color: var(--text); }

/* children */
.sc-kids .hbox { position: absolute; left: 120px; top: 92px; width: 1400px; height: 210px; }
.sc-kids.has-image .hbox { top: 64px; height: 238px; }
.sc-kids .heading { font-size: max(26px, calc(72px * var(--k, 1))); }
.sc-kids .rule { position: absolute; left: 120px; top: 318px; }
.kgrid { position: absolute; left: 120px; right: 120px; top: 350px; height: 384px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; }
.kgrid .card { min-height: 0; }
.k-verse .verse { font-size: max(26px, calc(48px * var(--k, 1))); }
.k-talk .qs li { font-size: max(34px, calc(42px * var(--k, 1))); }
.k-act { position: absolute; left: 120px; right: 120px; top: 760px; bottom: 100px; padding: 24px 44px; display: flex; flex-direction: column; }
.k-act .idea { font-size: max(26px, calc(38px * var(--k, 1))); }

/* Pictures, decoration hooks and the newer layouts. Same stage pixels and
   palette roles as 30-stage.css. Each layout keeps its content above
   y = 970 so nothing reaches the safe area at the foot of the stage. */

/* pictures (generated paintings): fill their box around a focus point */
.pic { position: absolute; margin: 0; overflow: hidden; background: var(--surface); border-radius: var(--radius, 4px); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic-panel { right: 0; top: 0; bottom: 0; width: 860px; border-radius: 0; }
.pic-panel-l { left: 0; top: 0; bottom: 0; width: 440px; border-radius: 0; }
.pic-panel-m { left: 0; top: 0; bottom: 0; width: 640px; border-radius: 0; }
.pic-corner { right: 120px; top: 64px; width: 520px; height: 280px; }
.pic-top { right: 120px; top: 64px; width: 540px; height: 300px; }
.sc-kids .pic-corner { width: 540px; height: 296px; }
.pic-side { right: 120px; top: 250px; width: 600px; height: 450px; }
.pic-word { position: relative; flex: 1 1 0; min-height: 0; width: 100%; margin-top: 28px; }


/* shared excerpt block */
.ex { margin-bottom: calc(22px * var(--k, 1)); }
.ex:last-child { margin-bottom: 0; }
.ex-label { font-size: 28px; line-height: 1.2; letter-spacing: .08em; color: var(--accent2); }
.ex-ref { font-size: 26px; line-height: 1.3; letter-spacing: .04em; color: var(--accent); margin: 4px 0 6px; }
.ex-text { font-size: max(26px, calc(36px * var(--k, 1))); line-height: 1.36; color: var(--text); text-wrap: pretty; }
.ex-text mark { background: none; color: var(--accent2); font-weight: 700; }
.ex-center { text-align: center; }

/* wide heading used by journey and compare */
.hbox-wide { position: absolute; left: 120px; top: 92px; width: 1360px; height: 182px; }
.sc-journey .rule, .sc-compare .rule { position: absolute; left: 120px; top: 290px; }
.sc-journey.has-image .hbox-wide, .sc-compare.has-image .hbox-wide { width: 1100px; }

/* question band across the foot of a slide: label at left, questions at right */
/* content above a band ends by y = 770, so the gap above it is at least 28 px */
.q-band { position: absolute; left: 120px; right: 120px; top: 798px; height: 172px; flex-direction: row; gap: 40px; padding: 22px 44px 18px; align-items: flex-start; }
.q-band .label { flex: none; width: 240px; margin: 6px 0 0; }
.q-band .qs { flex: 1 1 0; height: 100%; }
.q-band .qs li { margin-bottom: calc(12px * var(--k, 1)); }
.q-band.q-one { top: 862px; height: 108px; padding-top: 22px; padding-bottom: 18px; }

/* title with a picture panel */
.sc-title.has-image .title-wrap { left: 140px; right: auto; width: 800px; top: 0; bottom: 0; justify-content: center; align-items: flex-start; text-align: left; }
.sc-title.has-image .title { font-size: 92px; max-width: 800px; margin-top: 30px; }
.sc-title.has-image .rule { margin: 32px 0; }
.sc-title.has-image .pill { order: 0; margin: 0 0 30px; }

/* overview with a picture */
.sc-overview.has-image .ov-grid { right: 760px; grid-template-columns: 1fr 1fr; }
.sc-overview .kicker, .sc-overview .heading { max-width: 1680px; }

/* passage, picture: verses left */
.sc-passage .col-l, .sc-picture .col-l { position: absolute; left: 120px; top: 92px; bottom: 110px; display: flex; flex-direction: column; }
.sc-picture .col-l { width: 1060px; gap: 0; }
.sc-picture .pic-panel { width: 620px; }
.sc-picture .hbox { flex: none; max-height: 230px; }
.sc-picture .col-l .rule { flex: none; margin: 14px 0 28px; }
.sc-picture .verse-card { flex: 1 1 0; min-height: 0; }
.sc-picture .q-card { flex: 1.15 1 0; min-height: 0; margin-top: 28px; }
.sc-picture .prow { flex: 1.5 1 0; min-height: 0; margin-top: 28px; display: flex; gap: 28px; }
.sc-picture .prow .q-card { flex: 1.2 1 0; margin-top: 0; }
.sc-picture .prow .idea-card { flex: 1 1 0; min-width: 0; }
.sc-picture.kids .heading { font-size: max(26px, calc(72px * var(--k, 1))); }
.sc-picture.kids .qs li { font-size: max(30px, calc(38px * var(--k, 1))); }
.sc-picture.kids .idea { font-size: max(30px, calc(38px * var(--k, 1))); }
.sc-picture.kids .verse { font-size: max(30px, calc(48px * var(--k, 1))); }

/* ponder with a picture */
.sc-ponder.has-image .hbox { width: 1180px; }

/* journey: a path with stops */
.jline { left: 120px; right: 120px; top: 360px; height: 140px; }
.jline svg { width: 100%; height: 100%; }
.stops { position: absolute; left: 120px; right: 120px; top: 520px; height: 250px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 48px; }
.stop { height: 100%; }
.sc-journey .ex-text { font-size: max(26px, calc(44px * var(--k, 1))); }

/* word study */
.sc-wordstudy .col-l { position: absolute; left: 120px; top: 92px; width: 620px; bottom: 110px; display: flex; flex-direction: column; }
.sc-wordstudy .hbox { flex: none; max-height: 300px; }
.sc-wordstudy .col-l .rule { flex: none; margin: 16px 0 36px; }
.sc-wordstudy .label { margin-bottom: 6px; }
/* the studied word sits under its label: big, but below the heading in rank */
.word { font-size: 76px; line-height: 1.05; color: var(--accent2); }
.art-word { position: relative; flex: 1 1 0; min-height: 0; width: 100%; margin-top: 20px; }
.sc-wordstudy .col-r { position: absolute; left: 820px; right: 120px; top: 92px; bottom: 110px; display: flex; flex-direction: column; gap: 40px; }
.uses { flex: 2 1 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.uses .ex-text { font-size: max(26px, calc(40px * var(--k, 1))); }
.uses .ex { border-left: 6px solid var(--c-rule); padding: 2px 0 4px 28px; margin: 0; }
.sc-wordstudy .q-card { flex: 1 1 0; min-height: 0; }

/* timeline */
.hbox-tl { position: absolute; left: 120px; top: 92px; width: 1080px; height: 214px; }
.sc-timeline .rule { position: absolute; left: 120px; top: 322px; }
.tl-line { position: absolute; left: 120px; right: 120px; top: 404px; height: 4px; background: var(--c-rule); }
.events { position: absolute; left: 120px; right: 120px; top: 390px; height: 376px; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 32px; }
.event { position: relative; padding-top: 56px; min-height: 0; }
.tl-dot { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: var(--r-mark); background: var(--accent); }
.ebox { height: 100%; }
.sc-timeline .ex-text { font-size: max(26px, calc(33px * var(--k, 1))); line-height: 1.3; }

/* side by side */
.prompt { position: absolute; left: 120px; right: 120px; top: 318px; height: 96px; display: flex; gap: 40px; align-items: flex-start; }
.prompt .label { flex: none; width: 240px; margin: 8px 0 0; }
.prompt .ptext { flex: 1; font-size: max(26px, calc(34px * var(--k, 1))); line-height: 1.3; font-weight: 600; }
.cols { position: absolute; left: 120px; right: 120px; top: 432px; height: 336px; display: grid; gap: 32px; }
.cols.cols-tall { height: 392px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ccard { display: flex; flex-direction: column; padding: 26px 34px; min-height: 0; }
.ccard.answer { border-top-color: var(--c-rule); }
.ctitle { flex: none; font-size: 28px; line-height: 1.2; letter-spacing: .06em; color: var(--accent2); margin-bottom: 14px; }
.cbox { flex: 1 1 0; }
.sc-compare .ex-text { font-size: max(26px, calc(32px * var(--k, 1))); }

/* step by step */
.sc-steps .col-r { position: absolute; left: 540px; right: 120px; top: 80px; bottom: 110px; display: flex; flex-direction: column; }
.sc-steps:not(.has-image) .col-r { left: 120px; right: 420px; }
.sc-steps .hbox { flex: none; max-height: 200px; }
.sc-steps .col-r .rule { flex: none; margin: 12px 0 22px; }
.steplist { flex: 1 1 0; list-style: none; display: flex; flex-direction: column; gap: calc(14px * var(--k, 1)); }
.stp { display: flex; gap: 24px; align-items: flex-start; }
.badge { flex: none; width: 52px; height: 52px; border-radius: var(--r-mark); background: var(--accent); display: flex; align-items: center; justify-content: center; }
.bnum { font-size: 30px; line-height: 1; color: var(--bg); }
.stp .ex { flex: 1; margin: 0; }
.stp .ex-label { display: inline; margin-right: 16px; }
.stp .ex-ref { display: inline; }
.sc-steps .ex-text { font-size: max(26px, calc(34px * var(--k, 1))); margin-top: 2px; }
.srow { flex: none; height: 250px; margin-top: 24px; display: flex; gap: 24px; }
.srow .card { flex: 1 1 0; min-width: 0; padding: 24px 36px 18px; }
.srow .q-steps { flex: 1.5 1 0; }
.q-steps .qs li { margin-bottom: calc(10px * var(--k, 1)); }
.sc-steps.kids .srow { height: 410px; }
.sc-steps.kids .heading { font-size: max(26px, calc(68px * var(--k, 1))); }
.sc-steps.kids .ex-text { font-size: max(26px, calc(40px * var(--k, 1))); }
.sc-steps.kids .ex-label { font-size: max(28px, calc(34px * var(--k, 1))); }
.sc-steps.kids .q-steps .qs li { font-size: max(30px, calc(36px * var(--k, 1))); }
.sc-steps.kids .a-steps .idea { font-size: max(30px, calc(34px * var(--k, 1))); }

/* reflection */
.sc-reflect .kicker { position: absolute; left: 200px; right: 200px; top: 110px; text-align: center; }
.rwrap { position: absolute; left: 220px; right: 220px; top: 180px; height: 360px; display: flex; align-items: center; justify-content: center; }
.rverse { font-size: max(26px, calc(60px * var(--k, 1))); line-height: 1.34; font-style: italic; color: var(--text); text-align: center; text-wrap: balance; }
.sc-reflect .ref { position: absolute; left: 200px; right: 200px; top: 560px; text-align: center; }
.rcard { position: absolute; left: 330px; right: 330px; top: 640px; height: 320px; border-top-color: var(--c-rule); padding: 32px 52px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rbox { flex: 1 1 0; width: 100%; }
.rtext { font-size: max(26px, calc(44px * var(--k, 1))); line-height: 1.28; font-weight: 600; color: var(--text); }
.pause { flex: none; font-size: 30px; line-height: 1.3; font-style: italic; color: var(--muted); margin-top: 14px; }

/* picture variants of the centred layouts: the picture takes one side and the
   text column keeps the same order and rhythm on the other */
.sc-kids.has-image .hbox { width: 1100px; }
.sc-kids.has-image .rule { top: 318px; }
.sc-kids.has-image .kgrid { top: 384px; height: 356px; }
.sc-kids.has-image .k-act { top: 768px; }

.sc-quote.has-image .kicker, .sc-quote.has-image .by { left: 140px; right: 1000px; text-align: left; }
.sc-quote.has-image .qwrap { left: 140px; right: 1000px; justify-content: flex-start; }
.sc-quote.has-image .quote { text-align: left; }
.sc-quote.has-image .by-rule { left: 140px; margin-left: 0; }

.sc-reflect.has-image .kicker, .sc-reflect.has-image .ref { left: 760px; right: 120px; text-align: left; }
.sc-reflect.has-image .rwrap { left: 760px; right: 120px; justify-content: flex-start; }
.sc-reflect.has-image .rverse { text-align: left; }
.sc-reflect.has-image .rcard { left: 760px; right: 120px; align-items: flex-start; text-align: left; }

.sc-closing.has-image .kicker, .sc-closing.has-image .ref { left: 140px; right: 1000px; text-align: left; }
.sc-closing.has-image .cwrap { left: 140px; right: 1000px; justify-content: flex-start; }
.sc-closing.has-image .cverse { text-align: left; }
.sc-closing.has-image .invite { left: 140px; right: 1000px; text-align: left; }

/* the foot rule spans the text column only, never running into a picture */
.sc-steps.has-image .deco .foot { left: 540px; }
.sc-reflect.has-image .deco .foot { left: 760px; }
.sc-picture .deco .foot { right: 740px; }
.sc-quote.has-image .deco .foot { right: 980px; }

/* One question for the class (title, overview and quote slides). It is plain
   text in a card and is on screen from the first frame. */
.ask-card { display: flex; flex-direction: column; padding: 26px 40px 24px; }
.ask-card .label { margin: 0 0 10px; }
.abox { min-height: 0; }
.atext { font-family: var(--f-text-x); font-weight: 400; font-size: max(30px, calc(36px * var(--k, 1))); line-height: 1.28; color: var(--text); text-wrap: pretty; margin: 0; }
.q-band.ask-card { flex-direction: row; }
.q-band .abox { flex: 1 1 0; height: 100%; display: flex; align-items: center; }
.sc-overview .ov-grid { bottom: 250px; }
.sc-title .ask-title { margin-top: 48px; width: 100%; max-width: 1300px; max-height: 250px; text-align: left; }
.sc-title.has-image .ask-title { max-width: 800px; }
.sc-title .ask-title .abox { max-height: 170px; }
.sc-quote .kicker { top: 150px; }
.sc-quote .qwrap { top: 210px; height: 420px; }
.sc-quote .by-rule { top: 656px; }
.sc-quote .by { top: 692px; }
.ask-quote { position: absolute; left: 230px; right: 230px; top: 790px; height: 180px; }
.ask-quote .abox { flex: 1 1 0; }
.sc-quote.has-image .ask-quote { left: 140px; right: 1000px; }

/* Player chrome around the stage. */
body.player-body { margin: 0; overflow: hidden; background: #0b0d14; }
.player { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); color: var(--text); font-family: "Source Sans 3", system-ui, sans-serif; }
.player:fullscreen { background: var(--bg); }
.topbar, .pnav { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; }
.tspacer { flex: 1; }
.pmain { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.player.with-notes .pmain { grid-template-columns: minmax(0, 1fr) minmax(280px, 30vw); }
.stage-area { position: relative; min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.stage-box { position: relative; overflow: hidden; border-radius: 4px; }
.stage-box .stage { position: absolute; left: 0; top: 0; }
.tbtn, .pbtn { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid color-mix(in srgb, var(--text) 35%, transparent); background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text); border-radius: 999px; padding: .4rem .85rem; font: 600 1rem/1.2 "Source Sans 3", sans-serif; cursor: pointer; text-decoration: none; min-height: 2.6rem; }
.tbtn svg, .pbtn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tbtn[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.pbtn { width: 3.4rem; height: 3.4rem; padding: 0; justify-content: center; }
.pbtn svg { width: 1.6rem; height: 1.6rem; }
.pbtn[disabled] { opacity: .3; cursor: default; }
.tbtn:hover, .pbtn:not([disabled]):hover { border-color: var(--accent); }
.tbtn:focus-visible, .pbtn:focus-visible, .settings select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pnav { justify-content: flex-end; gap: .75rem; padding-bottom: .7rem; }
.counter { margin: 0 auto 0 .3rem; font-size: 1.05rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { height: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); position: absolute; left: 0; right: 0; bottom: 0; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .6s ease; }
.notes-panel { border-left: 1px solid var(--line); background: var(--surface); padding: 1.1rem 1.3rem; overflow-y: auto; font-size: 1.15rem; line-height: 1.55; }
.notes-title { font: 700 1.5rem/1.2 "Playfair Display", Georgia, serif; margin: 0 0 .4rem; color: var(--text); }
.notes-scene { color: var(--accent); font-weight: 700; margin: 0 0 .8rem; }
.notes-text { color: var(--text); }
.g-sec + .g-sec { margin-top: 1rem; }
.g-sec h3 { font: 700 .8rem/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .35rem; }
.g-sec ul { margin: 0; padding-left: 1.1rem; }
.g-sec li + li { margin-top: .35rem; }
.g-sec p { margin: 0; }
.settings { position: relative; }
.settings summary { list-style: none; }
.settings summary::-webkit-details-marker { display: none; }
.settings[open] summary { border-color: var(--accent); }
.tbtn .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }
.settings-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; width: min(24rem, calc(100vw - 1.6rem)); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: .4rem 1rem 1rem; display: grid; gap: .9rem; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sp-title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.sp-close { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.5rem; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; }
.sp-close:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.sp-seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.sp-seg legend { padding: 0; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-opts { display: flex; border: 1.5px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; background: var(--bg); }
.sp-opt { position: relative; flex: 1 1 0; min-width: 0; }
.sp-opt input, .sp-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-opt span { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .3rem .5rem; border-radius: 9px; text-align: center; font-size: .98rem; line-height: 1.15; cursor: pointer; }
.sp-opt span:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.sp-opt input:checked + span { background: var(--accent); color: var(--bg); font-weight: 700; }
.sp-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.sp-sw { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .35rem .55rem; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .95rem; line-height: 1.15; }
.sp-sw:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.sp-sw .swatch { display: inline-flex; border-radius: 7px; overflow: hidden; flex: none; border: 1px solid var(--line); }
.sp-sw .sw { display: block; width: .8rem; height: 1.7rem; }
.sp-opt input:focus-visible + span, .sp-sw:has(input:focus-visible), .sp-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp-pdf { justify-content: center; }
.tbtn { min-height: 2.75rem; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .settings[open]::before { content: ""; position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .45); }
  .settings-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85dvh; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding: .5rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) { .tbtn .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .player.with-notes .pmain { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 40%; } .notes-panel { border-left: 0; border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }

/* Transition edge: a thin accent bar that rides the wipe and split edges.
   It exists only while a transition runs (see src/core/82-transitions.js). */
.tx-edge { position: absolute; top: 0; left: 0; width: 14px; height: 100%; z-index: 5; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 28px 4px color-mix(in srgb, var(--accent) 45%, transparent); }

/* PDF export through the browser's print dialog: one finished scene per page. */
@page { size: 1920px 1080px; margin: 0; }
body.printing { margin: 0; overflow: visible; background: #777; }
.print-page { width: 1920px; height: 1080px; position: relative; overflow: hidden; margin: 0 auto 24px; }
.print-page .stage { transform: none; }
@media print {
  html, body.printing { background: none; width: 1920px; }
  body.printing .print-page { margin: 0; break-after: page; page-break-after: always; }
  body.printing .print-page:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* themes/horizon/skin.css */
/* Horizon: fonts plus the few details the shared tokens do not cover.
   Everything else (flat slides, condensed capitals in blue, teal rules,
   square corners, framed blue feature slides, foot rule) comes from the
   "system" block in theme.json and the shared stage CSS.
   Fonts: Barlow, Barlow Condensed and EB Garamond (SIL Open Font License 1.1),
   self-hosted from /assets/fonts. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); }

/* Barlow sets wider than most text faces: keep column titles on one line and
   questions compact so dense slides still fit without scrolling. */
[data-skin="horizon"] .ctitle { letter-spacing: .06em; }
[data-skin="horizon"] .qs li { line-height: 1.24; }
[data-skin="horizon"] .ex-text mark { font-weight: 400; font-style: italic; }