/* The Local Group: a small standalone pixel-art site, deliberately unlike the main one. */
@font-face {
	font-family: 'Press Start 2P';
	src: url(PressStart2P.woff2) format('woff2');
	font-weight: 400;
	font-display: swap;
}

:root {
	--navy: #1d2b53;
	--cream: #f7f2d0;
	--ring: #ffb454;
	--pixel-font: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
}

/* ---------- Seasons: season.js sets <html data-season="winter|spring|summer|fall"> ---------- */
:root, :root[data-season="summer"] {
	--grass: #8fd16c; --tuft: #76bb55;
	--pzs: #6fb450; --pz: #f3e7b4; --pzo: #b9a96b; --pth: #efe2ad; --pthd: #d8c78a;
	--rv1: #5bb8f0; --rv2: #3f95d8; --rvo: #245a94; --shm: #d4efff;
	--lf: #4fae5a; --lfh: #7fd88a; --lfd: #3d9248;
	--title: #fff; --title-shadow: #1d2b53;
}
:root[data-season="spring"] {
	--grass: #a0dd7a; --tuft: #84c95f; --pzs: #7bc35b;
	--lf: #79d484; --lfh: #b4f0ae; --lfd: #58b868;
}
:root[data-season="fall"] {
	--grass: #b2c35a; --tuft: #97a944; --pzs: #8c9e48;
	--lf: #e8782a; --lfh: #f7a64a; --lfd: #c2561c;
}
:root[data-season="winter"] {
	--grass: #e8f0f8; --tuft: #c4d5e8;
	--pzs: #c0cfe1; --pz: #dde6f0; --pzo: #9aaec6; --pth: #d4deea; --pthd: #b9c8da;
	--rv1: #cfe9f7; --rv2: #aad3ec; --rvo: #6d9ec4; --shm: #ffffff;
	--lf: #3f7d62; --lfh: #5c9c7d; --lfd: #2c5f4b;
	--title: #1d2b53; --title-shadow: #ffffff;
}
/* trees take turns being a different colour */
:root[data-season="spring"] .tv1 { --lf: #f6b4cf; --lfh: #ffe0ec; --lfd: #e48db0; }
:root[data-season="spring"] .tv2 { --lf: #fbd0e0; --lfh: #fff1f6; --lfd: #eba5c2; }
:root[data-season="fall"] .tv1 { --lf: #d9452f; --lfh: #f07a4f; --lfd: #a8301f; }
:root[data-season="fall"] .tv2 { --lf: #e9b52e; --lfh: #f7d96a; --lfd: #c18d1c; }

.tuft { fill: var(--tuft); }
.pzs { fill: var(--pzs); } .pz { fill: var(--pz); } .pzo { fill: var(--pzo); }
.pth { fill: var(--pth); } .pthd { fill: var(--pthd); }
.rv1 { fill: var(--rv1); } .rv2 { fill: var(--rv2); } .rvo { fill: var(--rvo); } .shm { fill: var(--shm); }
.lf { fill: var(--lf); } .lfh { fill: var(--lfh); } .lfd { fill: var(--lfd); }

/* things that only exist in some seasons */
.snow, .g-flowers, .g-spring, .g-litter, .p, .bt { display: none; }
/* what's on the river: fall rower, winter skater, spring ducks, summer sailboat */
:root[data-season="fall"] .bt-fall, :root[data-season="winter"] .bt-winter,
:root[data-season="spring"] .bt-spring, :root[data-season="summer"] .bt-summer { display: inline; }
:root[data-season="winter"] .snow, :root[data-season="winter"] .p-winter { display: inline; }
:root[data-season="spring"] .g-flowers, :root[data-season="summer"] .g-flowers,
:root[data-season="spring"] .g-spring, :root[data-season="spring"] .p-spring { display: inline; }
:root[data-season="fall"] .g-litter, :root[data-season="fall"] .p-fall { display: inline; }

/* leaves, petals and snow drift down in whole-pixel steps */
.pt { animation: drop linear infinite; animation-timing-function: steps(110, end); }
@keyframes drop {
	from { transform: translate(var(--x), -8px); }
	to   { transform: translate(calc(var(--x) + var(--dx)), 236px); }
}
.sw { animation: sway 1.5s steps(1, end) infinite; }
@keyframes sway { 0% { transform: translateX(0); } 50% { transform: translateX(1px); } }

*, *::before, *::after { box-sizing: border-box; }

/* The area outside the page (what shows when you pull the page past its top or bottom edge on a phone or trackpad):
   the deep blue of the night sky at the top, and the ground colour at the bottom (season.js adds .lower once you are
   scrolled to the lower half). Pages without a sky header (the placeholder pages) just use the ground colour. */
html { background: #0f1535; }
html.lower { background: var(--grass); }
:root:has(body.sub), :root:has(body.sched) { background: #0f1535; }   /* sub-pages are season-agnostic: always the night-sky blue */
:root[data-time="night"].lower { background: #34503f; background: color-mix(in srgb, var(--grass) 55%, #0e1640); }
:root[data-time="night"].lower:has(body.sub), :root[data-time="night"].lower:has(body.sched) { background: #0f1535; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--pixel-font);
	color: var(--navy);
	background: var(--grass);
}

.topbar { padding: 1rem 1.25rem; }
.topbar a {
	display: inline-block;
	padding: 0.6rem 0.9rem;
	color: var(--navy);
	text-decoration: none;
	font-size: 0.65rem;
	background: var(--cream);
	border: 3px solid var(--navy);
	box-shadow: 3px 3px 0 var(--navy);
}
.topbar a:hover { background: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

h1 {
	margin: 0;
	font-size: clamp(1.3rem, 4.6vw, 2.6rem);
	font-weight: 400;
	line-height: 1.3;
	color: var(--title);
	text-shadow: 0.1em 0.1em 0 var(--title-shadow);
}
.tagline {
	margin: 0.9rem 0 0;
	font-size: clamp(0.6rem, 1.8vw, 0.875rem);
	line-height: 1.9;
}
.intro { text-align: center; padding: 0 1rem; }
.tagline { max-width: 82ch; margin-left: auto; margin-right: auto; }
@media (max-width: 899px) { .tagline { font-size: 0.8125rem; } }                /* phones and tablets: 13px */

/* ---------- Home header: a night sky (galaxy + stellar stream) that fades into the grass ---------- */
:root { --px: 4px; }                          /* one art pixel of the header, in screen pixels */
@media (max-width: 899px) { :root { --px: 3px; } }
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-bottom: calc(var(--px) * 14); }
.sky {
	position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background: url(hero-stars.svg) 0 0 / calc(256 * var(--px)) calc(128 * var(--px)) repeat, #0f1535;
	-webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 23 * var(--px)) no-repeat,
	              url(hero-fade.svg) bottom / calc(4 * var(--px)) calc(24 * var(--px)) repeat-x;
	mask: linear-gradient(#000, #000) top / 100% calc(100% - 23 * var(--px)) no-repeat,
	      url(hero-fade.svg) bottom / calc(4 * var(--px)) calc(24 * var(--px)) repeat-x;
}
.galaxy {
	position: absolute; top: 0; left: 50%; z-index: -1; pointer-events: none;
	width: calc(160 * var(--px)); height: calc(46 * var(--px)); transform: translateX(-50%);
}
.home .intro { padding-top: calc(var(--px) * 37 + 0.1rem); }       /* the title sits where it did when a top bar was above it */
/* narrow screens: drop the galaxy a little so the stream isn't hidden behind the day/night button */
@media (max-width: 899px) {
	.galaxy { top: 2.6rem; }
	.home .intro { padding-top: calc(var(--px) * 37 + 2.7rem); }
}
.home h1, .sched h1 { color: #fff; text-shadow: 0.1em 0.1em 0 #3a4a8a; }
.home .tagline, .sched .tagline { color: var(--cream); }

/* ---------- Section buttons under the title ---------- */
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 1.1rem; margin-top: 1.3rem; }
.btn {
	display: inline-block;
	padding: 0.8rem 1.1rem;
	color: var(--navy);
	text-decoration: none;
	font-size: clamp(0.625rem, 1.9vw, 0.875rem);
	background: var(--cream);
	border: 3px solid var(--navy);
	box-shadow: 4px 4px 0 var(--navy);
}
.btn:hover { background: #fff; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--navy); }

/* ---------- Home: the pixel river scene ---------- */
.scene-wrap { flex: 1 1 0; min-height: 440px; position: relative; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the water shimmers in three frames */
.sh { opacity: 0; animation: shimmer 2.7s steps(1, end) infinite; }
.sh2 { animation-delay: 0.9s; }
.sh3 { animation-delay: 1.8s; }
@keyframes shimmer { 0% { opacity: 1; } 33.34% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- Clickable campuses ---------- */
.campus { outline: none; }
.bldg { transition: transform 0.12s steps(2, end); }
.campus:hover .bldg,
.campus:focus-visible .bldg { transform: translateY(-2px); filter: brightness(1.12); }

.tagbd { fill: var(--c); }
.tagbg { fill: #fff; }
.tagtx { fill: var(--c); }
.campus:hover .tagbg, .campus:focus-visible .tagbg { fill: var(--c); }
.campus:hover .tagtx, .campus:focus-visible .tagtx { fill: #fff; }
.campus:focus-visible .plaza { filter: drop-shadow(0 0 0 var(--ring)) brightness(1.15); }
.campus:focus-visible .tagbd { fill: var(--ring); }

/* ---------- Next-meeting speech bubble and the people walking to it ---------- */
.bob { animation: bob 1.6s steps(1, end) infinite; }
.dbob { animation: bob 1.2s steps(1, end) infinite; }
/* Christmas tree: only on 25 December (season.js sets data-xmas); the two light sets blink in turn */
.xmas { display: none; }
:root[data-xmas] .xmas { display: inline; }
.xla { animation: xl 1.6s steps(1, end) infinite; }
.xlb { animation: xl 1.6s steps(1, end) infinite 0.8s; }
@keyframes xl { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } }

.walk-l { animation: walk-l 16s steps(70, end) infinite; }
.walk-r { animation: walk-r 16s steps(70, end) infinite; }
@keyframes walk-l { from { transform: translateX(70px); } to { transform: translateX(0); } }
@keyframes walk-r { from { transform: translateX(-70px); } to { transform: translateX(0); } }
.fade { animation: fade 16s linear infinite; }
@keyframes fade { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
.fa { animation: legs-a 0.6s steps(1, end) infinite; }
.fb { animation: legs-b 0.6s steps(1, end) infinite; }
/* the rower's stroke is slower than the skater's stride */
.fa.row, .fb.row { animation-duration: 1.2s; }
@keyframes legs-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes legs-b { 0% { opacity: 0; } 50% { opacity: 1; } }

/* narrow screens (class set by menu.js): the map is small, so double the bubble and name tags */
.compact .bscale { transform: scale(2); }
/* ...and re-arrange the map a little: lift the top row and the river toward the header, bring the sides in. */
.compact .rv { transform: translate(0, -24px); }                      /* the river lifts less than the top row: more room between them */
.compact .tt { transform: translate(0, -40px); }
.compact .cg-harvard { transform: translate(10px, -40px); }
.compact .cg-mit { transform: translate(-10px, -40px); }
.mob { display: none; }                                              /* extra trees that only phones get (see phone_trees in build.py) */
.compact .mob { display: inline; }
.compact .clip { display: none; }                                   /* a tree the screen edge would cut off (set by menu.js) */
.compact .te, .compact .obs { display: none; }                       /* trees that would be cut off; the telescope people */
.compact .bot { transform: translate(0, calc(var(--drop, 0) * 1px)); }   /* BU and the lower trees drop to use spare height (set by menu.js) */
.compact .tag { transform-origin: 0 11px; transform: scale(2); }

.campus.go .bldg { animation: hop 0.4s steps(1, end) forwards; }
@keyframes hop {
	0%   { transform: translateY(-2px); }
	20%  { transform: translateY(0); }
	45%  { transform: translateY(-5px); }
	70%  { transform: translateY(-7px); }
	90%  { transform: translateY(-3px); }
}

/* ---------- Schedule ---------- */
/* Schedule, About and the placeholder pages: the same starfield as the header, all the way down, whatever the season
   (the tile lines up with the header's, so the header's fade is seamless). */
body.sched, body.sub {
	background: url(hero-stars.svg) 0 0 / calc(256 * var(--px)) calc(128 * var(--px)) repeat, #0f1535;
}
.sub h1 { color: #fff; text-shadow: 0.1em 0.1em 0 #3a4a8a; }
.sub .tagline { color: var(--cream); }
body.sched .card { box-shadow: 4px 4px 0 #3a4a8a; }
.sched .intro { padding-top: 0.5rem; }
.sched-main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.4rem 1.25rem 4rem; }
.card { background: var(--cream); border: 3px solid var(--navy); box-shadow: 4px 4px 0 var(--navy); padding: 1.1rem 1.2rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.legend { margin-bottom: 1.8rem; }
.legend-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.legend h2 { margin: 0; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.key-note { text-transform: none; letter-spacing: 0; color: var(--c, #a51c30); }
.legend h3 { margin: 0 0 0.6rem; font-size: 0.55rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #5a6389; }
.legend-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem 2rem; margin-top: 1rem; }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.key-btn {
	display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.35rem 0.5rem; margin: 0;
	font: inherit; font-size: 0.55rem; line-height: 1.9; color: inherit; text-align: left;
	background: none; border: 3px solid transparent; cursor: default;
}
.js .key-btn { cursor: pointer; }
.js .key-btn:hover { background: rgba(255, 255, 255, 0.55); }
.key-btn[aria-pressed="true"] { background: #fff; border-color: var(--navy); box-shadow: 3px 3px 0 #3a4a8a; }
.key-toggle {
	display: none; flex: none; width: 2rem; height: 2rem; padding: 0; align-items: center; justify-content: center;
	font: inherit; font-size: 0.9rem; line-height: 1; color: var(--navy); background: var(--cream);
	border: 3px solid var(--navy); box-shadow: 3px 3px 0 #3a4a8a; cursor: pointer;
}
.js .key-toggle { display: inline-flex; }
.key-toggle:hover { background: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 #3a4a8a; }
.legend.is-collapsed .legend-body { display: none; }
#no-upcoming[hidden], #past[hidden], .meetings > li[hidden], .talks li[hidden], #no-match[hidden], .key-note[hidden] { display: none; }
/* upcoming meetings come first; the past ones sit under a "Past events" button (without scripts the list is simply shown) */
#upcoming:empty { display: none; }
.past { margin-top: 1.6rem; }
.past-h { margin: 0 0 1rem; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); }
.past-toggle { display: none; }
.js .past-h { display: none; }
.js .past-toggle {
	display: flex; align-items: center; gap: 0.7rem; margin: 0 auto; padding: 0.6rem 0.9rem;
	font: inherit; font-size: 0.6rem; color: var(--navy); background: var(--cream); cursor: pointer;
	border: 3px solid var(--navy); box-shadow: 3px 3px 0 #3a4a8a;
}
.js .past-toggle:hover { background: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 #3a4a8a; }
.pt-sign { display: inline-block; width: 0.8em; text-align: center; font-size: 0.9rem; line-height: 1; }
.js .past:not(.open) .past-list { display: none; }
.js .past-list { margin-top: 1.6rem; }
.talks li.first { border-top: 0; }
.l-ico { flex: none; width: 3.6rem; display: flex; justify-content: center; }
.legend b { font-weight: 400; font-size: 0.7rem; }

.meetings { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.meeting header { display: flex; align-items: center; gap: 1.1rem; }
.m-ico { flex: none; width: 8rem; display: flex; justify-content: center; align-items: flex-end; }
.meeting h2 { margin: 0; font-size: clamp(0.8rem, 2.8vw, 1.05rem); font-weight: 400; line-height: 1.5; }
.m-where { margin: 0.35rem 0 0; font-size: 0.55rem; line-height: 1.8; color: var(--c); }
.m-where a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.m-where a:hover, .m-where a:focus-visible { color: var(--navy); }
a.m-ico:hover svg, a.m-ico:focus-visible svg { transform: translateY(-2px); filter: brightness(1.1); }
.m-when { display: flex; flex-wrap: wrap; gap: 0.3rem 0; margin: 0.45rem 0 0; font-size: 0.55rem; line-height: 1.8; }
/* the pie showing monthly / semesterly: top right of the card's heading on desktop, bottom right on phones */
.meeting header { position: relative; }
.m-freq { position: absolute; top: 0; right: 0; line-height: 0; }
.q-svg { display: block; }
.m-when span + span { margin-left: 0.9rem; padding-left: 0.9rem; border-left: 3px solid rgba(29, 43, 83, 0.25); }
/* the Where card: icon | text | Directions button (kept in the top-right corner); on phones the text drops below the icon */
.venue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; margin-bottom: 1.6rem; }
.venue > div { min-width: 0; }
@media (max-width: 520px) {
	.venue { grid-template-columns: 1fr auto; align-items: start; }
	.venue > div { grid-column: 1 / -1; grid-row: 2; }
}
.venue h2 { margin: 0 0 0.5rem; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.v-room { margin: 0; font-size: clamp(0.8rem, 2.8vw, 1.05rem); line-height: 1.5; color: var(--c); }
.v-bldg { margin: 0.35rem 0 0; font-size: 0.55rem; line-height: 1.8; }
.v-addr { margin-top: 0.1rem; color: #5a6389; }                      /* the street address, last line of the Where card */
.room-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.room-link:hover, .room-link:focus-visible { color: var(--c); }
/* the little map button on a campus page: opens Google Maps directions */
.dir {
	align-self: start; justify-self: end; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem;
	font-size: 0.55rem; color: var(--navy); text-decoration: none; background: var(--cream);
	border: 3px solid var(--navy); box-shadow: 3px 3px 0 #3a4a8a;
}
.dir:hover { background: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 #3a4a8a; }
.dir:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #3a4a8a; }
.dir-svg { display: block; image-rendering: pixelated; flex: none; }
.empty { font-size: 0.6rem; line-height: 1.9; }
.m-food { display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 0.8rem 0 0.1rem; border-top: 3px dotted rgba(29, 43, 83, 0.15); font-size: 0.5rem; line-height: 1.8; color: #5a6389; }
.talks + .m-food { border-top: 3px solid rgba(29, 43, 83, 0.15); margin-top: 0.4rem; }
.f-ico { flex: none; width: 8rem; display: flex; justify-content: center; }
.f-svg { display: block; image-rendering: pixelated; }
.talks { list-style: none; margin: 1rem 0 0; padding: 0.4rem 0 0; border-top: 3px solid rgba(29, 43, 83, 0.15); }
.talks li { display: flex; align-items: center; gap: 1.1rem; padding: 0.7rem 0; }
.talks li + li { border-top: 3px dotted rgba(29, 43, 83, 0.15); }
.t-ico { flex: none; width: 8rem; display: flex; justify-content: center; }
.t-text { display: flex; flex-direction: column; gap: 0.4rem; }
.t-title { font-size: 0.7rem; line-height: 1.5; }
.t-speaker { font-size: 0.5rem; line-height: 1.6; color: #5a6389; }
@media (max-width: 520px) { .m-when { flex-direction: column; align-items: flex-start; } .m-when span + span { margin-left: 0; padding-left: 0; border-left: 0; } .m-freq { top: auto; bottom: 0; } .m-ico, .t-ico, .f-ico { width: 7.3rem; } .meeting h2 { font-size: 0.72rem; } .meeting header, .talks li, .m-food { gap: 0.8rem; } }

/* ---------- About ---------- */
.about-meet { display: flex; align-items: flex-start; gap: 1.1rem; margin-bottom: 1.6rem; }
.about-meet > div { min-width: 0; }
.am-ico { flex: none; width: 2.6rem; padding-top: 0.1rem; display: flex; justify-content: center; }
.about-meet h2 { margin: 0; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.am-freq { margin: 0.35rem 0 0.8rem; font-size: 0.55rem; line-height: 1.8; color: #5a6389; }
.about-meet p:not(.am-freq) { margin: 0 0 0.7rem; font-size: 0.6rem; line-height: 1.9; }
.about-meet p:last-child { margin-bottom: 0; }
.organisers h2 { margin: 0 0 0.6rem; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; }
.people li + li { border-top: 3px dotted rgba(29, 43, 83, 0.15); }
.p-ico { flex: none; width: 2rem; padding-top: 0.15rem; display: flex; justify-content: center; }
.people h3 { margin: 0; font-size: clamp(0.75rem, 2.4vw, 0.95rem); font-weight: 400; line-height: 1.5; }
.p-pos { margin: 0.4rem 0 0; font-size: 0.55rem; line-height: 1.8; }
.p-site { display: inline-block; margin-top: 0.3rem; font-size: 0.55rem; line-height: 1.8; color: #a51c30; overflow-wrap: anywhere; }
a.p-site:hover { background: var(--navy); color: var(--cream); }
.tba { color: #7b84a8; }

/* ---------- Placeholder pages ---------- */
.sub-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem 1.25rem 6rem;
}
.sub-main h1 { color: #fff; text-shadow: 0.1em 0.1em 0 #3a4a8a; }

@media (prefers-reduced-motion: reduce) {
	.sh { animation: none; }
	.sh1 { opacity: 1; }
	.bldg { transition: none; }
	.bob, .dbob, .xla, .xlb, .fade, .fb, .pt, .sw { animation: none; }
	.p { display: none !important; }
	.fb { opacity: 0; }
	.fa { animation: none; opacity: 1; }
	.walk-l, .walk-r { animation: none; transform: translateX(var(--off, 0px)); }
}

/* ---------- Night mode (home page only): the moon/sun button sets <html data-time="night"> ---------- */
.tod {
	position: absolute; top: 1rem; right: 1.25rem; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 2.6rem; padding: 0;
	background: var(--cream); border: 3px solid var(--navy); box-shadow: 3px 3px 0 var(--navy);
}
.tod:hover { background: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
.tod:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--navy); }
.tod span { display: inline-flex; }
.tod-svg { display: block; image-rendering: pixelated; }
.tod-sun { display: none !important; }
:root[data-time="night"] .tod-moon { display: none !important; }
:root[data-time="night"] .tod-sun { display: inline-flex !important; }
.lit { display: none; }
:root[data-time="night"] .lit { display: inline; }
:root[data-time="night"] .dim { filter: url(#dim); }
/* the ground is just the page background: give it the same 45% blend towards deep blue as the filter above */
:root[data-time="night"] body.home { background: #34503f; background: color-mix(in srgb, var(--grass) 55%, #0e1640); }

/* ---------- Old-school pixel cursors: a classic arrow, and a pointing hand over anything clickable ---------- */
/* (2 CSS px per art pixel, plus a 4x copy for sharp high-density screens; hotspots: the arrow tip and the fingertip) */
html, body { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAkCAYAAACTz/ouAAAAbElEQVR42uXXuw0AIAgEUEewchj330tjYUNi/MFxRpIr4ZVAiCmXlmBVMMAMggG91CE4oA65AWqQO3AN0QDHEB2wDdECyxA9MIWeAYYQHSBX7Cx+gNoiggNywDUEA0YN7wBm54058M8FSPtPVLba6JVlCmyrAAAAAElFTkSuQmCC") 0 0, default; cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAkCAYAAACTz/ouAAAAbElEQVR42uXXuw0AIAgEUEewchj330tjYUNi/MFxRpIr4ZVAiCmXlmBVMMAMggG91CE4oA65AWqQO3AN0QDHEB2wDdECyxA9MIWeAYYQHSBX7Cx+gNoiggNywDUEA0YN7wBm54058M8FSPtPVLba6JVlCmyrAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABICAYAAACwc3YrAAAAmElEQVR42u3auQ2AQAxFQUogohj67wtSRILQHrZXY8kFTPzfth/n9fyt2gEAdAaUAwEAdAa8Lz0IAGAwID0IAGAyIB0IACAYEA4CAEgGmA4CAEgOGA4CACgG6A4CACgOaAYBACwG+A0CAEgO+BoRWx8AYDYg3SACABA8dIeDAACCgycAgNUA5eIRAAABFQBAqS5VHQ+QDHADlCKifr+zCdcAAAAASUVORK5CYII=") 2x) 0 0, default; cursor: image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAkCAYAAACTz/ouAAAAbElEQVR42uXXuw0AIAgEUEewchj330tjYUNi/MFxRpIr4ZVAiCmXlmBVMMAMggG91CE4oA65AWqQO3AN0QDHEB2wDdECyxA9MIWeAYYQHSBX7Cx+gNoiggNywDUEA0YN7wBm54058M8FSPtPVLba6JVlCmyrAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABICAYAAACwc3YrAAAAmElEQVR42u3auQ2AQAxFQUogohj67wtSRILQHrZXY8kFTPzfth/n9fyt2gEAdAaUAwEAdAa8Lz0IAGAwID0IAGAyIB0IACAYEA4CAEgGmA4CAEgOGA4CACgG6A4CACgOaAYBACwG+A0CAEgO+BoRWx8AYDYg3SACABA8dIeDAACCgycAgNUA5eIRAAABFQBAqS5VHQ+QDHADlCKifr+zCdcAAAAASUVORK5CYII=") 2x) 0 0, default; }
a, a *, button, button *, .campus, .campus *, [role="button"], summary, label[for], select { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAAaklEQVR42mNgIAAExKz+I2MGegG6WwyzCB3Q3AGjFo9aPGAW0yybDVqLaeYgulmMSyOpFpOcGOluMakGkQswHDDoLKY2GDwW08sBoxYPvMW0cgDJReeoxTS3mFoOoHp9PGoxzSymFA86iwE0Ufcnjdr7vAAAAABJRU5ErkJggg==") 9 0, pointer; cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAAaklEQVR42mNgIAAExKz+I2MGegG6WwyzCB3Q3AGjFo9aPGAW0yybDVqLaeYgulmMSyOpFpOcGOluMakGkQswHDDoLKY2GDwW08sBoxYPvMW0cgDJReeoxTS3mFoOoHp9PGoxzSymFA86iwE0Ufcnjdr7vAAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAYAAABGHBTIAAAAlElEQVR42u3Zyw2AIBAFQErwZDH235d2IDFmYRfmJXuGeSc+rf3McV7327TVAgy8GLCX8gUAAwMDAwMDAwMDJwGXu2wAAwPXLggYuBj464LR4PCDDTBwcXD0hkanWwAw8Obg7AEG3g28WgHAwMDAwMCVwdUKCH/UAwYGBgYGngjOVkD630NgYGBgYOCB4NkDDLw5+AGuANzGeIXZVAAAAABJRU5ErkJggg==") 2x) 9 0, pointer; cursor: image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAAaklEQVR42mNgIAAExKz+I2MGegG6WwyzCB3Q3AGjFo9aPGAW0yybDVqLaeYgulmMSyOpFpOcGOluMakGkQswHDDoLKY2GDwW08sBoxYPvMW0cgDJReeoxTS3mFoOoHp9PGoxzSymFA86iwE0Ufcnjdr7vAAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAYAAABGHBTIAAAAlElEQVR42u3Zyw2AIBAFQErwZDH235d2IDFmYRfmJXuGeSc+rf3McV7327TVAgy8GLCX8gUAAwMDAwMDAwMDJwGXu2wAAwPXLggYuBj464LR4PCDDTBwcXD0hkanWwAw8Obg7AEG3g28WgHAwMDAwMCVwdUKCH/UAwYGBgYGngjOVkD630NgYGBgYOCB4NkDDLw5+AGuANzGeIXZVAAAAABJRU5ErkJggg==") 2x) 9 0, pointer; }

/* ---------- easter egg figures (menu.js): desktop only ---------- */
#egg-walk, #egg-swim { pointer-events: none; }
.compact #egg-walk, .compact #egg-swim { display: none; }
.egg-pop { animation: eggpop 0.4s steps(1, end) forwards; }
@keyframes eggpop { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .egg-pop { animation: none; opacity: 0; } }

/* skip link: off-screen until it gets keyboard focus */
.skip-link {
	position: absolute; left: 1rem; top: -6rem; z-index: 100; padding: 0.6rem 0.9rem; font-size: 0.65rem;
	color: var(--navy); background: var(--cream); text-decoration: none;
	border: 3px solid var(--navy); box-shadow: 3px 3px 0 #3a4a8a;
}
.skip-link:focus { top: 1rem; }