/* Light mode and shared type for the supporter pages (Ray, 2026-10-09).
   Loads after each page's own <style>. Overrides use :where() so they keep the original selector's weight and win by order. */

/* the sun/moon switch in the top bar */
:is(.bar, .top) .themeb { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2, rgba(232, 185, 90, .45)); display: grid; place-items: center; opacity: 1; padding: 0; color: inherit; background: none; cursor: pointer; }
:is(.bar, .top) .themeb svg { width: 16px; height: 16px; }
:is(.bar, .top) .themeb:hover { border-color: var(--gold); }

/* the credits roll in the CHRISTIANITIES face (Ray, 2026-10-09) */
/* the credits roll set like a film's end credits: a classic serif in tracked capitals (Ray, 2026-10-09) */
#credits .roll-in span:not(.k) { font: 500 19px/1.15 "Cormorant Garamond", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 235, 219, .82); }
#credits .roll-in .me { font: 600 24px/1.15 "Cormorant Garamond", Georgia, serif; font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold2); }
#credits .roll-in .k { font: 700 10px/1 Lato, "Helvetica Neue", Arial, sans-serif; letter-spacing: .3em; }

/* eyebrows in the subway sign's Lato instead of the typewriter mono: clearer at small sizes (Ray, 2026-10-09) */
.k { font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: .14em; }

/* the badges under the greeting: the logo's face for the name, the subway sign's Lato for the status (Ray, 2026-10-09) */
.badge b { font: 900 15px/1.05 var(--display); letter-spacing: .01em; }
.badge i { font: 400 13px/1.25 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; }

/* ── light: paper and ink, gold deepened so it reads ─────────────────────────────── */
html[data-theme="light"] {
  --bg: #f4efe4; --panel: rgba(255, 252, 245, .8); --panel2: rgba(255, 252, 245, .6);
  --line: rgba(154, 106, 24, .22); --line2: rgba(154, 106, 24, .45); --hair: rgba(28, 28, 43, .12);
  --gold: #a87414; --gold2: #8c5b0c; --ivory: #1c1c2b; --ivory2: rgba(28, 28, 43, .8); --muted: rgba(28, 28, 43, .58);
  --red: #c8381f; --green: #2c7a45; --ok: #2c7a45; --err: #b8321c;
  color-scheme: light;
}
/* islands that sit on photos or stay dark keep the night tokens */
html[data-theme="light"] :is(.acts > .act, .clip span, .pass.t0, .roll, .clipview, .tags, .usmap) {
  --bg: #080a12; --hair: rgba(242, 235, 219, .1); --line: rgba(232, 185, 90, .2); --line2: rgba(232, 185, 90, .42);
  --gold: #e8b95a; --gold2: #f6d995; --ivory: #f2ebdb; --ivory2: rgba(242, 235, 219, .78); --muted: rgba(242, 235, 219, .56);
  color: var(--ivory);   /* text on photos stays light: titles inherit this, not the page's ink */
}

/* night.css */
:where([data-theme="light"]) body::after { opacity: .035; mix-blend-mode: multiply; }
:where([data-theme="light"]) ::selection { background: rgba(168, 116, 20, .25); }
:where([data-theme="light"]) .bar.solid { background: rgba(244, 239, 228, .84); }
:where([data-theme="light"]) .btn { background: rgba(28, 28, 43, .03); }
:where([data-theme="light"]) .btn:hover { background: rgba(168, 116, 20, .1); }
:where([data-theme="light"]) .btn.gold { box-shadow: 0 8px 24px rgba(168, 116, 20, .22), inset 0 1px 0 rgba(255, 255, 255, .45); }
:where([data-theme="light"]) .link { text-decoration-color: rgba(168, 116, 20, .45); }
:where([data-theme="light"]) .chip { background: rgba(255, 252, 245, .85); border-color: rgba(28, 28, 43, .16); }
:where([data-theme="light"]) .chip.sample { color: #5a4bc9; border-color: rgba(90, 75, 201, .35); }
:where([data-theme="light"]) .tags .chip { background: rgba(8, 10, 18, .62); border-color: rgba(242, 235, 219, .16); }
:where([data-theme="light"]) .tags .chip.sample { color: #c9c3ff; border-color: rgba(170, 160, 255, .35); }
:where([data-theme="light"]) .glass { background: linear-gradient(180deg, rgba(255, 253, 248, .94), rgba(250, 246, 237, .9)); box-shadow: 0 18px 44px rgba(60, 45, 20, .1), inset 0 1px 0 #fff; }
:where([data-theme="light"]) .inp { border-color: rgba(28, 28, 43, .18); background: rgba(255, 255, 255, .72); }
:where([data-theme="light"]) .inp:focus { background: #fff; }
:where([data-theme="light"]) .inp::placeholder { color: rgba(28, 28, 43, .36); }
:where([data-theme="light"]) .road::before { background: rgba(28, 28, 43, .12); }
:where([data-theme="light"]) .road .stop b { border-color: rgba(28, 28, 43, .25); }
:where([data-theme="light"]) .road .stop b::after { background: rgba(28, 28, 43, .2); }
:where([data-theme="light"]) .sky::after { background: radial-gradient(120% 90% at 20% 30%, rgba(244, 239, 228, .5), rgba(244, 239, 228, .9) 70%), linear-gradient(0deg, var(--bg) 2%, rgba(244, 239, 228, 0) 45%); }
:where([data-theme="light"]) .mini { background: rgba(255, 252, 245, .95); box-shadow: 0 20px 50px rgba(60, 45, 20, .18); }
:where([data-theme="light"]) .mini .bar { background: rgba(28, 28, 43, .12); }
:where([data-theme="light"]) .follow.on, :where([data-theme="light"]) .follow.on b { color: #b8321c; }
:where([data-theme="light"]) .staffbar { color: #4a3fb0; background: rgba(120, 105, 255, .12); }
:where([data-theme="light"]) .usmap { background: #11152a; border-radius: 12px; overflow: hidden; }

/* updates.html */
:where([data-theme="light"]) .lead .pic::after { background: linear-gradient(90deg, rgba(255, 252, 245, 0) 55%, rgba(255, 252, 245, .9)); }
:where([data-theme="light"]) .lead .txt { background: linear-gradient(180deg, #fffdf8, #f7f2e7); }
:where([data-theme="light"]) .card { background: linear-gradient(180deg, #fffdf8, #f8f3e9); }
:where([data-theme="light"]) .card:hover { box-shadow: 0 30px 60px rgba(60, 45, 20, .16); }
:where([data-theme="light"]) .skel { background: linear-gradient(100deg, rgba(28, 28, 43, .04) 30%, rgba(28, 28, 43, .08) 50%, rgba(28, 28, 43, .04) 70%) 0 0 / 300% 100%; }
:where([data-theme="light"]) .tile { background: rgba(255, 255, 255, .72); }
:where([data-theme="light"]) .tile span { color: #fff; }
:where([data-theme="light"]) .band::before { background: radial-gradient(60% 90% at 50% 120%, rgba(232, 185, 90, .4), transparent 70%), linear-gradient(180deg, #fbf7ee, #efe7d6); }
:where([data-theme="light"]) .reader { background: rgba(60, 50, 30, .35); }
:where([data-theme="light"]) .sheet { background: linear-gradient(180deg, #fffdf8, #f6f1e6 40%); box-shadow: 0 -30px 80px rgba(60, 45, 20, .2); }
:where([data-theme="light"]) .sheet .cover::after { background: linear-gradient(0deg, #fffdf8, rgba(255, 253, 248, 0) 60%); }
:where([data-theme="light"]) .sheet .x { background: rgba(255, 252, 245, .88); border-color: rgba(28, 28, 43, .2); }
:where([data-theme="light"]) .gate { background: radial-gradient(80% 120% at 50% 0%, rgba(232, 185, 90, .2), transparent 70%), rgba(255, 252, 245, .88); }
:where([data-theme="light"]) .pass { box-shadow: 0 30px 60px rgba(60, 45, 20, .26), 0 0 0 1px rgba(255, 236, 190, .55) inset; }

/* home.html */
:where([data-theme="light"]) .item .th .dot { box-shadow: 0 0 0 3px rgba(255, 252, 245, .85), 0 0 12px var(--red); }
:where([data-theme="light"]) .letter { background: radial-gradient(90% 120% at 100% 0%, rgba(232, 185, 90, .2), transparent 60%), linear-gradient(180deg, #fffdf8, #f8f3e9); }
:where([data-theme="light"]) .stat, :where([data-theme="light"]) .kit-c { background: rgba(255, 255, 255, .55); }
:where([data-theme="light"]) .who:hover { background: rgba(28, 28, 43, .04); }
:where([data-theme="light"]) .sw i { background: rgba(28, 28, 43, .18); }
:where([data-theme="light"]) .sw i::after { background: #fff; }
:where([data-theme="light"]) .sampletag { color: #5a4bc9; }
:where([data-theme="light"]) .bellpanel { background: rgba(255, 252, 245, .97); box-shadow: 0 30px 70px rgba(60, 45, 20, .2); }
:where([data-theme="light"]) .badge { background: rgba(255, 255, 255, .5); }
:where([data-theme="light"]) .badge svg { border-color: rgba(28, 28, 43, .25); }
:where([data-theme="light"]) .badge.on { background: rgba(232, 185, 90, .14); }
:where([data-theme="light"]) .nextmeet { background: radial-gradient(90% 120% at 100% 0%, rgba(232, 185, 90, .18), transparent 60%), rgba(255, 255, 255, .5); }
:where([data-theme="light"]) .clock span { background: rgba(255, 255, 255, .72); }
:where([data-theme="light"]) .clock.live { color: #b8321c; }
:where([data-theme="light"]) .ph i, :where([data-theme="light"]) .prog .barx { background: rgba(28, 28, 43, .1); }
:where([data-theme="light"]) select.inp option { background: #fff; }

/* photo tiles' empty backgrounds, which used --night */
:where([data-theme="light"]) :is(.card .pic, .item .th, .clip) { background-color: #e9e2d3; }
:where([data-theme="light"]) body { background: var(--bg); }

/* desk.html */
:where([data-theme="light"]) .chart .grid-l { stroke: rgba(28, 28, 43, .1); }
:where([data-theme="light"]) .tip { background: #fffdf8; }
:where([data-theme="light"]) .verdict.no, :where([data-theme="light"]) .people button.hid { color: #b8321c; }

/* account.css: sign in, welcome, unsubscribe */
:where([data-theme="light"]) .top.solid { background: rgba(244, 239, 228, .9); color: #2b241c; }
:where([data-theme="light"]) .scene .art::after { background: radial-gradient(ellipse at 50% 50%, rgba(244, 239, 228, .45), rgba(244, 239, 228, .9) 72%), linear-gradient(0deg, var(--bg), rgba(244, 239, 228, 0) 30%); }
:where([data-theme="light"]) .scene .card { box-shadow: 0 30px 80px rgba(60, 45, 20, .18), inset 0 1px 0 #fff; }
:where([data-theme="light"]) :is(input.t, .at) { border-color: rgba(28, 28, 43, .18); background: rgba(255, 255, 255, .72); }
:where([data-theme="light"]) .at input.t { background: none; }
:where([data-theme="light"]) input.t:focus { background: #fff; }
:where([data-theme="light"]) .gift { background: rgba(232, 185, 90, .14); }

/* support.html: the summit hero stays night; the night bands turn to paper */
:where([data-theme="light"]) .night { background: #e6dcc6; color: var(--ink); }
:where([data-theme="light"]) .night .k { color: var(--gilt); }
:where([data-theme="light"]) #host .intro, :where([data-theme="light"]) .stay-grid p, :where([data-theme="light"]) .news-msg { color: var(--ink2); }
:where([data-theme="light"]) .kit { border-color: var(--rule); background: rgba(255, 255, 255, .35); }
:where([data-theme="light"]) .kit li::before { background: var(--gilt); }
:where([data-theme="light"]) .news { border-bottom-color: var(--rule); }
:where([data-theme="light"]) .news input { color: var(--ink); }
:where([data-theme="light"]) .news input::placeholder { color: rgba(43, 36, 28, .4); }
:where([data-theme="light"]) .news button { color: #8a6420; }
:where([data-theme="light"]) .links a { border-bottom-color: var(--rule); }
:where([data-theme="light"]) .links small { color: var(--ink2); }
:where([data-theme="light"]) footer.night { color: var(--ink2); border-top-color: var(--rule); }

:where([data-theme="light"]) .verdict.demo { color: #5a4bc9; background: rgba(90, 75, 201, .1); }

/* light mode gets a daylight sky: a softened cut of the watercolour panorama replaces the night sky (Ray, 2026-10-09) */
:where([data-theme="light"]) .hero > .art { background: #f4efe4 url(frames/temple/hero/sky-day.webp) center top / cover no-repeat; }
/* light mode on the supporter pages: a real photograph, the Church of the Intercession on the Nerl at evening, the church the site's summit temple is drawn from
   (Ray, 2026-10-09). Photo: kishjar?, CC BY 2.0, https://commons.wikimedia.org/wiki/File:Church_of_the_Intercession_on_the_Nerl.jpg (credit shown in the corner) */
:where([data-theme="light"]) .sky, :where([data-theme="light"]) .scene .art { background: #f4efe4 url(frames/temple/hero/day-nerl.webp) 78% 20% / cover no-repeat; }
:where([data-theme="light"]) .sky > img.sun { display: none; }
:where([data-theme="light"]) .sky::before, :where([data-theme="light"]) .scene .art::before { content: "Photo: kishjar?, CC BY 2.0, via Wikimedia Commons"; position: absolute; z-index: 2; right: 14px; bottom: 10px;
  font: 400 10px/1 Lato, "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; color: rgba(28, 28, 43, .55); }
:where([data-theme="light"]) .sky > img:first-child, :where([data-theme="light"]) .art > img:first-child { opacity: 0; }
:where([data-theme="light"]) .sky::after { background: linear-gradient(180deg, rgba(250, 246, 237, .75) 0, rgba(250, 246, 237, 0) 90px), linear-gradient(90deg, rgba(250, 246, 237, .94) 0%, rgba(250, 246, 237, .82) 34%, rgba(250, 246, 237, .25) 62%, rgba(250, 246, 237, .1)), linear-gradient(0deg, var(--bg) 0%, rgba(244, 239, 228, 0) 34%); }
:where([data-theme="light"]) .scene .art::after { background: radial-gradient(ellipse at 50% 50%, rgba(250, 246, 237, .55), rgba(250, 246, 237, .25) 72%), linear-gradient(0deg, var(--bg), rgba(244, 239, 228, 0) 30%); }
/* support: the summit under a day sky, with ink type */
:where([data-theme="light"]) .hero > .art::after { background: linear-gradient(90deg, rgba(250, 246, 237, .88) 0%, rgba(250, 246, 237, .6) 34%, rgba(250, 246, 237, 0) 58%), linear-gradient(0deg, #f2ebdb 0%, rgba(242, 235, 219, 0) 22%); }
:where([data-theme="light"]) .hero:has(> .art) { color: #2b241c; --ivory: #2b241c; --gold: #a87414; --gold2: #8c5b0c; }
:where([data-theme="light"]) .hero:has(> .art) :is(.lede, p.sub, .fund-t span) { color: #4a3f31; }
:where([data-theme="light"]) .hero:has(> .art) .k { color: #8a6420; }
:where([data-theme="light"]) .hero:has(> .art) .btn:not(.primary) { color: #2b241c; border-color: #8a6420; }
:where([data-theme="light"]) .hero:has(> .art) .ring .track { stroke: rgba(138, 100, 32, .25); }
:where([data-theme="light"]) header.top:not(.solid) { color: #2b241c; }
@media (max-width: 760px) { :where([data-theme="light"]) .hero > .art::after { background: linear-gradient(180deg, rgba(250, 246, 237, .92) 0%, rgba(250, 246, 237, .72) 46%, rgba(250, 246, 237, .15) 70%, #f2ebdb 100%); } }

/* the toggle in the plain .top bars (support, sign in, welcome): centred with the text links, a size smaller (Ray, 2026-10-09) */
.top nav { align-items: center; }
.top .themeb { width: 30px; height: 30px; margin: -6px 0; }
.top .themeb svg { width: 14px; height: 14px; }

/* light-mode buttons (Ray, 2026-10-09: "look a little bad in light mode"): a clean gold with a crisp edge and a small shadow,
   and outline buttons that read as buttons on paper (white face, ink edge) */
:where([data-theme="light"]) .btn { background: #fffdf8; border-color: rgba(28, 28, 43, .2); color: #1c1c2b; box-shadow: 0 1px 2px rgba(60, 45, 20, .06); }
:where([data-theme="light"]) .btn:hover { background: #fff; border-color: #a87414; }
:where([data-theme="light"]) .btn.ghost { background: transparent; border-color: rgba(28, 28, 43, .16); box-shadow: none; }
:where([data-theme="light"]) .btn.gold { background: linear-gradient(180deg, #f3cf7d, #e3b04f); border: 1px solid #b98a2c; color: #1b1408;
  box-shadow: 0 2px 8px rgba(150, 100, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .55); }
:where([data-theme="light"]) .btn.gold:hover { background: linear-gradient(180deg, #f7d88f, #e8b95a); border-color: #a87414; }
:where([data-theme="light"]) .listen { background: #fffdf8; border-color: rgba(168, 116, 20, .45); color: #8c5b0c; }

/* filter chips in Lato, sentence case, like the diary's tabs should read (Ray, 2026-10-09: "a cleaner font for the chips") */
.filters button, .chipbar .filters button { font: 600 14px/1 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; padding: 9px 15px; }
@media (max-width: 640px) { .chipbar .filters button { font-size: 13.5px; } }

/* the small type: Lato replaces the typewriter mono on every supporter page (Ray, 2026-10-09: "that font is way better, use it
   for these things as well"). The main animated site keeps its own mono. */
:root { --mono: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }



/* the top bar on the supporter and diary pages: Lato at a normal size and spacing, the round controls kept together (Ray, 2026-10-09) */
.bar nav { gap: 28px; }
.bar nav a.wide, .bar nav > a:not(.pill):not(.brand) { font: 600 14px/1 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .01em; text-transform: none; }
.bar nav .pill { font: 700 13px/1 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .02em; text-transform: none; padding: 10px 16px; }
.bar nav > :is(.bellb, .themeb) + :is(.bellb, .themeb, .pill), .bar nav > :is(.bellb, .themeb) { margin-left: -18px; }
.bar nav > a.wide + :is(.bellb, .themeb), .bar nav > a:not(.pill) + :is(.bellb, .themeb) { margin-left: 4px; }
.bar nav .bellb, .bar nav .themeb { width: 36px; height: 36px; }

/* buttons and pills in Lato, normal case, even spacing (Ray, 2026-10-09: "use Lato for pills and buttons, make sure spacing is good") */
.btn { font: 700 14px/1 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .01em; text-transform: none; padding: 0 22px; min-height: 44px; gap: 8px; }
.btn.sm { font-size: 13px; min-height: 36px; padding: 0 16px; }
.tabs [role="tab"], .credopts button, .filters button, .listen, .follow { font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .01em; text-transform: none; }
.tabs [role="tab"] { padding: 10px 17px; }
.credopts button { padding: 8px 13px; font-size: 12.5px; }
.chip { font: 700 10.5px/1 Lato, "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; }

/* the road's line runs through the centre of every stop (Ray, 2026-10-09). The stops sit 4px down (the road's top padding):
   34px circles → centre 21px, so a 4px line starts at 19px; on phones 26px circles → centre 17px, a 3px line at 15.5px. */
.road::before, .road .lit { top: 19px; }
@media (max-width: 640px) { .road::before, .road .lit { top: 15.5px; } }

/* the plain .top bar (Support, sign in) gets the same Lato menu as the other pages (Ray, 2026-10-09) */
header.top { font: 600 14px/1 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .01em; text-transform: none; }
header.top nav { gap: 26px; }
header.top .home { font-weight: 700; }