/* Cubiculum: shared look. Calm, dark, gold. The liturgical season changes only the accents (--season*), never the whole page. */
:root {
  --void: #12100E; --crypt: #1A1713; --deep: #0D0B09; --rule: #2A251E; --line: #6F6756;
  --bone: #EFE6D4; --bone-dim: #B3A892; --soft: #CFC5AF; --muted: #9A9079;
  --gold: #D4AF5A; --gold-hi: #E8C87A; --on-gold: #1A1208;
  /* the season: set from /api/calendar/today by common.js */
  /* common.js writes the day's own colours to --s-* and --c-*; a tone (tone.css) may restyle them, so the two are kept apart */
  --season: var(--s-fill, #386030); --season-text: var(--s-text, #6fa664); --on-season: var(--s-on, #dcd2b8);
  /* votive candle glass: set per season too */
  --cb: var(--c-body, #8d1b12); --cc: var(--c-bright, #b32a1c);
  /* the tone of the page: tone.css changes these per season (surfaces, edges, atmosphere, weight of the headings) */
  --r: 10px; --rb: 6px; --hw: 500; --hls: 0; --hour-line: #4A4336; --hour-now: #2A2214; --atmos: none;
  /* the Orare styles were written for the portal; these map its names onto this site's type and colours */
  --f-head: 'Cormorant Garamond', Georgia, serif; --f-black: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'EB Garamond', Georgia, serif; --f-data: 'EB Garamond', Georgia, serif;
  --acc: var(--gold); --ok: #7f9a4a; --warn: #d09a2c; --bad: #c0392b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--void); }
body { margin: 0; background: var(--atmos), var(--void); background-attachment: fixed; transition: background-color .6s ease, color .6s ease; color: var(--bone); font-family: 'EB Garamond', Georgia, serif; font-size: 19px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
.disp { font-family: 'Cormorant Garamond', Georgia, serif; }
a { color: var(--gold); } a:hover { color: var(--gold-hi); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* the season shows as a thin rule at the very top, and in small details */
.seasonbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; background: var(--season); z-index: 20; transition: background 1.2s ease; box-shadow: 0 0 10px color-mix(in srgb, var(--season) 70%, transparent); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px 64px; }
.top { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding: 14px 0; border-bottom: 1px solid var(--rule);
  background: var(--void); box-shadow: 0 0 0 100vmax var(--void); clip-path: inset(0 -100vmax); }
html { scroll-padding-top: 104px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--bone); text-decoration: none; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; letter-spacing: 0.06em; }
.brand:hover { color: var(--bone); }
nav.main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 17px; }
nav.main a, nav.main button.link { min-height: 44px; display: flex; align-items: center; color: var(--bone-dim); text-decoration: none; background: none; border: none; padding: 0; font-size: 17px; cursor: pointer; border-bottom: 2px solid transparent; }
nav.main a:hover, nav.main button.link:hover { color: var(--bone); }
nav.main a.on { color: var(--bone); border-bottom-color: var(--season); }
.avatar { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 22px; color: var(--bone); background: transparent; font: inherit; font-size: 18px; text-decoration: none; cursor: pointer; padding: 0; }
.avatar:hover, .avatar[aria-expanded="true"] { border-color: var(--season); color: var(--bone); }
/* the account control: your initial, and the small menu under it */
.acct { position: relative; display: flex; align-items: center; margin-left: -8px; }
.acct a.signin { min-height: 44px; display: flex; align-items: center; color: var(--bone-dim); text-decoration: none; font-size: 17px; }
.acct a.signin:hover { color: var(--bone); }
.acctmenu { position: fixed; z-index: 60; min-width: 240px; padding: 8px; background: var(--crypt); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.acctmenu[hidden] { display: none; }
.acctmenu .who { display: flex; flex-direction: column; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); min-width: 0; }
.acctmenu .who b { font-weight: 500; font-size: 18px; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acctmenu .who span { font-size: 14px; color: var(--bone-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acctmenu a, .acctmenu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; background: none; border: none; border-radius: 4px; color: var(--bone); font: inherit; font-size: 17px; text-align: left; text-decoration: none; cursor: pointer; }
.acctmenu a:hover, .acctmenu button:hover, .acctmenu a:focus-visible, .acctmenu button:focus-visible { background: var(--deep); color: var(--gold); outline: none; }

.eyebrow { font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.card { background: var(--crypt); border: 1px solid var(--rule); border-radius: var(--r); padding: 32px; min-width: 0; }
.card.dark { background: var(--deep); }
.card.lit { border-top: 3px solid var(--season); }
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: var(--hw); letter-spacing: var(--hls); margin: 0; }
h2 { font-size: 44px; line-height: 1.1; }
.row { display: flex; flex-wrap: wrap; gap: 20px; }
.row > * { flex: 1 1 320px; }
.section { padding-top: 72px; }
.sub { color: var(--bone-dim); }

.btn { min-height: 52px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); border: 1px solid var(--gold); border-radius: var(--rb); color: var(--on-gold); text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; }
.btn:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--on-gold); }
.btn.ghost { background: transparent; color: var(--gold); }
.btn.ghost:hover { background: transparent; color: var(--gold-hi); border-color: var(--gold-hi); }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--bone); letter-spacing: 0.08em; text-transform: none; font-size: 16px; }
.btn.sm { min-height: 44px; padding: 0 20px; font-size: 14px; }

/* season chip */
.chip { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--season-text); box-shadow: 0 0 8px var(--season); display: inline-block; }

/* the Hours */
.hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.hour { padding: 20px 22px; border-radius: var(--r); background: var(--void); border: 1px solid var(--hour-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hour.done { background: var(--crypt); border-color: var(--rule); }
.hour.now { background: var(--hour-now); border-color: var(--gold); }
.hour .st { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); }
.hour.now .st { color: var(--gold); }
.hour .nm { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; line-height: 1.1; font-weight: 500; }
.hour .lt { font-size: 15px; color: var(--muted); font-style: italic; }
.hour .acts { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hour .acts a, .hour .acts button { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--rb); background: transparent; color: var(--bone); text-decoration: none; font-size: 15px; cursor: pointer; }
.hour .acts button.mark { border-color: var(--gold); color: var(--gold); }
.hour.now .acts button.mark { background: var(--gold); color: var(--on-gold); }
.hour.done .acts button.mark { border-color: var(--line); color: var(--bone-dim); }

/* the votive candles, one for each hour (the same ones the portal shows) */
.votives { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 26px; padding: 56px 24px 30px; background: var(--deep); border: 1px solid var(--rule); border-radius: 10px; }
.votives .vot { transform: scale(1.5); transform-origin: 50% 100%; margin: 0 10px 8px; }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 36px 0 24px; font-size: 16px; color: var(--muted); }
.motto { margin: 72px 0 0; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-style: italic; font-weight: 500; color: var(--bone-dim); }
.motto small { display: block; margin-top: 6px; font-size: 18px; font-style: normal; color: var(--muted); font-family: 'EB Garamond', Georgia, serif; }

@media (max-width: 640px) {
  body { font-size: 18px; }
  .wrap { padding: 0 16px 48px; }
  .card { padding: 24px; }
  h2 { font-size: 36px; }
  .section { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

@media (max-width: 640px) {
  html { scroll-padding-top: 120px; }
  .top { gap: 0 12px; padding: 10px 0 4px; }
  nav.main { flex-wrap: nowrap; overflow-x: auto; flex: 1 1 calc(100% - 64px); min-width: 0; gap: 4px 22px; scrollbar-width: none; order: 3; }
  .brand { order: 1; } .hdrvot { order: 2; } .acct { order: 4; margin-left: 0; }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a, nav.main button.link { white-space: nowrap; flex: none; }
}

/* the tall white candle: wax in white, the dish in the season's colour. Wick, flame, glow and smoke are the portal's own (orare.css).
   Used in the pinned header, under the Rosary, and as the prayer candle. */
.vot.tall, .o-votrow .vot, .o-candle .vot { width: 16px; height: 70px; }
.vot.tall::before, .o-votrow .vot::before, .o-candle .vot::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: -3px; height: 6px; border-radius: 50%; background: var(--dish, var(--season)); opacity: .9; box-shadow: 0 2px 5px rgba(0,0,0,.6); }
.vot.tall .glass, .o-votrow .vot .glass, .o-candle .vot .glass { height: 48px; border-radius: 3px 3px 2px 2px; background: linear-gradient(90deg, #7d745f 0%, #c9bfa6 24%, #f3ecda 48%, #cbc1a9 76%, #7a715c 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.6); filter: brightness(.6) saturate(.8); }
.vot.tall .glass::after, .o-votrow .vot .glass::after, .o-candle .vot .glass::after { background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.05)); }
.vot.tall.lit .glass, .o-votrow .vot.lit .glass, .o-candle .vot.lit .glass { filter: brightness(1.06); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 0 7px rgba(255,170,90,.55), 0 0 12px rgba(255,120,50,.35), 0 1px 2px rgba(0,0,0,.6); }
.vot.tall .wick, .o-votrow .vot .wick, .o-candle .vot .wick { bottom: 47px; height: 6px; }
.vot.tall .flame, .o-votrow .vot .flame, .o-candle .vot .flame { bottom: 52px; }
.vot.tall .halo, .o-votrow .vot .halo, .o-candle .vot .halo { bottom: 36px; }
.vot.tall .smk, .o-votrow .vot .smk, .o-candle .vot .smk { bottom: 54px; }

/* the season preview (common.js) */
.seasonpick { position: fixed; right: 16px; bottom: 16px; z-index: 40; font-family: 'EB Garamond', Georgia, serif; }
.seasonpick > button { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--crypt); color: var(--bone); border: 1px solid var(--line); border-radius: 22px; font-size: 15px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.seasonpick > button i { width: 10px; height: 10px; border-radius: 50%; background: var(--season-text); box-shadow: 0 0 8px var(--season); }
.seasonpick > button:hover { border-color: var(--gold); }
.seasonpick .sp-panel { position: absolute; right: 0; bottom: 54px; width: min(300px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; padding: 10px; background: var(--crypt); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.seasonpick .sp-panel h4 { margin: 4px 8px 8px; font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dim); }
.seasonpick .sp-opt { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: none; border: 0; border-radius: 6px; color: var(--bone); font-size: 17px; text-align: left; cursor: pointer; }
.seasonpick .sp-opt:hover { background: var(--deep); }
.seasonpick .sp-opt.on { color: var(--gold); }
.seasonpick .sp-opt small { margin-left: auto; font-size: 13px; color: var(--muted); }
.seasonpick .sw { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.seasonpick .sw b { width: 12px; height: 12px; border-radius: 50%; }
.seasonpick .sp-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 10px; }
.seasonpick .sp-chip { min-height: 36px; padding: 0 12px; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--bone); font: inherit; font-size: 15px; cursor: pointer; }
.seasonpick .sp-chip.on { border-color: var(--gold); color: var(--gold); }
.seasonpick .sp-panel h4:not(:first-child) { margin-top: 14px; }
.seasonpick input[type=range] { flex: 1 1 100%; accent-color: var(--gold); }
.seasonpick .sp-row small { flex: 1 1 100%; color: var(--muted); font-size: 13px; }

/* ---------- calm: quieter buttons, slower changes, a gentle arrival ---------- */
.btn { background: color-mix(in srgb, var(--gold) 80%, var(--crypt)); border-color: transparent; font-size: 18px; font-weight: 500; letter-spacing: .05em; text-transform: none; transition: background-color .45s ease, border-color .45s ease, color .45s ease; }
.btn:hover { background: var(--gold); border-color: transparent; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--bone); }
.btn.ghost:hover { background: transparent; border-color: var(--gold); color: var(--gold-hi); }
.btn.sm { font-size: 17px; }
.hour { padding: 20px 12px 20px 16px; }
.hour .nm { font-size: 21px; overflow-wrap: normal; }
.hour .acts a, .hour .acts button { transition: background-color .45s ease, border-color .45s ease, color .45s ease; }
.hour.now .acts button.mark { background: color-mix(in srgb, var(--gold) 80%, var(--crypt)); }
a.prayer { transition: border-color .6s ease, background-color .6s ease; }
.card.lit { border-top-width: 2px; }
nav.main a, nav.main button.link, .avatar { transition: color .4s ease, border-color .4s ease; }
.seasonpick > button { opacity: .5; transition: opacity .5s ease; }
.seasonpick:hover > button, .seasonpick:focus-within > button { opacity: 1; }
@keyframes calmIn { from { opacity: 0; } to { opacity: 1; } }
.wrap { animation: calmIn 1.2s ease backwards; }
@media (prefers-reduced-motion: reduce) { .wrap { animation: none; } }

/* when it is opened from the home screen, keep clear of the notch and the home bar */
.seasonpick { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.wrap { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 40px)); }
@media (max-width: 640px) { .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }

@media (max-width: 640px) { .top { row-gap: 14px; } }