:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; color: #3d3544; background: #fbf7f1; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 95% 0, #efe7f280, transparent 48%), radial-gradient(ellipse at 0 38%, #fae9e580, transparent 45%); }
.school { width: min(100% - 64px, 1056px); margin: 0 auto; padding: 32px 0 24px; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 35px; font-family: Georgia, serif; font-size: 23px; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; height: 32px; width: 32px; border-radius: 11px 11px 4px 11px; background: #e7dce9; color: #5d476a; font-size: 25px; font-style: italic; }
.eyebrow { color: #715d72; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 13px; line-height: 1.6; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.15; font-weight: 400; letter-spacing: -.035em; margin: 0; }
.intro { color: #6d606c; font-size: 16px; line-height: 1.6; margin: 14px 0 29px; }
.sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 26px; }
.site-card { display: flex; flex-direction: column; min-height: 235px; padding: 25px 28px 22px; color: #3d3544; border: 1px solid #e9d8d5; border-radius: 22px; text-decoration: none; background: #f5e8e3; box-shadow: 0 5px 18px #57465c06; transition: box-shadow .18s ease, border-color .18s ease; }
.math { background: #ede7f3; border-color: #e1d8ec; }
.site-card:hover { border-color: #8a6a88; box-shadow: 0 6px 20px #57465c14; }
.site-card:focus-visible { outline: 4px solid #634c7e; outline-offset: 5px; }
.motif { width: 49px; height: 49px; display: grid; place-items: center; background: #fff9f2b3; color: #805951; border-radius: 15px; margin-bottom: 17px; }
.math .motif { color: #685582; background: #faf6ffb3; }
.motif svg { width: 32px; height: 32px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-card h2 { margin: 0 0 7px; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.description { margin: 0 0 19px; color: #6a5862; font-size: 14px; line-height: 1.5; }
.card-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 12px; font-weight: 600; color: #594951; }
.card-action > span { font-size: 23px; line-height: 1; }
.verse-card { border-radius: 22px; overflow: hidden; color: #fff; background: linear-gradient(90deg, #242233bc, #242233b3), url('/assets/morning-lake.png') center 54% / cover; box-shadow: 0 7px 22px #57465c10; }
.verse-content { padding: 29px 36px 26px; min-height: 232px; }
.verse-card h2 { font-family: "Segoe UI", Arial, sans-serif; font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: .2em; margin: 0 0 17px; }
.verse-text { max-width: 920px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 2.7vw, 34px); font-weight: 400; line-height: 1.4; margin: 0 0 17px; overflow-wrap: anywhere; }
.verse-reference { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .015em; line-height: 1.6; }
.verse-note { margin: 7px 0 0; font-size: 12px; line-height: 1.6; }
.verse-attribution { margin: 12px 0 0; font-size: 10px; line-height: 1.5; max-width: 840px; }
.verse-note:empty, .verse-attribution:empty, .verse-reference:empty { display: none; }
footer { text-align: center; color: #736773; font-size: 11px; letter-spacing: .035em; margin-top: 21px; line-height: 1.5; }
@media (max-width: 680px) { .school { width: min(100% - 36px, 480px); padding-top: 23px; } .brand { margin-bottom: 30px; } .sites { grid-template-columns: 1fr; gap: 18px; } .site-card { min-height: 225px; padding: 24px; } .verse-content { padding: 27px 24px; } }
@media (prefers-reduced-motion: reduce) { .site-card { transition: none; } }
@media (forced-colors: active) { .site-card, .verse-card { border: 2px solid CanvasText; } .site-card:focus-visible { outline-color: Highlight; } .verse-card { background: Canvas; color: CanvasText; } }