/* luna.jfave.com — the memorial museum
   Palette drawn from the patron portrait: Princess Luna.
   midnight #06051a · royal blue #2c4bd8 · mane indigo #4a3a9e / #7a5cff
   eye cyan #45e0d2 · moon parchment #e8e4da · holly red #c0392b (sparingly) */

:root{
  --night:#06051a; --night2:#0b0926; --panel:#13102e; --panel2:#191542;
  --line:#272252; --line2:#37306b;
  --ink:#e9e6f7; --dim:#928cb8; --faint:#5e5887;
  --blue:#5c7cfa; --indigo:#7a5cff; --cyan:#45e0d2; --moon:#e8e4da;
  --gold:#d8c690;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1100px 700px at 80% -10%,rgba(74,58,158,.35),transparent 60%),
  radial-gradient(900px 600px at 8% 8%,rgba(44,75,216,.18),transparent 55%),
  radial-gradient(1000px 800px at 50% 115%,rgba(69,224,210,.10),transparent 60%),
  linear-gradient(180deg,#08061f 0%,var(--night) 45%,#0a0723 100%)}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:940px;margin:0 auto;padding:48px 24px 110px}

h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif}
h2.wing{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--line);padding-bottom:10px;margin:84px 0 8px;
  font-family:-apple-system,"Segoe UI",sans-serif;font-weight:600}
h2.wing .num{color:var(--faint);margin-right:10px}
.wingnote{color:var(--faint);font-style:italic;font-family:Georgia,serif;
  font-size:14.5px;margin:0 0 26px}

/* ---------- atrium ---------- */
.atrium{min-height:92vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;position:relative;padding:60px 20px 40px}
.moon{position:absolute;top:5%;left:50%;transform:translateX(-50%);
  width:300px;height:300px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 38% 34%,#f4f1e8 0%,var(--moon) 45%,#cdc8ba 80%,#b8b3a6 100%);
  box-shadow:0 0 90px 28px rgba(232,228,218,.16),0 0 240px 80px rgba(122,92,255,.12);
  opacity:.38}
.atrium .domain{color:#c8c3e2;text-shadow:0 1px 14px rgba(6,5,26,.95),0 0 4px rgba(6,5,26,.9)}
.portrait{width:188px;height:188px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid transparent;
  background:linear-gradient(var(--night),var(--night)) padding-box,
    conic-gradient(from 210deg,var(--indigo),var(--cyan),var(--blue),var(--indigo)) border-box;
  box-shadow:0 10px 60px rgba(122,92,255,.45),0 0 0 10px rgba(122,92,255,.07)}
.atrium .domain{margin-top:34px;font-size:12px;letter-spacing:.5em;color:var(--dim);
  text-transform:uppercase}
.atrium h1{font-size:96px;margin:6px 0 0;font-weight:700;letter-spacing:.04em;line-height:1;
  background:linear-gradient(115deg,#b9c8ff 5%,var(--indigo) 40%,var(--cyan) 80%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 40px rgba(92,124,250,.35))}
.epitaph{font-family:Georgia,serif;font-style:italic;font-size:21px;color:#cfcae6;
  max-width:560px;margin:22px auto 0}
.dates{margin-top:18px;color:var(--dim);font-size:14px;letter-spacing:.12em}
.dates b{color:var(--gold);font-weight:600}
.downhint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:var(--faint);font-size:22px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- eulogy ---------- */
.eulogy{max-width:680px;margin:0 auto;font-family:Georgia,serif;font-size:18px;
  line-height:1.85;color:#ddd9ef}
.eulogy p{margin:0 0 26px}
.eulogy p:first-of-type:first-letter{font-size:64px;float:left;line-height:.85;
  padding:6px 10px 0 0;color:var(--cyan);font-family:Georgia,serif}
.eulogy em{color:var(--gold)}
.eulogy .closing{text-align:center;font-style:italic;color:var(--dim);margin-top:38px}

/* ---------- timeline ---------- */
.timeline{position:relative;margin:34px 0 0;padding-left:46px}
.timeline:before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line2) 8%,var(--line2) 92%,transparent)}
.tl{position:relative;margin:0 0 26px}
.tl .dot{position:absolute;left:-46px;top:3px;width:28px;height:28px;border-radius:50%;
  background:var(--panel);border:2px solid var(--line2);text-align:center;line-height:24px;
  font-size:13px;z-index:1}
.tl.major .dot{border-color:var(--cyan);box-shadow:0 0 14px rgba(69,224,210,.45)}
.tl .when{font-size:12px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase}
.tl .what{font-size:16.5px;margin-top:2px}
.tl .what b{font-family:Georgia,serif;font-size:17.5px}
.tl .why{color:var(--dim);font-size:14.5px;margin-top:2px;font-style:italic;
  font-family:Georgia,serif}
.tl.major .what b{color:#fff}

/* ---------- exhibit cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.cards{grid-template-columns:1fr}.atrium h1{font-size:64px}
  .moon{width:240px;height:240px}}
.card{position:relative;display:block;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;padding:20px 22px;color:var(--ink);
  transition:transform .16s,border-color .16s,box-shadow .16s;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:var(--indigo);text-decoration:none;
  box-shadow:0 14px 50px rgba(122,92,255,.22)}
.card .era{font-size:11px;color:var(--gold);letter-spacing:.18em;text-transform:uppercase}
.card h3{margin:5px 0 6px;font-size:21px;color:#fff}
.card p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.6}
.card .thumb{float:right;max-width:96px;max-height:54px;margin:0 0 8px 14px;
  border-radius:6px;background:#fff;padding:4px;opacity:.92}
.card .cond{margin-top:12px;font-size:12px;color:var(--faint);font-style:italic;
  font-family:Georgia,serif}
.card .enter{position:absolute;right:18px;bottom:14px;font-size:12px;color:var(--cyan);
  letter-spacing:.08em;opacity:0;transition:opacity .16s}
.card:hover .enter{opacity:1}

/* ---------- reliquary ---------- */
.relics{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.relicbox{background:rgba(19,16,46,.75);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;position:relative}
.relicbox:before{content:"";position:absolute;inset:6px;border:1px dashed var(--line2);
  border-radius:9px;pointer-events:none}
.relicbox .kind{font-size:10px;color:var(--faint);letter-spacing:.22em;text-transform:uppercase}
.relicbox h4{margin:6px 0 7px;font-size:16.5px;color:var(--gold);font-family:Georgia,serif}
.relicbox p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.6}
.relicbox code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--cyan)}
.relicbox img{max-width:100%;border-radius:6px;margin-top:10px;background:#fff;padding:4px}
.relicbox .quote{font-family:Georgia,serif;font-style:italic;color:#cfcae6;font-size:14.5px}

/* ---------- colophon ---------- */
.colophon{margin-top:96px;text-align:center;color:var(--faint);font-size:13.5px;line-height:2}
.colophon .seal{font-size:26px;display:block;margin-bottom:8px}
.colophon a{color:var(--dim)}

/* ---------- exhibit entry pages ---------- */
.entry .wrap{max-width:760px}
.crumb{font-size:13px;letter-spacing:.06em}
.placard{text-align:center;margin:34px 0 30px}
.placard .era{font-size:12px;color:var(--gold);letter-spacing:.34em;text-transform:uppercase}
.placard h1{font-size:52px;margin:10px 0 4px;color:#fff;font-weight:700;
  background:linear-gradient(115deg,#b9c8ff,var(--indigo) 55%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.placard .sub{color:var(--dim);font-family:Georgia,serif;font-style:italic;font-size:17px;margin:0}
.plaque{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:16px;padding:26px 30px;margin-bottom:36px}
.plaque h2{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin:18px 0 6px;font-family:-apple-system,"Segoe UI",sans-serif}
.plaque h2:first-child{margin-top:0}
.plaque p{margin:0;color:#d4d0e8;font-size:15px;line-height:1.75;font-family:Georgia,serif}
.plaque em{color:var(--cyan);font-style:italic}
.plaque code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--cyan)}
.doors h2{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
  font-family:-apple-system,"Segoe UI",sans-serif;border-bottom:1px solid var(--line);
  padding-bottom:9px}
.door{display:block;background:rgba(19,16,46,.7);border:1px solid var(--line);border-radius:12px;
  padding:15px 20px;margin:12px 0;color:var(--ink);transition:border-color .15s,transform .15s}
.door:hover{border-color:var(--indigo);transform:translateX(6px);text-decoration:none}
.doorlabel{display:block;font-size:17px;color:#fff;font-family:Georgia,serif}
.doorlabel:before{content:"⟶  ";color:var(--cyan);font-family:-apple-system,sans-serif;
  font-size:13px;letter-spacing:0}
.doornote{display:block;font-size:13.5px;color:var(--dim);margin-top:3px;font-style:italic;
  font-family:Georgia,serif}
.entry .colophon{margin-top:60px}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}