/* Layout: one pinned night-blue stage. A real five-decade rosary lights bead by bead on scroll,
   the headline sits inside the loop, the loop blooms into Rosa Mystica, then the page drops into the site's light palette. */
.pwm{
  --night:#0c1828; --night-2:#14283f; --bead-off:#1e3552; --cord:#2b4769;
  --gold-hot:#f6e7bd; --gold-light:#dbc58e; --gold:#866526;
  --mist:#a3b3c6; --rose:#8c1c33;
  --dove:#f8f9f7; --paper:#ffffff; --navy:#182d48; --azure:#0072c6;
  --charcoal:#32363b; --muted:#5b626c; --line:#d8e3e9;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sky-hi:#fbfdfe; --sky:#eaf2f8; --sky-lo:#dceaf5;
  --warm:0;
}
/* --dusk steps up one fifth per finished decade (midnight → pre-dawn blue);
   --lift is the final break into pale sky as the rose opens */
@property --dusk{syntax:'<number>';inherits:true;initial-value:0}
.pwm-stage{
  --lift:0; --dusk:0;
  --dusk-hi:#2d5680; --dusk-lo:#1a3756; --mist-dusk:#c6d3e0;
  --bg-hi:color-mix(in srgb, var(--dusk-hi) calc(var(--dusk) * 100%), var(--night-2));
  --bg-lo:color-mix(in srgb, var(--dusk-lo) calc(var(--dusk) * 100%), var(--night));
  --mist-now:color-mix(in srgb, var(--mist-dusk) calc(var(--dusk) * 100%), var(--mist));
  --t-ink:color-mix(in srgb, var(--gold-hot) calc(100% - var(--lift) * 100%), var(--navy));
  --t-gold:color-mix(in srgb, var(--gold-light) calc(100% - var(--lift) * 100%), var(--gold));
  --t-mist:color-mix(in srgb, var(--mist-now) calc(100% - var(--lift) * 100%), var(--muted));
  transition:--dusk 1.8s ease-in-out;
}

/* ---------- intro ---------- */
.pwm{position:relative;height:400vh;background:var(--night);color:var(--gold-hot);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.pwm a{color:inherit}
.pwm :focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:2px}
.pwm-stage{
  position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgb(219 197 142 / calc(var(--warm) * 1)) 0%, transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, var(--bg-hi) 0%, var(--bg-lo) 70%);
}
/* the lightening: a pale sky that fades in over the night as the rose blooms */
.pwm-dawn{position:absolute;inset:0;opacity:var(--lift);pointer-events:none;
  background:radial-gradient(ellipse 85% 65% at 50% 40%, var(--sky-hi) 0%, var(--sky) 60%, var(--sky-lo) 100%)}
.pwm-bar,.pwm-cap,.pwm-fig{position:relative}
.pwm-bar{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0;box-sizing:border-box}
.pwm-brand{font-family:var(--serif);font-size:17px;text-decoration:none;color:var(--t-ink);display:flex;gap:8px;align-items:center;white-space:nowrap}
.pwm-brand .pwm-cross{color:var(--t-gold)}
.pwm-brand small{font-size:inherit;color:var(--t-mist)}
.pwm-nav{display:flex;gap:18px;font-size:14px}
.pwm-nav a{text-decoration:none;color:var(--t-mist)}
.pwm-nav a:hover{color:var(--t-ink)}

.pwm-cap{height:46px;margin-top:10px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:3px;padding-inline:16px}
.pwm-cap b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--t-gold);letter-spacing:.01em}
.pwm-cap i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mist);font-variant-numeric:tabular-nums}

.pwm-fig{
  position:relative;container-type:inline-size;flex:none;margin-top:4px;
  width:min(calc(100vw - 32px), calc((100svh - 120px) * 400 / 590));
  aspect-ratio:400/590;max-width:100%;
}
.pwm-fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.pwm-head{position:absolute;left:15%;width:70%;top:35.6%;transform:translateY(-50%);text-align:center;pointer-events:none}
.pwm-head h1{margin:0;font-family:var(--serif);font-weight:400;font-size:9.2cqw;line-height:1.02;letter-spacing:-.015em;color:var(--gold-hot);text-wrap:balance}
.pwm-for{margin-top:4.5cqw;font-family:var(--serif);font-style:italic;font-size:4.6cqw;color:var(--mist-now)}
.pwm-word{height:2.3em;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:7cqw;line-height:1.08;color:var(--gold-light);text-wrap:balance}
.pwm-word span{display:block;transition:transform .18s cubic-bezier(.2,.7,.2,1),opacity .18s,filter .18s}
.pwm-word span.out{transform:translateY(-40%);opacity:0;filter:blur(5px)}
.pwm-word span.in{transform:translateY(40%);opacity:0;filter:blur(5px);transition:none}

.pwm-out{position:absolute;left:6%;width:88%;top:66%;text-align:center;opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2.2cqw}
.pwm-out.on{pointer-events:auto}
.pwm-out .kick{font-size:3cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--t-gold)}
.pwm-out .latin{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:8.4cqw;line-height:1.05;color:var(--t-ink)}
.pwm-out .eng{font-family:var(--serif);font-size:4.2cqw;color:var(--t-mist)}
.pwm-go{margin-top:2.5cqw;display:inline-flex;align-items:center;gap:2.4cqw;font-size:max(14px,3.9cqw);text-decoration:none;color:var(--t-ink);padding-bottom:4px;border-bottom:1px solid var(--gold)}
.pwm-go::before{content:"";width:2.6cqw;height:2.6cqw;min-width:9px;min-height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hot),var(--gold-light) 55%,var(--gold));box-shadow:0 0 10px rgb(219 197 142 / .8)}
.pwm-go:hover{border-color:var(--azure);color:var(--azure)}

/* skip + replay */
.pwm.pwm-brief{height:100vh;height:100svh}
.pwm-skip{position:absolute;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--t-mist);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .3s}
.pwm-skip:hover{color:var(--t-ink)}
.pwm-stage.done .pwm-skip,.pwm-brief .pwm-skip{opacity:0;pointer-events:none}
.pwm-again{display:none;margin-top:1cqw;background:none;border:0;padding:4px 2px;font:inherit;font-size:max(13px,3.2cqw);color:var(--t-mist);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pwm-again:hover{color:var(--t-ink)}
.pwm-brief .pwm-again{display:inline-block}

/* svg parts */
.pwm .cord{stroke:var(--cord);stroke-width:1.1;transition:stroke .5s}
.pwm .cord.on{stroke:var(--gold)}
.pwm .bead .off{fill:var(--bead-off);stroke:#2f4d70;stroke-width:.7}
.pwm .bead .on{fill:url(#lit);opacity:0;transition:opacity .2s}
.pwm .bead .halo{fill:url(#halo);opacity:0;transition:opacity .7s;transform-box:fill-box;transform-origin:center}
.pwm .bead.lit .on{opacity:1}
.pwm .bead.lit .halo{opacity:.32}
.pwm .bead.now .halo{opacity:1;animation:pwmBreathe 2.4s ease-in-out infinite}
@keyframes pwmBreathe{50%{transform:scale(1.25)}}
.pwm .load .off{animation:pwmAppear .9s both}
@keyframes pwmAppear{from{opacity:0}}

@media (max-width:760px){.pwm-nav{gap:14px}}
@media (max-width:360px){.pwm-brand small{display:none}}
@media (prefers-reduced-motion:reduce){
  .pwm-word span,.pwm .bead .on,.pwm .bead .halo,.pwm .cord,.pwm-stage{transition:none}
  .pwm .bead.now .halo{animation:none}
  .pwm .load .off{animation:none}
}

.pwm-more{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.pwm-more a{font-size:max(13px,3.2cqw);color:var(--t-mist);text-underline-offset:3px}

/* Keep the current site navigation and immediate prayer choices available. */
.home-intro-page>header{display:none}
.home-intro-page #main{background:linear-gradient(#dceaf5,#f8f9f7 260px)}
.pwm-bar{flex-wrap:wrap;flex-shrink:0;justify-content:space-between;padding-top:8px;min-height:58px}
.pwm-nav{flex-wrap:wrap;justify-content:center;gap:4px 12px}
.pwm-nav a,.pwm-nav button{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.pwm-nav button{border:1px solid var(--t-mist);border-radius:24px;padding:7px 12px;background:transparent;color:var(--t-ink);font:inherit;font-size:12px}
.pwm-fig{width:min(calc(100vw - 32px),calc((100svh - 245px) * 400 / 590));margin-bottom:0}
.pwm-entry{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin:auto 16px 50px;z-index:1}
.pwm-entry a{font-size:14px;color:var(--t-ink);min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-underline-offset:5px}
.pwm-entry .pwm-primary{padding:10px 20px;border:1px solid var(--t-gold);border-radius:25px;text-decoration:none;background:rgb(255 255 255 / .04)}
.pwm-entry .pwm-primary:hover{background:rgb(219 197 142 / .15)}
.pwm-skip{min-height:44px;display:flex;align-items:center;justify-content:center;padding:4px 10px;bottom:6px;border-bottom:0;text-decoration:underline;text-underline-offset:4px}
.pwm-skip[hidden],.pwm-again[hidden]{display:none!important}
.pwm-go{min-height:44px;margin-top:0}
.pwm-again{min-height:44px}
.pwm-cap{flex-shrink:0;min-height:46px;height:auto;margin-top:4px}
.pwm-cap i{max-width:60ch;line-height:1.6}
.pwm-bar,.pwm-entry{flex-shrink:0}
.pwm :focus-visible{outline-color:var(--t-ink)}
.pwm:not(.pwm-ready){height:100svh;min-height:650px}
.pwm:not(.pwm-ready) .pwm-stage{--lift:1;position:relative;min-height:650px}
.pwm:not(.pwm-ready) .pwm-head{opacity:0}
.pwm:not(.pwm-ready) .pwm-out{opacity:1;pointer-events:auto}
.pwm:not(.pwm-ready) #ring{display:none}
.pwm:not(.pwm-ready) .pwm-skip{display:none}
.pwm-out[aria-hidden=true]{visibility:hidden}
#home-content{scroll-margin-top:0;outline-offset:-4px}
@media(max-width:650px){.pwm-bar{justify-content:center;gap:0;padding-inline:12px}.pwm-brand{width:100%;justify-content:center;font-size:17px}.pwm-nav{font-size:13px;gap:0 16px}.pwm-nav button{font-size:12px;padding:6px 10px;min-height:40px}.pwm-fig{width:min(calc(100vw - 30px),calc((100svh - 260px) * 400 / 590))}.pwm-entry{gap:4px 15px;margin-bottom:48px}.pwm-entry a{font-size:13px}.pwm-cap b{font-size:13px}.pwm-cap i{font-size:10px;letter-spacing:.08em}.pwm-out{gap:1cqw}}
@media(max-height:600px){.pwm.pwm-brief,.pwm:not(.pwm-ready){height:auto;min-height:650px}.pwm-stage{position:relative;height:auto;min-height:650px}.pwm-fig{width:min(290px,90vw)}.pwm-entry{margin:10px 16px 22px}}
@media(prefers-reduced-motion:reduce){.pwm{height:100svh;min-height:650px}.pwm-stage{position:relative;min-height:650px}.pwm-again{display:none!important}.pwm-skip{display:none}}
@media print{.home-intro-page>header{display:none}.pwm{height:auto!important;background:white!important;min-height:0!important;color:#111}.pwm-stage{height:auto!important;min-height:0!important;position:relative;background:white}.pwm-bar,.pwm-cap,.pwm-fig,.pwm-entry,.pwm-skip{display:none!important}.pwm:after{content:"Praying with Mary. A quiet moment. A timeless prayer.";display:block;color:#111;padding:1rem;font:22pt Georgia,serif}.home-intro-page #main{background:white}}