/* Museum of the Saints: home page (lobby and halls). Same palette and type as the exhibit. */
:root{
  --navy:#0D1627; --navy-2:#121D33; --navy-3:#1A2844; --navy-4:#24355A;
  --gold:#D4AF37; --gold-soft:#E7CB6B; --gold-deep:#9C7C1E;
  --parchment:#F4ECDD; --stone:#E9E0CF; --stone-2:#D8CBB2; --stone-3:#B9A888; --ink:#1F1A13; --ink-2:#4A4031;
  --mist:#C9CFDB; --mist-2:#9AA4B8;
  --serif:'Cormorant Garamond','Cormorant',Garamond,Georgia,'Times New Roman',serif;
  --display:'Cinzel','Trajan Pro','Times New Roman',serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--parchment);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--gold);color:var(--navy);padding:8px 14px;border-radius:6px}
.skip:focus{left:12px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* header */
.top{position:fixed;inset:0 0 auto 0;height:64px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,36px);background:linear-gradient(180deg,rgba(7,12,23,.85),rgba(7,12,23,0));transition:background .4s}
.top.scrolled{background:rgba(9,15,28,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(212,175,55,.25)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--parchment);font-family:var(--display);letter-spacing:.12em;font-size:14px;text-transform:uppercase;white-space:nowrap}
.brand svg{width:28px;height:28px}
.top-nav{display:flex;gap:22px}
.top-nav a{font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--mist)}
.top-nav a:hover{color:var(--gold-soft)}

/* lobby */
.lobby{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:90px 20px 70px;background:radial-gradient(ellipse at 50% 30%,#1B2A4A 0%,var(--navy) 58%,#060A14 100%)}
.vault{position:absolute;inset:0;width:100%;height:100%}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lobby-copy{position:relative;z-index:2;text-align:center;max-width:820px;animation:rise 1.4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.lobby h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,7vw,92px);line-height:1.04;letter-spacing:.06em;margin:0;color:#FBF4E2;text-shadow:0 0 40px rgba(212,175,55,.25)}
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px auto;color:var(--gold)}
.rule span{display:block;width:min(120px,22vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule span:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
.rule svg{width:20px;height:20px}
.welcome{font-size:clamp(19px,2.1vw,24px);font-style:italic;color:var(--mist);max-width:640px;margin:0 auto 34px}
.btn-gold{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;background:linear-gradient(180deg,#E7CB6B,#C79F2C);color:var(--navy);font-family:var(--display);font-size:13px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;font-weight:600;box-shadow:0 10px 30px rgba(212,175,55,.3);transition:transform .3s var(--ease),box-shadow .3s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(212,175,55,.45)}
.btn-gold svg{width:18px;height:18px}

/* halls */
.halls{position:relative;padding:clamp(70px,9vw,120px) clamp(16px,4vw,48px) clamp(60px,8vw,100px);background:
  radial-gradient(ellipse at 50% 0%,rgba(36,53,90,.7),transparent 60%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 70px),
  linear-gradient(180deg,#0B1322,#0D1627 40%,#0A1120)}
.halls-head{text-align:center;max-width:720px;margin:0 auto clamp(40px,6vw,64px)}
.halls-head h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,52px);letter-spacing:.08em;margin:0 0 8px;color:var(--gold-soft)}
.lede{font-style:italic;color:var(--mist);margin:0;font-size:21px}
.feast-month{margin:18px auto 0;display:inline-block;text-wrap:balance;max-width:680px;padding:8px 18px;border:1px solid rgba(212,175,55,.35);border-radius:999px;font-size:17px;color:var(--parchment);background:rgba(13,22,39,.6)}
.feast-month b{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-right:8px}

.niches{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px) clamp(18px,2.6vw,38px)}
.niche{position:relative;display:flex}
.niche>.niche-link{flex:1}
.niche-link .plaque{flex:1;justify-content:flex-start}
.plaque .cta{margin-top:auto!important}
.plaque .feast{margin-bottom:10px}
.niche-link{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;cursor:pointer;text-align:center;border-radius:200px 200px 14px 14px;transition:transform .5s var(--ease)}
.niche-link:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.arch{position:relative;display:block;width:100%;aspect-ratio:4/4.3;border-radius:999px 999px 6px 6px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 26%,#22335A 0%,#152341 45%,#0A1222 100%);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.45),inset 0 0 0 9px #1A2742,inset 0 0 0 10px rgba(212,175,55,.28),inset 0 30px 60px rgba(0,0,0,.45),0 24px 50px rgba(0,0,0,.4)}
.arch::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:10px;background:linear-gradient(180deg,#B9A888,#8F7F61);border-radius:2px 2px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.2) inset}
.emblem{position:absolute;inset:6% 10% 8%;width:80%;height:86%;color:var(--gold);transition:transform .6s var(--ease),filter .6s}
.emblem .halo{fill:none;stroke:var(--gold);stroke-opacity:.45;stroke-width:1.4;stroke-dasharray:2 5}
.emblem .ln{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.emblem .knots{fill:#0D1627}
.emblem .ln.thin{stroke-width:1.2;stroke-opacity:.55}
.emblem .fill,.emblem .dot{fill:currentColor}
.emblem .beads{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:0 10.4;opacity:.8}
.emblem .sari{fill:none;stroke:#4A78D0;stroke-linecap:round}
.glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 18%,rgba(255,233,168,.38),rgba(212,175,55,.08) 45%,transparent 70%);opacity:.45;transition:opacity .6s var(--ease)}
.plaque{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-4px;width:86%;padding:16px 14px 14px;border-radius:4px;color:var(--ink);
  background:linear-gradient(180deg,#F6EEDC,#E6D9BE);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(156,124,30,.45),0 14px 28px rgba(0,0,0,.35)}
.plaque .name{font-family:var(--display);font-weight:600;font-size:clamp(14px,1.35vw,17px);letter-spacing:.08em;line-height:1.3}
.plaque .alt{font-style:italic;font-size:16px;color:var(--ink-2);margin-top:-2px}
.plaque .meta{font-family:var(--display);font-size:12px;letter-spacing:.18em;color:var(--gold-deep);margin-top:4px}
.plaque .feast{font-style:italic;font-size:16px;color:var(--ink-2)}
.plaque .cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a1b25;font-weight:600}
.plaque .cta svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.plaque .cta.soon{color:#6d6250;font-weight:400;border-top:1px solid rgba(156,124,30,.35);padding-top:8px}
.badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--navy);background:var(--gold-soft);padding:4px 10px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* open hall: light spills from the niche, slight lift */
.niche.open .niche-link:hover,.niche.open .niche-link:focus-visible{transform:translateY(-8px)}
.niche.open .niche-link:hover .glow,.niche.open .niche-link:focus-visible .glow{opacity:1}
.niche.open .niche-link:hover .emblem,.niche.open .niche-link:focus-visible .emblem{transform:scale(1.04);filter:drop-shadow(0 0 10px rgba(231,203,107,.6))}
.niche.open .niche-link:hover .arch,.niche.open .niche-link:focus-visible .arch{box-shadow:inset 0 0 0 1px rgba(231,203,107,.9),inset 0 0 0 9px #1A2742,inset 0 0 0 10px rgba(231,203,107,.55),inset 0 30px 60px rgba(0,0,0,.3),0 30px 60px rgba(0,0,0,.45),0 0 60px rgba(212,175,55,.22)}
.niche.open .niche-link:hover .cta svg{transform:translateX(4px)}
.niche.open::before{content:"";position:absolute;left:10%;right:10%;top:96%;height:70px;background:radial-gradient(ellipse at 50% 0,rgba(231,203,107,.22),transparent 70%);opacity:0;transition:opacity .6s;pointer-events:none;filter:blur(2px)}
.niche.open:hover::before{opacity:1}

/* halls in preparation: dimmed and veiled */
.niche.veiled .emblem{filter:saturate(.7) brightness(.78);opacity:.78}
.niche.veiled .plaque{background:linear-gradient(180deg,#E4DCCB,#CFC3AA);filter:saturate(.8)}
.veil{position:absolute;inset:0;z-index:2;pointer-events:none;transform-origin:50% 0;
  background:
    radial-gradient(ellipse at 50% -10%,rgba(244,236,221,.10),transparent 55%),
    repeating-linear-gradient(90deg,rgba(244,236,221,0) 0,rgba(244,236,221,.035) 9px,rgba(244,236,221,0) 18px,rgba(5,9,18,.06) 27px,rgba(244,236,221,0) 36px),
    linear-gradient(180deg,rgba(13,22,39,.25),rgba(13,22,39,.5))}
.niche.veiled .niche-link:hover .emblem,.niche.veiled .niche-link:focus-visible .emblem{opacity:.9}
.niche.veiled .niche-link:hover .veil{animation:breathe 2.4s ease-in-out}
.niche.veiled.wiggle .veil{animation:sway .9s ease-in-out}
@keyframes sway{0%,100%{transform:skewX(0)}20%{transform:skewX(2.2deg)}45%{transform:skewX(-1.8deg)}70%{transform:skewX(.9deg)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.82}}
.note-pop{position:absolute;z-index:10;max-width:280px;padding:12px 16px;border-radius:8px;background:var(--parchment);color:var(--ink);font-size:16px;line-height:1.4;box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(156,124,30,.5);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.note-pop.on{opacity:1;transform:none}
.note-pop::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:var(--parchment);transform:translateX(-50%) rotate(45deg);box-shadow:1px 1px 0 rgba(156,124,30,.5)}
.note-pop b{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a1b25;display:block;margin-bottom:2px}

/* sources and footer */
.sources{max-width:900px;margin:0 auto;padding:60px clamp(18px,4vw,40px) 40px;color:var(--mist)}
.sources h2{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.sources p{margin:0 0 12px;font-size:18px}
.sources ul{margin:0;padding-left:20px;font-size:17px;line-height:1.5}
.sources li{margin:6px 0}
.sources a{color:var(--gold-soft)}
.foot{text-align:center;padding:40px 20px 60px;border-top:1px solid rgba(212,175,55,.2);color:var(--mist-2);font-size:16px}
.foot .brand{justify-content:center;margin-bottom:10px}
.foot p{margin:0 auto;max-width:560px}

@media (max-width:980px){.niches{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .niches{grid-template-columns:1fr 1fr;gap:26px 12px}
  .halls{padding-left:12px;padding-right:12px}
  .arch{box-shadow:inset 0 0 0 1px rgba(212,175,55,.45),inset 0 0 0 6px #1A2742,inset 0 0 0 7px rgba(212,175,55,.28),inset 0 20px 40px rgba(0,0,0,.45),0 16px 30px rgba(0,0,0,.4)}
  .plaque{width:94%;padding:11px 6px 10px}
  .plaque .name{font-size:12.5px;letter-spacing:.05em}
  .plaque .meta{font-size:10.5px;letter-spacing:.12em}
  .plaque .feast,.plaque .alt{font-size:14px}
  .plaque .cta{font-size:9.5px;letter-spacing:.12em;gap:5px}
  .badge{font-size:8.5px;letter-spacing:.14em;padding:3px 8px;top:8px}
  .feast-month{font-size:16px}
  .note-pop{max-width:240px;font-size:15px}
  .top-nav{gap:14px}.top-nav a{font-size:11px;letter-spacing:.14em}
  .brand span{display:none}
  .lobby{min-height:92svh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}