:root{
  --burg:#5b1f33; --burg-deep:#37121f; --burg-mid:#7a2b45;
  --gold:#b9922f; --gold-l:#e6c989; --gold-soft:#d8b876;
  --paper:#fbf6ec; --paper-2:#fffdf8; --ink:#33262e; --muted:#7a6a64; --line:#e6d6b8;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Gentium Plus","GFS Didot",Georgia,serif; font-size:19px; line-height:1.85; -webkit-font-smoothing:antialiased;}
#progress{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-l)); z-index:60; transition:width .1s ease;}
.backbar{position:fixed; top:14px; left:14px; z-index:55;}
.backbar a{display:inline-flex; align-items:center; gap:7px; text-decoration:none; background:rgba(55,18,31,.55); color:var(--gold-l);
  backdrop-filter:blur(6px); padding:8px 14px; border-radius:30px; font-family:"Cormorant Garamond",serif; font-size:15px;
  border:1px solid rgba(230,201,137,.35); transition:.25s;}
.backbar a:hover{background:rgba(55,18,31,.85);}
.hero{position:relative; min-height:74vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 12%, #6a2740 0%, var(--burg) 42%, var(--burg-deep) 100%); color:var(--paper-2); padding:76px 22px 60px;}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(closest-side, rgba(230,201,137,.14), transparent 70%) 50% 32%/820px 820px no-repeat; pointer-events:none;}
.rays{position:absolute; top:-10%; left:50%; width:140vmax; height:140vmax; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(230,201,137,.06) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask:radial-gradient(closest-side, #000 0%, transparent 62%); mask:radial-gradient(closest-side, #000 0%, transparent 62%);
  animation:spin 140s linear infinite; opacity:.7;}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg);}}
.cross{font-size:32px; color:var(--gold-l); opacity:.92; margin-bottom:10px; text-shadow:0 0 22px rgba(230,201,137,.55);}
.eyebrow{font-family:"Cormorant SC","Cormorant Garamond",serif; letter-spacing:6px; font-size:13px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px;}
.hero h1{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:clamp(36px,7vw,68px); line-height:1.05; margin:.1em 0 .35em; color:#fff; letter-spacing:1px; text-shadow:0 2px 30px rgba(0,0,0,.35);}
.hero .sub{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:clamp(18px,2.6vw,24px); color:var(--gold-l); max-width:660px; margin:0 auto;}
.scrollcue{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:var(--gold-l); font-family:"Cormorant SC","Cormorant Garamond",serif; font-size:12px; letter-spacing:3px; opacity:.85;}
.scrollcue span{display:block; font-size:22px; animation:bob 2s ease-in-out infinite; margin-top:2px;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
.wrap{max-width:780px; margin:0 auto; padding:64px 26px 30px;}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}
p.body{margin:0 0 22px; text-align:justify; hyphens:auto;}
.greeting{font-family:"Cormorant Garamond",serif; font-size:27px; color:var(--burg); font-style:italic; margin:26px 0 6px;}
.rule{width:70px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin:0 0 24px;}
.divider{display:flex; align-items:center; justify-content:center; gap:16px; margin:32px 0; color:var(--gold);}
.divider::before,.divider::after{content:""; height:1px; width:90px; background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.divider span{font-size:18px;}
/* numbered guidance cards */
.guide{list-style:none; margin:0; padding:0; counter-reset:g;}
.guide li{position:relative; counter-increment:g; background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:14px; padding:22px 24px 22px 74px; margin:0 0 18px; box-shadow:0 6px 18px rgba(90,30,50,.05);}
.guide li::before{content:counter(g); position:absolute; left:20px; top:20px; width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #7a2b45, var(--burg)); color:var(--gold-l); font-family:"Cormorant Garamond",serif; font-weight:600;
  font-size:21px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(55,18,31,.28);}
.guide li p{margin:0; text-align:justify;}
.guide li .note{display:block; margin-top:8px; font-size:15px; color:var(--muted); font-style:italic;}
/* lettered liturgical sections */
.leg{margin:26px 0 0;}
.leg .step{position:relative; padding:4px 0 20px 60px; border-left:2px solid var(--line); margin-left:20px;}
.leg .step:last-child{border-left-color:transparent;}
.leg .step .mark{position:absolute; left:-21px; top:0; width:40px; height:40px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #7a2b45, var(--burg)); color:var(--gold-l); font-family:"Cormorant Garamond",serif; font-weight:600;
  font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(55,18,31,.25);}
.leg .step h3{margin:2px 0 6px; font-family:"Cormorant Garamond",serif; color:var(--burg); font-size:23px; font-weight:600;}
.leg .step p{margin:0; text-align:justify;}
/* footnote refs */
.fnref{font-size:.62em; vertical-align:super; line-height:0;}
.fnref a{color:var(--gold); text-decoration:none; font-weight:700; padding:0 2px; border-bottom:1px dotted var(--gold);}
.fnref a:hover{color:var(--burg-mid);}
.fnref-target{scroll-margin-top:80px;}
.notes{max-width:780px; margin:40px auto 0; padding:22px 26px 0; border-top:1px solid var(--line);}
.notes h4{font-family:"Cormorant SC","Cormorant Garamond",serif; letter-spacing:3px; text-transform:uppercase; font-size:13px; color:var(--muted); margin:0 0 10px;}
.notes ol{margin:0; padding-left:20px;}
.notes li{font-size:15px; color:var(--muted); line-height:1.6; scroll-margin-top:80px; margin-bottom:6px;}
.notes li a.back{color:var(--gold); text-decoration:none; margin-left:6px; font-weight:700;}
.notes li:target{background:rgba(230,201,137,.22); border-radius:6px; padding:2px 8px;}
.benediction{margin:26px auto 0; max-width:780px; padding:0 26px;}
.benediction .card{position:relative; text-align:center; color:var(--paper-2);
  background:radial-gradient(120% 120% at 50% 0%, #6a2740, var(--burg) 55%, var(--burg-deep)); border-radius:20px; padding:44px 34px; overflow:hidden; box-shadow:0 20px 50px rgba(55,18,31,.28);}
.benediction .card::before{content:"\2723"; position:absolute; top:14px; left:0; right:0; text-align:center; color:var(--gold-l); font-size:20px; opacity:.7;}
.benediction .verse{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:clamp(21px,3.6vw,30px); line-height:1.45; color:#fff; margin:8px 0 0;}
.benediction .verse b{color:var(--gold-l); font-style:normal; font-weight:600;}
.sig{max-width:780px; margin:28px auto 0; padding:0 26px; text-align:right; color:var(--burg-mid); font-family:"Cormorant Garamond",serif; font-style:italic; font-size:20px;}
.pagefoot{text-align:center; color:var(--muted); font-size:13px; padding:30px 20px 44px; font-family:"Cormorant Garamond",serif;}
.pagefoot .x{color:var(--gold);}
#totop{position:fixed; right:18px; bottom:18px; z-index:55; width:46px; height:46px; border-radius:50%; background:var(--burg); color:var(--gold-l);
  border:1px solid var(--gold-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:0; transform:translateY(12px); transition:.3s; box-shadow:0 8px 22px rgba(55,18,31,.3);}
#totop.show{opacity:1; transform:none;}
#totop:hover{background:var(--burg-mid);}
@media (max-width:560px){ body{font-size:17.5px;} .wrap{padding:48px 20px 24px;} .guide li{padding:20px 18px 20px 66px;} }