@font-face{font-family:"Playfair Display";src:url(/fonts/PlayfairDisplay.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(/fonts/PlayfairDisplay-Italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/CormorantGaramond.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{
  --navy:#0f1a3d;--navy-2:#18264f;--navy-3:#223463;
  --cream:#faf4e6;--cream-2:#f2e8d2;--ink:#1b2347;--ink-soft:#4a5275;
  --gold:#c9a45c;--gold-2:#e2c88e;--gold-deep:#8a6a2a;--silver:#c9cfe0;--lav:#b9b3dc;
  --radius:18px;--shadow:0 10px 30px rgba(5,10,30,.35);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy) radial-gradient(ellipse at 50% 0,#1c2b5c 0,var(--navy) 60%) no-repeat;color:var(--cream);font-family:var(--body);font-size:20px;line-height:1.45;font-weight:500;overflow-x:hidden}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--ink);padding:8px 14px;border-radius:8px;z-index:9}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px;border-radius:6px}

.hero{position:relative;min-height:330px;display:flex;align-items:flex-end;justify-content:center;text-align:center;
  background:linear-gradient(180deg,rgba(15,26,61,0) 35%,rgba(15,26,61,.75) 75%,var(--navy) 100%),url(/moon-sky.jpg) center 20%/cover no-repeat;padding:0 20px 18px}
.hero-inner{max-width:640px}
.eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.08em;color:var(--gold-2);margin:0 0 4px;font-size:17px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,9vw,56px);line-height:1.08;margin:0;color:var(--cream);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.lede{font-size:20px;margin:10px 0 0;color:var(--silver);font-style:italic}

main{max-width:760px;margin:0 auto;padding:6px 16px 20px}
.card{background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:18px 20px;margin:16px 0;box-shadow:var(--shadow);border:1px solid rgba(201,164,92,.45)}
.card p{margin:.35em 0}
.intro p{font-size:19.5px}
.label{font-family:var(--serif);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 4px;font-weight:700}
.small{font-size:16px}.muted{color:var(--ink-soft)}
strong{font-weight:700}

.zone-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zone-name{font-family:var(--serif);font-size:22px;font-weight:700;margin:0;line-height:1.2;overflow-wrap:anywhere}
.zone-offset{margin:2px 0 0;color:var(--ink-soft);font-size:18px}
.btn{font:inherit;font-family:var(--serif);font-size:16px;font-weight:700;border-radius:999px;padding:10px 18px;border:0;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2a1f08;box-shadow:0 2px 0 var(--gold-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(27,35,71,.35)}
.btn-ghost:hover{border-color:var(--gold-deep)}
.zone-panel{margin-top:14px}
.zone-panel input{width:100%;font:inherit;font-size:19px;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(27,35,71,.3);background:#fff;color:var(--ink)}
.zone-panel input:focus{border-color:var(--gold-deep);outline:none;box-shadow:0 0 0 3px rgba(201,164,92,.4)}
.zone-list{list-style:none;margin:8px 0 0;padding:0;max-height:300px;overflow-y:auto;border-radius:12px;border:1px solid rgba(27,35,71,.15);background:#fffdf7}
.zone-list li{margin:0}
.zone-list button{all:unset;box-sizing:border-box;display:flex;width:100%;justify-content:space-between;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid rgba(27,35,71,.08);font-size:18px}
.zone-list button:hover,.zone-list button:focus-visible{background:var(--cream-2);outline:none}
.zone-list .zl-off{color:var(--ink-soft);white-space:nowrap;font-size:16px}
.zone-list .zl-sep{padding:8px 14px 4px;font-family:var(--serif);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;background:var(--cream-2)}
.zone-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.link-btn{all:unset;cursor:pointer;color:var(--gold-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px;font-size:17px;padding:6px 0}
.clock-toggle{display:inline-flex;border:1.5px solid rgba(27,35,71,.25);border-radius:999px;overflow:hidden}
.seg{all:unset;cursor:pointer;padding:6px 12px;font-size:15px;font-family:var(--serif);font-weight:700;color:var(--ink-soft)}
.seg[aria-pressed="true"]{background:var(--navy);color:var(--cream)}

.next{background:linear-gradient(160deg,#fffaf0,#f3e6c6);border:1.5px solid var(--gold)}
.next-body{display:flex;gap:16px;align-items:flex-start}
.next-icon svg{width:64px;height:64px;display:block}
.next-name{font-family:var(--serif);font-size:24px;margin:0;line-height:1.2}
.next-local{font-size:22px;margin:4px 0 0!important;font-weight:700}
.next-ut{color:var(--ink-soft);margin:0!important;font-size:17px}
.next-count{font-style:italic;color:var(--gold-deep);margin:4px 0 0!important;font-weight:600}

.section-title{font-family:var(--serif);font-size:26px;text-align:center;margin:28px 0 10px;color:var(--gold-2);font-weight:700}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--navy-2);padding:6px;border-radius:999px;border:1px solid rgba(201,164,92,.4)}
.tab{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:10px 8px;border-radius:999px;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--silver);line-height:1.2}
.tab[aria-selected="true"]{background:var(--cream);color:var(--ink)}
.tab:focus-visible{outline:3px solid var(--gold-2)}
.book-head{text-align:center;margin:16px 0 4px}
.book-head h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;margin:0;color:var(--cream)}
.book-head p{margin:2px 0 0;color:var(--silver);font-size:17px}
.book-tools{text-align:center;margin:8px 0 4px}
.book-tools a{color:var(--gold-2);font-size:17px;font-weight:600;text-underline-offset:3px}

.moments{list-style:none;padding:0;margin:0}
.moment{background:var(--cream);color:var(--ink);border-radius:var(--radius);margin:12px 0;padding:16px 16px 14px;box-shadow:var(--shadow);border:1px solid rgba(201,164,92,.35);position:relative}
.moment.is-next{border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(201,164,92,.25),var(--shadow)}
.moment.is-past{opacity:.62}
.m-top{display:flex;gap:12px;align-items:flex-start}
.m-icon svg{width:44px;height:44px;display:block}
.m-title{flex:1;min-width:0}
.m-name{font-family:var(--serif);font-size:20px;font-weight:700;margin:0;line-height:1.2}
.m-sign{color:var(--ink-soft);font-style:italic}
.badge{display:inline-block;font-family:var(--serif);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:3px 9px;vertical-align:middle;margin-left:4px}
.badge-next{background:var(--gold);color:#2a1f08}
.badge-past{background:rgba(27,35,71,.12);color:var(--ink-soft)}
.m-times{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 8px}
.tbox{background:#fffdf7;border-radius:12px;padding:8px 12px;border:1px solid rgba(27,35,71,.1)}
.tbox.local{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.tbox .k{font-family:var(--serif);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.tbox.local .k{color:var(--gold-2)}
.tbox .d{font-size:18px;font-weight:600;line-height:1.25}
.tbox .t{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.15;font-variant-numeric:lining-nums tabular-nums}
.tbox .t.festival{font-size:18px}
.m-hint{margin:6px 0 0;font-size:18px;color:var(--ink);display:flex;gap:8px}
.m-hint::before{content:"☾";color:var(--gold-deep);font-size:18px;line-height:1.5}
.m-note{margin:4px 0 0;font-size:17px;color:var(--ink-soft);font-style:italic}
.m-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.m-actions .btn{font-size:14px;padding:8px 14px;min-height:40px}

.note{background:linear-gradient(180deg,var(--navy-2),var(--navy-3));color:var(--cream);border-color:rgba(201,164,92,.5)}
.note h2{font-family:var(--serif);color:var(--gold-2);font-size:22px;margin:0 0 6px;font-weight:700}
.foot{text-align:center;padding:24px 16px 40px;color:var(--silver)}
.foot p{margin:2px 0}
.foot-title{font-family:var(--serif);font-style:italic;color:var(--gold-2);font-size:20px}
.foot .muted{color:#9aa3c2;max-width:520px;margin:10px auto 0}

@media (min-width:700px){
  .hero{min-height:420px}
  .moment{padding:18px 22px 16px}
  .m-times{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .next-icon svg{width:48px;height:48px;margin-top:4px}
  .next-name{font-size:22px}
}
@media (max-width:360px){
  body{font-size:18px}
  .m-times{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){.moment,.tab,.btn{transition:all .15s ease}}