/* WorkGlory.com · Lumen. Light through glass: a living stained-glass grove on a spring morning (static/js/lumen.js)
   sits at the top of every page, and each day's drawing is cut in gold glass. Three-state theme (auto, day, night).
   The printable sheet keeps its own stylesheet (sheet.css), so the PDFs never change with the look of the site.
   Colors that carry meaning are sky blue, gold, and slate; the grove's greens and browns appear only in the glass. */

@font-face { font-family: "Marcellus"; src: url(/assets/fonts/marcellus-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree-normal.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
/* the wordmark's eleven letters, Bricolage Grotesque ExtraBold at its display optical size */
@font-face { font-family: "WG Wordmark"; src: url(/assets/fonts/wordmark-bricolage-800.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: block; }

:root {
  --bg: #f3f7fb; --bg-top: #d6eaf8; --ink: #13202f; --ink-2: #3a4a5e; --muted: #64748a; --line: #cfd9e5;
  --lead: #1d222b; --gold: #e9a215; --gold-text: #8a5b00; --pale-gold: #f7d27a; --link: #1d5bbf;
  --glory-1: #a86a00; --glory-2: #d99412; --glory-hi: #f6cf6a;
  --pane: rgba(255, 255, 255, .62); --pane-line: rgba(29, 34, 43, .16); --pane-gold: rgba(240, 168, 24, .1);
  --pool-a: rgba(255, 214, 120, .5); --pool-b: rgba(120, 180, 240, .32); --pool-c: rgba(140, 200, 120, .2);
  --btn-bg: #1d222b; --btn-ink: #f7d27a; --field: rgba(255, 255, 255, .8);
  --wm-com: var(--ink-2); --wm-halo: drop-shadow(0 0 6px rgba(243, 247, 251, .9));
  --display: "Marcellus", "Iowan Old Style", Georgia, serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b1322; --bg-top: #0f2040; --ink: #eaf0f8; --ink-2: #c1cbdb; --muted: #8b97ad; --line: #24324a;
  --lead: #04060b; --gold-text: #f4c25a; --link: #94bdf2;
  --glory-1: #e9a215; --glory-2: #f7c94e; --glory-hi: #fff1c9;
  --pane: rgba(120, 160, 230, .06); --pane-line: rgba(200, 215, 240, .14); --pane-gold: rgba(240, 168, 24, .08);
  --pool-a: rgba(255, 200, 100, .14); --pool-b: rgba(70, 120, 220, .2); --pool-c: rgba(90, 150, 110, .1);
  --btn-bg: linear-gradient(180deg, #ffe7ac, #f2b84a); --btn-ink: #1b1405; --field: rgba(10, 18, 32, .6);
  --wm-com: var(--muted); --wm-halo: none;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0b1322; --bg-top: #0f2040; --ink: #eaf0f8; --ink-2: #c1cbdb; --muted: #8b97ad; --line: #24324a;
  --lead: #04060b; --gold-text: #f4c25a; --link: #94bdf2;
  --glory-1: #e9a215; --glory-2: #f7c94e; --glory-hi: #fff1c9;
  --pane: rgba(120, 160, 230, .06); --pane-line: rgba(200, 215, 240, .14); --pane-gold: rgba(240, 168, 24, .08);
  --pool-a: rgba(255, 200, 100, .14); --pool-b: rgba(70, 120, 220, .2); --pool-c: rgba(90, 150, 110, .1);
  --btn-bg: linear-gradient(180deg, #ffe7ac, #f2b84a); --btn-ink: #1b1405; --field: rgba(10, 18, 32, .6);
  --wm-com: var(--muted); --wm-halo: none;
  color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; position: relative; background: linear-gradient(180deg, var(--bg-top) 0, var(--bg) 980px) var(--bg); color: var(--ink); font: 400 1.06rem/1.65 var(--text);
  overflow-x: hidden; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lord { font-variant-caps: small-caps; letter-spacing: .04em; }
.sref { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.caps { font: 600 .74rem/1.3 var(--text); letter-spacing: .18em; text-transform: uppercase; }
.page { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 32px); position: relative; z-index: 1; }
main { flex: 1; position: relative; z-index: 1; }
.sheet { display: none; }

/* colored light from the window, lying on the page and drifting as the sun moves */
.pools { position: absolute; inset: 0 0 auto; height: 2200px; max-height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.pools i { position: absolute; border-radius: 50%; filter: blur(60px); transform: skewX(-18deg); animation: pool 30s ease-in-out infinite alternate; }
.pools i:nth-child(1) { width: 34vw; height: 300px; left: 52vw; top: 760px; background: var(--pool-a); }
.pools i:nth-child(2) { width: 26vw; height: 240px; left: 70vw; top: 980px; background: var(--pool-b); animation-delay: -11s; }
.pools i:nth-child(3) { width: 22vw; height: 220px; left: 38vw; top: 1180px; background: var(--pool-c); animation-delay: -19s; }
@keyframes pool { to { transform: skewX(-18deg) translate(-5vw, 60px); } }

/* ---------- the wordmark: "Glory" in gold with a slow sheen ---------- */
.wm { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; color: var(--ink);
  font-family: "WG Wordmark", "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; letter-spacing: -.035em; }
.wm .glory { background: linear-gradient(100deg, var(--glory-1) 0%, var(--glory-2) 30%, var(--glory-hi) 42%, var(--glory-2) 54%, var(--glory-1) 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: glory 13s ease-in-out infinite; }
@keyframes glory { 0%, 48% { background-position: 100% 0; } 76%, 100% { background-position: 0 0; } }
.wm .com { color: var(--muted); }
.wm-link { text-decoration: none; display: inline-block; border-radius: 8px; }

/* the theme button cycles Auto, Day, Night; the label shown follows the page's theme, so it never flashes */
.theme { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px 0 11px; border-radius: 999px; color: var(--ink-2);
  background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--pane-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 .72rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.theme:hover { color: var(--gold-text); }
.theme .t { display: none; align-items: center; gap: 8px; }
.theme svg { width: 15px; height: 15px; }
:root:not([data-theme]) .theme .t-auto, :root[data-theme="light"] .theme .t-light, :root[data-theme="dark"] .theme .t-dark { display: inline-flex; }
html:not(.js) .theme { display: none; }

/* ---------- buttons and quiet links ---------- */
.begin { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font: 600 1.08rem/1 var(--text); overflow: hidden;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 28%, transparent), 0 14px 34px -14px rgba(20, 30, 50, .55); transition: box-shadow .3s, transform .3s; }
.begin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 225, 150, .38) 50%, transparent 62%); transform: translateX(-120%); animation: sweep 7s ease-in-out 2.4s infinite; }
@keyframes sweep { 0% { transform: translateX(-120%); } 20%, 100% { transform: translateX(120%); } }
.begin:hover { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 34%, transparent), 0 18px 40px -14px rgba(20, 30, 50, .6); transform: translateY(-1px); }
.begin svg { width: 18px; height: 18px; position: relative; flex: none; }
.begin small { font-weight: 500; font-size: .86em; opacity: .8; }
.begin.small { padding: 13px 22px; font-size: 1rem; }
.begin:disabled { opacity: .6; cursor: default; }
.quiet { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.quiet:hover { color: var(--gold-text); border-color: var(--gold); }
.quiet small { color: var(--muted); font-size: .9em; }

/* ---------- the top of the home page: words on the left, the living window on the right ---------- */
.top { position: relative; isolation: isolate; min-height: clamp(640px, 92svh, 900px); display: flex; }
#glass { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 220px); z-index: -1; pointer-events: none; display: block; }
.top-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px clamp(16px, 3vw, 32px) 60px; display: grid; grid-template-rows: auto 1fr; }
.top .bar { display: flex; justify-content: flex-start; }   /* on a wide screen the theme button sits at the left, off the glass */
.top-text { align-self: center; max-width: min(560px, 46vw); padding-bottom: 20px; }
.top .wm { font-size: clamp(44px, 6vw, 80px); }
.tagline { margin: 16px 0 0; color: var(--ink-2); max-width: 30em; text-wrap: balance; }
.today { margin-top: clamp(36px, 5.5vw, 64px); }
.today .when { margin: 0 0 12px; color: var(--gold-text); }
.today h1 { margin: 0; font: 400 clamp(2.6rem, 5.4vw, 4.5rem)/1.02 var(--display); text-wrap: balance; }
.today .meta { margin: 14px 0 0; color: var(--ink-2); font-size: 1.08rem; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.fine { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 820px) {
  .top { min-height: 0; display: block; }
  .top-in { padding-bottom: 24px; }
  .top .bar { justify-content: space-between; align-items: center; }
  .top .wm { font-size: clamp(30px, 9.2vw, 50px); }
  .art-gap { height: min(80vw, 360px); margin-inline: calc(-1 * clamp(16px, 3vw, 32px)); }
  .top-text { max-width: none; padding: 0; }
  .tagline { margin-top: 4px; }
  .today { margin-top: 26px; }
  .cta .begin { flex: 1 1 100%; justify-content: center; }
}
@media (min-width: 821px) { .art-gap, .top .bar .wm-link { display: none; } }
@media (max-width: 820px) { .desk-wm { display: none; } }

/* ---------- sections ---------- */
.sec { margin-top: clamp(48px, 7vw, 92px); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-bottom: 26px; }
.sec-head h2 { margin: 0; font: 400 clamp(1.6rem, 3.2vw, 2.3rem)/1.15 var(--display); text-wrap: balance; }
.sec-head .caps { color: var(--muted); }
.sec-head .caps a { color: inherit; }

/* a day's window (lumen.js draws it; the drawing inside is the fallback) */
.lw { position: relative; display: block; aspect-ratio: 3 / 5; border-radius: 3px; background: linear-gradient(180deg, #cfe6f7, #7ab4e5 55%, #2f66b8); box-shadow: inset 0 0 0 2px #1b1f27; }
.lw.drawn { background: none; box-shadow: none; }
.lw canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lw > svg { position: absolute; left: 6%; top: 34%; width: 88%; height: auto; color: #f6c24f; stroke-width: 3.4; }
.js .lw > svg { visibility: hidden; }
.lw::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 60%) -160% 0 / 260% 100% no-repeat; mix-blend-mode: soft-light; pointer-events: none; }
@keyframes glint { 0%, 55% { background-position: -160% 0; } 90%, 100% { background-position: 160% 0; } }

/* the week: seven windows */
.windows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 1.8vw, 22px); }
.windows a { display: grid; gap: 10px; text-decoration: none; justify-items: center; text-align: center; }
.windows .lw { width: 100%; max-width: 140px; transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s; filter: saturate(.62) brightness(.98); }
.windows .lw::after { transition: background-position 1.1s ease; }
.windows a:hover .lw, .windows a:focus-visible .lw, .windows .is-today .lw { filter: saturate(1.08); transform: translateY(-4px); }
.windows a:hover .lw::after { background-position: 160% 0; }
.windows .is-today .lw { filter: saturate(1.15) drop-shadow(0 12px 26px color-mix(in srgb, var(--gold) 40%, transparent)); }
.windows .is-today .lw::after { animation: glint 6s ease-in-out infinite; }
.windows .d { color: var(--muted); }
.windows .dt { display: none; }
.windows .is-today .d { color: var(--gold-text); }
.windows .is-today .dn { display: none; }
.windows .is-today .dt { display: inline; }
.windows .t { font: 400 1.08rem/1.2 var(--display); text-wrap: balance; }
.windows .r { font-size: .8rem; color: var(--muted); margin-top: -6px; }
.sec-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 26px; margin-top: 28px; }
.sec-foot a { text-decoration: none; color: var(--ink-2); }
.sec-foot a:hover { color: var(--gold-text); }
.sec-foot a:not(.quiet) small { display: block; color: var(--muted); font-size: .86rem; }
.sec-foot .nx { text-align: right; }
@media (max-width: 820px) {
  .windows { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(16px, 3vw, 32px); gap: 14px; padding: 4px clamp(16px, 3vw, 32px) 14px; margin-inline: calc(-1 * clamp(16px, 3vw, 32px)); scrollbar-width: none; }
  .windows li { flex: 0 0 112px; scroll-snap-align: start; }
  .sec-foot .nx { text-align: left; }
}

/* five parts */
.parts5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.parts5 li { border-top: 1px solid var(--line); padding-top: 14px; }
.parts5 .n { display: block; font: 400 2.6rem/1 var(--display); background: linear-gradient(160deg, var(--glory-hi), var(--glory-2) 45%, var(--glory-1)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.parts5 b { display: block; font: 400 1.22rem/1.2 var(--display); margin-bottom: 6px; }
.parts5 span:last-child { color: var(--ink-2); font-size: .95rem; line-height: 1.5; display: block; }
.trust { margin: 26px 0 0; color: var(--muted); font-size: .94rem; }
@media (max-width: 900px) { .parts5 { grid-template-columns: minmax(0, 1fr); gap: 0; } .parts5 li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 10px; padding-block: 14px; } .parts5 .n { grid-row: span 2; font-size: 2rem; margin: 0; } .parts5 b { margin-bottom: 2px; } }

/* ---------- footer: the game link keeps the site's pixel style ---------- */
.site-foot { position: relative; z-index: 1; margin-top: clamp(64px, 9vw, 110px); background: #0a1d38; color: #b9c4d6; font-size: .9rem; }
.foot { display: grid; gap: 14px; padding-block: 8px 36px; }
.foot p { margin: 0; max-width: 62em; }
.foot .game { max-width: none; padding-block: 26px 22px; border-bottom: 1px solid rgba(226, 177, 85, .2); display: flex; justify-content: center; }
.game-link { display: inline-block; padding: 6px 0; line-height: 0; }
.pixel-text { display: block; width: 100%; max-width: 100%; height: auto; }
.pixel-text .px-face { fill: #e2b155; transition: fill .15s ease; }
.pixel-text .px-shadow { fill: rgba(0, 0, 0, .45); }
.game-link:hover .px-face, .game-link:focus-visible .px-face { fill: #fff4d6; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-weight: 600; color: #eef2fa; }
.foot nav a { color: inherit; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.foot nav a:hover { color: #f7d27a; }
.foot nav .soon { color: #8e9bb3; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; }
.foot p a { color: #eef2fa; }
.foot .maker { color: #eef2fa; font-weight: 600; }
.site-foot :focus-visible { outline-color: #e2b155; }

/* ---------- inner pages: a band of the grove under a small header ---------- */
.mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 18px 6px; position: relative; z-index: 2; }
.mini .wm { font-size: clamp(26px, 3.2vw, 32px); filter: var(--wm-halo); }   /* by day the wordmark sits on pale glass: a darker .com and a soft halo lift it off */
.mini .wm .com { color: var(--wm-com); }
@media (min-width: 821px) { .mini { justify-content: flex-start; } }
.band { position: relative; height: clamp(170px, 24vw, 330px); margin-top: -64px; z-index: 0; pointer-events: none; }
.band #glass { height: calc(100% + 60px); }
.band + .page > :first-child { margin-top: -84px; }
@media (max-width: 640px) { .band { margin-top: -40px; } .band + .page > :first-child { margin-top: -50px; } }

/* the head of a lesson: the day's window beside its title */
.lhead { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: end; padding-block: 22px 40px; position: relative; z-index: 1; }
.lhead > * { min-width: 0; }
.lhead .lw { width: 100%; filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--gold) 38%, transparent)); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { filter: drop-shadow(0 18px 46px color-mix(in srgb, var(--gold) 62%, transparent)); } }
.lhead .lw::after { animation: glint 7s ease-in-out infinite; }
.days { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.days a { position: relative; width: 32px; height: 32px; display: grid; place-items: center; font: 600 .68rem/1 var(--text); text-decoration: none; color: var(--muted); border-radius: 50%; border: 1px solid transparent; }
.days a:hover { color: var(--ink); border-color: var(--line); }
.days a[aria-current="page"] { background: var(--lead); color: var(--pale-gold); }
.days a.is-today::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.lhead .when, .phead .when { margin: 0 0 8px; color: var(--gold-text); }
.today-tag { display: none; }
.when.is-today .today-tag { display: inline; }
.lhead h1 { margin: 0; font: 400 clamp(2.6rem, 7vw, 5.3rem)/1 var(--display); text-wrap: balance; }
.share-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--ink); font: 600 1rem/1 var(--text); cursor: pointer; }
.share-btn[hidden] { display: none; }
.share-btn:hover { background: color-mix(in srgb, var(--gold) 26%, transparent); }
.share-btn svg { flex: none; color: var(--gold-text); }
.lhead .meta, .phead .meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; color: var(--ink-2); }
@media (max-width: 640px) {   /* the window moves to the right; the seven days stay on one line down to a 360-pixel screen */
  .lhead { grid-template-columns: minmax(0, 1fr) 84px; gap: 16px; align-items: start; } .lhead > div:last-child { order: -1; }
  .days { gap: 4px; } .days a { width: 28px; height: 28px; }
}

/* the lesson: five parts */
.lesson { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.lesson > * { min-width: 0; overflow-wrap: break-word; }
.beat h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font: 400 1.7rem/1.1 var(--display); }
.beat h2 i { font-style: normal; background: linear-gradient(160deg, var(--glory-hi), var(--glory-2) 45%, var(--glory-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beat p { margin: 0 0 1em; }
.beat p:last-child { margin-bottom: 0; }
.lead { font: 500 clamp(1.2rem, 2.6vw, 1.36rem)/1.55 var(--text); }
.pane { position: relative; padding: 24px 26px; border-radius: 4px; background: var(--pane); border: 1px solid var(--pane-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(10, 20, 40, .05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pane.gold { background: var(--pane-gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.pane p:last-child { margin-bottom: 0; }
.pane .cap { margin: 0 0 10px; color: var(--muted); }
.pane .vs { margin: 0; font: 400 1.1rem/1.75 var(--text); }
.pane .vn { font: 700 .62rem/1 var(--text); color: var(--gold-text); margin-right: .25em; vertical-align: .6em; }
.read .pane { margin-top: 20px; }
.quote { margin: 24px 0 4px; }
.quote .lead-in { color: var(--ink-2); }
.quote blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--gold); }
.quote blockquote p { margin: 0; font: italic 400 1.18rem/1.6 var(--text); }
.quote figcaption { margin-top: 12px; padding-left: 23px; font-size: .88rem; color: var(--muted); }
.question { margin: 0; font: 600 clamp(1.18rem, 2.8vw, 1.34rem)/1.5 var(--text); }
.share { font: 400 1.1rem/1.65 var(--text); }
.today-banner, .note { font-weight: 600; padding: 16px 22px; }
.today-banner a { color: var(--link); }
.end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 22px; }
.pager a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none; }
.pager .nx { grid-template-columns: minmax(0, 1fr) 48px; text-align: right; grid-column: 2; }
.pager small { display: block; color: var(--muted); margin-bottom: 4px; }
.pager b { font: 400 1.15rem/1.15 var(--display); }
.pager a:hover b { color: var(--gold-text); }
@media (max-width: 520px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager .nx { grid-column: 1; } }

/* feedback form */
.feedback { display: grid; gap: 12px; }
.field { display: grid; gap: 8px; font-weight: 600; }
.field textarea { width: 100%; min-height: 96px; padding: 14px; border-radius: 4px; border: 1px solid var(--pane-line); background: var(--field); color: var(--ink); font: 400 1.06rem/1.5 var(--text); resize: vertical; }
.field textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.feedback-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.form-status { margin: 0; font-weight: 600; color: var(--ink-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* other pages: a title under the glass, then text or a list */
.phead { max-width: 760px; padding-block: 22px 34px; position: relative; z-index: 1; }
.phead h1 { margin: 0; font: 400 clamp(2.4rem, 6vw, 4.2rem)/1.04 var(--display); text-wrap: balance; }
.lede { margin: 16px 0 0; color: var(--ink-2); font-size: 1.12rem; max-width: 40em; }
.prose { max-width: 720px; }
.prose h2 { margin: 36px 0 10px; font: 400 1.6rem/1.2 var(--display); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose p a:not(.begin), .prose ol:not(.wlist) a { color: var(--link); }
.prose ol { padding-left: 1.2em; display: grid; gap: 8px; }
.coverage { margin: 30px 0 0; max-width: 46em; color: var(--muted); font-size: .94rem; }
.page > .today-banner { margin-bottom: 26px; }
.page > .pager { margin-top: 34px; }
.wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wlist a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.wlist .wl { display: grid; gap: 2px; }
.wlist .caps { color: var(--muted); }
.wlist .cur { display: none; color: var(--gold-text); }
.wlist .is-today .cur { display: inline; }
.wlist b { font: 400 1.3rem/1.2 var(--display); }
.wlist .r { color: var(--ink-2); font-size: .94rem; }
.wlist a:hover b { color: var(--gold-text); }

/* without WebGL or scripts: no glass, so the space it would fill closes up and a soft light stands in */
html:is(.no-glass, :not(.js)) .top { background: radial-gradient(42% 56% at 74% 42%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 72%); }
html:is(.no-glass, :not(.js)) .art-gap { height: 16px; }
html:is(.no-glass, :not(.js)) .band { height: 44px; margin-top: 0; }
html:is(.no-glass, :not(.js)) .band + .page > :first-child { margin-top: 0; }

/* ---------- motion ---------- */
/* opening a lesson: the window you chose and its title glide into place (app.js names them on the click) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.lhead .lw { view-transition-name: lesson-window; }
.lhead h1 { view-transition-name: lesson-title; }
::view-transition-group(lesson-window), ::view-transition-group(lesson-title) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.enter > * { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.enter > *:nth-child(2) { animation-delay: .08s; } .enter > *:nth-child(3) { animation-delay: .16s; } .enter > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }