body { padding-bottom: 40px; }
.page { max-width: 640px; margin: 0 auto; padding: 8px 20px 40px; }
.page h1 { font: 700 28px/1.25 var(--serif); color: var(--title); margin: 18px 0 14px; }
.page h2 { font: 700 18px/1.3 var(--sans); color: var(--title); margin: 28px 0 8px; }
.page p, .page li { color: #d1d1d6; font-size: 16px; line-height: 1.6; }
.page a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
/* A bar that stays at the top, so there is always a way back, even in a Home
   Screen web app with no browser controls. */
.pagebar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: rgba(0,0,0,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 3px double var(--gold); }
.pagebar .back-btn { color: var(--gold); font-size: 17px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.pagebar-name { text-align: center; color: #f4ecd6; font: 800 22px/1.1 "Playfair Display", Georgia, serif; text-decoration: none !important; white-space: nowrap; }
.back-foot { margin-top: 36px; text-align: center; }
.back-foot a { font-weight: 600; text-decoration: none !important; }
.updated { color: var(--muted) !important; font-size: 14px !important; }