/* Lantern & Ledger — night-and-gold. A lantern on a ledger, held to the dark. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --navy:#0c1a33;          /* midnight ground */
  --navy-deep:#081124;     /* edges, footer, gradient floor */
  --navy-panel:#122744;    /* lifted card ground */
  --gold:#c9a24b;          /* brass rule + accents */
  --gold-bright:#e6c579;   /* wordmark + hover */
  --lantern:#f4c56a;       /* warm flame glow */
  --parchment:#e9e1cf;     /* body text on navy — never pure white */
  --muted:#9fa08c;         /* secondary text, warm grey-gold */
  --rule:rgba(201,162,75,.30);   /* faint gold hairline */
  --rule-soft:rgba(201,162,75,.16);
  --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--parchment);
  background:
    radial-gradient(1200px 620px at 50% -8%, rgba(244,197,106,.10), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  background-attachment:fixed;
  font-family:"EB Garamond","Iowan Old Style",Palatino,Georgia,serif;
  line-height:1.72; font-size:19px;
  min-height:100vh;
}

/* thin gold frame echoing the logo border */
.frame{position:fixed; inset:14px; border:1px solid var(--rule); pointer-events:none; z-index:5}
.frame::before{content:""; position:absolute; inset:4px; border:1px solid var(--rule-soft)}
@media (max-width:560px){ .frame{inset:8px} }

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
a{color:var(--gold-bright); text-decoration:none; border-bottom:1px solid var(--rule)}
a:hover{color:#fff; border-bottom-color:var(--gold)}

/* header */
header.site{position:relative; z-index:6}
header.site .wrap{display:flex; align-items:center; justify-content:space-between;
  padding-top:26px; padding-bottom:18px; flex-wrap:wrap; gap:10px}
.brand{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-size:1.55rem;
  letter-spacing:.02em; color:var(--gold-bright); border:0; display:inline-flex; align-items:baseline; gap:.32em}
.brand .amp{color:var(--gold); font-style:italic}
nav.site a{font-family:"Cormorant Garamond",Georgia,serif; font-size:1rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; margin-left:22px; border:0; color:var(--muted)}
nav.site a:hover{color:var(--gold-bright)}

/* hero */
.hero{position:relative; z-index:6; text-align:center; padding:30px 0 8px}
.hero-art{position:relative; max-width:1000px; margin:0 auto; padding:0 26px}
.hero-art figure{margin:0; position:relative; border-radius:6px; overflow:hidden;
  border:1px solid var(--rule); box-shadow:0 24px 70px -30px rgba(0,0,0,.8)}
.hero-art img{display:block; width:100%; height:auto}
.hero-glow{position:absolute; left:50%; top:42%; width:60%; height:60%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(244,197,106,.22), transparent 62%);
  filter:blur(16px); z-index:-1; animation:breathe 6.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .hero-glow{animation:none} }

.eyebrow{font-family:"Cormorant Garamond",Georgia,serif; text-transform:uppercase;
  letter-spacing:.28em; font-size:.86rem; font-weight:600; color:var(--gold); margin:26px 0 6px}
.hero h1{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-size:2.5rem;
  line-height:1.12; margin:.1rem 0 .5rem; color:var(--parchment); text-wrap:balance}
.tagline{font-size:1.24rem; font-style:italic; color:var(--muted);
  max-width:34ch; margin:.2rem auto 0; text-wrap:balance}

/* ornamental divider ❖ */
.divider{display:flex; align-items:center; gap:18px; justify-content:center;
  color:var(--gold); margin:40px auto; max-width:340px}
.divider::before,.divider::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--rule))}
.divider::after{background:linear-gradient(90deg,var(--rule),transparent)}
.divider span{font-size:.9rem; letter-spacing:.3em}

main{position:relative; z-index:6; padding:6px 0 20px}
h2{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.7rem; font-weight:600;
  margin:2.4rem 0 .5rem; color:var(--gold-bright); letter-spacing:.01em; text-wrap:balance}
h3{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.2rem; margin:1.6rem 0 .3rem; color:var(--gold-bright)}
.lede{font-size:1.16rem; color:#f0ebdc}
p{margin:.7rem 0}

/* four-bin cards */
.bins{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.6rem 0}
.bin{position:relative; background:linear-gradient(180deg,var(--navy-panel),rgba(18,39,68,.6));
  border:1px solid var(--rule); border-radius:12px; padding:18px 20px 18px 22px; overflow:hidden}
.bin::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--lantern),var(--gold))}
.bin b{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.18rem;
  font-weight:600; color:var(--gold-bright); margin-bottom:3px; letter-spacing:.01em}
.bin span{font-size:.98rem; color:var(--muted); line-height:1.55}

/* listen pills */
.listen{display:flex; gap:14px; flex-wrap:wrap; margin:1.4rem 0}
.listen a{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.02rem; font-weight:600;
  letter-spacing:.06em; padding:11px 26px; border:1px solid var(--gold); border-radius:999px;
  color:var(--gold-bright); transition:all .2s ease}
.listen a:hover{background:var(--gold); color:var(--navy-deep); border-color:var(--gold-bright);
  box-shadow:0 0 26px -6px rgba(244,197,106,.6)}

/* legal pages */
.legal p,.legal li{color:var(--muted)}
.legal{font-size:1.02rem}
.legal ul{padding-left:1.2rem}
.legal h1{font-family:"Cormorant Garamond",Georgia,serif; font-size:2rem; font-weight:600;
  color:var(--gold-bright); margin:.4rem 0 .3rem}
.updated{font-family:"Cormorant Garamond",Georgia,serif; font-size:.9rem; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase}

/* footer */
footer.site{position:relative; z-index:6; border-top:1px solid var(--rule); margin-top:52px;
  background:linear-gradient(180deg,transparent,rgba(8,17,36,.6))}
footer.site .wrap{padding:30px 26px; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:.98rem; color:var(--muted); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; align-items:center}
footer.site a{color:var(--muted); border:0}
footer.site a:hover{color:var(--gold-bright)}

@media (max-width:560px){
  body{font-size:18px}
  .hero h1{font-size:2rem}
  .tagline{font-size:1.12rem}
  h2{font-size:1.45rem}
  .bins{grid-template-columns:1fr}
  nav.site a{margin-left:0; margin-right:18px}
  header.site .wrap{padding-top:20px}
}