/* Stars & Stories — an observer's notebook. camelCase class names; data-sky-* hooks for script. */
:root{
  --night:#0A1124; --deep:#0E1730; --panel:#121D3B; --line:rgba(159,180,255,.22);
  --frost:#E6E9F2; --dim:#AEB6CC; --peri:#9FB4FF; --gold:#F2D492;
  --title:"Italiana","Didot","Bodoni 72",Georgia,serif; --text:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --round:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--frost);font:400 1.0625rem/1.7 var(--text);overflow-x:hidden;background-color:var(--night);
  background-image:
   radial-gradient(1px 1px at 12% 18%,rgba(230,233,242,.7),transparent 60%),
   radial-gradient(1px 1px at 68% 9%,rgba(230,233,242,.55),transparent 60%),
   radial-gradient(1.5px 1.5px at 84% 32%,rgba(242,212,146,.6),transparent 60%),
   radial-gradient(1px 1px at 33% 47%,rgba(230,233,242,.45),transparent 60%),
   radial-gradient(1px 1px at 52% 76%,rgba(230,233,242,.5),transparent 60%),
   radial-gradient(1.2px 1.2px at 7% 88%,rgba(159,180,255,.6),transparent 60%),
   radial-gradient(1px 1px at 91% 70%,rgba(230,233,242,.5),transparent 60%),
   radial-gradient(ellipse at 50% -20%,#16224A 0%,var(--night) 60%);
  background-size:620px 620px,700px 700px,800px 800px,540px 540px,760px 760px,680px 680px,590px 590px,100% 100%;
  background-attachment:fixed}
img{max-width:100%;height:auto;display:block}
a{color:var(--peri);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skipLink{position:absolute;left:1rem;top:-4rem;background:var(--gold);color:var(--night);padding:.6rem 1rem;border-radius:999px;z-index:90;font-weight:700;text-decoration:none}
.skipLink:focus{top:1rem}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.frame{max-width:74rem;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}

/* ---------- header */
.skyHeader{border-bottom:1px solid var(--line);background:rgba(10,17,36,.86);position:sticky;top:0;z-index:40;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.skyHeader .frame{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.4rem}
.brandLink{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--frost)}
.brandLink img{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--line)}
.brandName{font:400 1.75rem/1 var(--title);letter-spacing:.04em}
.brandName span{color:var(--gold)}
.mainNav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;align-items:center}
.mainNav a{color:var(--dim);text-decoration:none;font-size:.92rem;font-weight:600}
.mainNav a:hover,.mainNav a[aria-current="page"]{color:var(--frost)}
.mainNav a[aria-current="page"]{box-shadow:0 2px 0 var(--gold)}
.redToggle{font:700 .72rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:999px;padding:.55rem .8rem;cursor:pointer}
.redToggle[aria-pressed="true"]{color:#ff8a7a;border-color:#ff8a7a}
.navOpen{display:none;font:700 .8rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;background:var(--panel);color:var(--frost);border:1px solid var(--line);border-radius:999px;padding:.65rem 1rem;cursor:pointer}
@media (max-width:56rem){
  .navOpen{display:block}
  .mainNav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--deep);border-bottom:1px solid var(--line);padding:1rem clamp(1rem,4vw,2.5rem) 1.4rem}
  .mainNav.isOpen{display:block}
  .mainNav ul{flex-direction:column;align-items:stretch;gap:0}
  .mainNav a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .mainNav li:last-child{padding-top:.9rem}
}

/* ---------- map hero */
.mapHero{padding:clamp(2.2rem,6vw,4.5rem) 0 2rem}
.mapHero .frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.heroTitle{font:400 clamp(2.8rem,6.4vw,5.2rem)/1.02 var(--title);margin:0 0 1.2rem;letter-spacing:.01em}
.heroTitle em{font-style:normal;color:var(--gold)}
.heroLede{font-size:1.12rem;color:var(--dim);margin:0 0 1.6rem;max-width:32rem}
.pillLink{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.3rem;border-radius:999px;background:var(--peri);color:var(--night);text-decoration:none;font-weight:700;font-size:.95rem}
.pillLink:hover{background:var(--gold);color:var(--night)}
.pillLink.ghostPill{background:transparent;color:var(--frost);border:1px solid var(--line)}
.pillLink.ghostPill:hover{border-color:var(--gold);color:var(--gold)}
.pillRow{display:flex;gap:.7rem;flex-wrap:wrap}
.skyChart{position:relative;margin:0;aspect-ratio:1;max-width:36rem;justify-self:center;width:100%}
.skyChart img{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 0 80px rgba(159,180,255,.18)}
.chartPin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--frost);font-size:.8rem;font-weight:700;white-space:nowrap;background:rgba(10,17,36,.78);border:1px solid var(--line);padding:.3rem .65rem .3rem .35rem;border-radius:999px}
.chartPin b{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--gold);color:var(--night);font-size:.72rem}
.chartPin:hover{border-color:var(--gold);color:var(--gold)}
.chartNote{font-size:.8rem;color:var(--dim);text-align:center;margin:.8rem 0 0}
.pinList{display:none;list-style:none;margin:1.2rem 0 0;padding:0;gap:.5rem}
.pinList a{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:var(--frost);font-weight:600}
.pinList b{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--gold);color:var(--night);font-size:.75rem;flex:none}
@media (max-width:56rem){
  .mapHero .frame{grid-template-columns:1fr}
  .chartPin{padding:0;border:0;background:none}
  .chartPin span{display:none}
  .pinList{display:grid}
}

/* ---------- this season */
.seasonPanel{margin:clamp(2rem,5vw,3.5rem) 0;background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid var(--line);border-radius:var(--round);padding:clamp(1.3rem,3vw,2.2rem);position:relative;overflow:hidden}
.seasonPanel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),var(--peri))}
.seasonHead{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:end;margin-bottom:1.4rem}
.seasonHead h2{font:400 clamp(2rem,4.5vw,3rem)/1.05 var(--title);margin:0}
.seasonHead p{margin:0;color:var(--dim);max-width:30rem;font-size:.95rem}
.seasonHead .editionTag{display:inline-block;margin:.75rem 0 0;padding:.22rem .7rem;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.editionNote{margin:1rem 0 0;font-size:.88rem;color:var(--dim)}
.compass{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem;margin:0;padding:0;list-style:none}
.compass li{background:rgba(10,17,36,.55);border:1px solid var(--line);border-radius:10px;padding:1rem}
.compass h3{margin:0 0 .4rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.compass p{margin:0;font-size:.93rem;line-height:1.5}
.seasonFoot{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.moonLine,.datesLine{background:rgba(10,17,36,.55);border:1px dashed var(--line);border-radius:10px;padding:.9rem 1rem;font-size:.93rem;margin:0}
.moonLine b,.datesLine b{color:var(--gold);font-weight:700}
@media (max-width:62rem){.compass{grid-template-columns:repeat(2,minmax(0,1fr))}.compass li:first-child{grid-column:1/-1}}
@media (max-width:36rem){.compass{grid-template-columns:1fr}.seasonFoot{grid-template-columns:1fr}}

/* ---------- regions (articles grouped by place) */
.regionIntro{text-align:center;max-width:40rem;margin:3.5rem auto 1.5rem}
.regionIntro h2{font:400 clamp(2.2rem,5vw,3.4rem)/1.05 var(--title);margin:0 0 .6rem}
.regionIntro p{color:var(--dim);margin:0}
.regionGroup{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:1.5rem 2.5rem;padding:1.8rem 0;border-top:1px solid var(--line)}
.regionName{margin:0;font:400 1.9rem/1.1 var(--title)}
.regionWhere{margin:.5rem 0 0;font-size:.85rem;color:var(--dim)}
.regionWhere b{display:block;color:var(--gold);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.2rem}
.storyRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem}
.storyCard{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:center;text-decoration:none;color:var(--frost);background:rgba(18,29,59,.7);border:1px solid var(--line);border-radius:var(--round);padding:.7rem;transition:border-color .2s}
.storyCard:hover{border-color:var(--gold);color:var(--frost)}
.storyCard img{width:7.5rem;height:7.5rem;object-fit:cover;border-radius:10px}
.storyCard h3{margin:0 0 .3rem;font:400 1.4rem/1.15 var(--title)}
.storyCard p{margin:0;font-size:.85rem;color:var(--dim);line-height:1.45}
@media (min-width:48.01rem){
  .storyCard:only-child{grid-template-columns:minmax(0,15rem) 1fr;gap:1.6rem;padding:.8rem 1.6rem .8rem .8rem}
  .storyCard:only-child img{width:100%;height:auto;aspect-ratio:16/10}
  .storyCard:only-child h3{font-size:1.75rem;margin-bottom:.45rem}
  .storyCard:only-child p{font-size:.95rem;max-width:36rem}
}
@media (max-width:48rem){.regionGroup{grid-template-columns:1fr}.storyCard{grid-template-columns:5.5rem 1fr}.storyCard img{width:5.5rem;height:5.5rem}}

.templePlate{margin:clamp(.5rem,2vw,1.5rem) 0 0;border-radius:var(--round);overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.templePlate img{width:100%;aspect-ratio:21/8;object-fit:cover}
.templePlate figcaption{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:.35rem 2rem;align-items:baseline;padding:1.1rem 1.4rem 1.2rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--dim)}
.templePlate figcaption strong{font:400 1.8rem/1.1 var(--title);color:var(--gold)}
@media (max-width:40rem){.templePlate img{aspect-ratio:4/3}.templePlate figcaption{grid-template-columns:1fr}}
.clearSkies{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;border:1px solid var(--line);border-radius:var(--round);padding:1.6rem;margin:3rem 0 0}
.clearSkies h2{font:400 2rem/1.1 var(--title);margin:0 0 .3rem}
.clearSkies p{margin:0;color:var(--dim)}
@media (max-width:40rem){.clearSkies{grid-template-columns:1fr}}

/* ---------- article */
.starPath{font-size:.82rem;color:var(--dim);margin:1.6rem 0 0}
.starPath a{color:var(--dim)}
.storyHead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:end;padding:1.8rem 0 1.6rem;border-bottom:1px solid var(--line)}
.storyHead h1{font:400 clamp(2.5rem,5.6vw,4.4rem)/1.04 var(--title);margin:0 0 1rem}
.storyHead .standfirst{font-size:1.15rem;color:var(--dim);margin:0}
.chartCard{background:var(--panel);border:1px solid var(--line);border-radius:var(--round);padding:1.1rem 1.2rem;font-size:.9rem}
.chartCard dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0}
.chartCard dt{color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding-top:.2rem}
.chartCard dd{margin:0}
.storyMeta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.85rem;color:var(--dim);padding:.9rem 0}
@media (max-width:52rem){.storyHead{grid-template-columns:1fr}}
.storyBody{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,1fr);gap:3rem;margin-top:1.4rem}
.storyBody .plateImg{grid-column:1/-1;margin:0 0 .6rem}
.storyBody .plateImg img{width:100%;border-radius:var(--round);border:1px solid var(--line)}
.storyBody .plateImg figcaption{font-size:.85rem;color:var(--dim);margin-top:.6rem}
.storyText p{margin:0 0 1.15rem}
.storyText h2{font:400 2rem/1.1 var(--title);margin:2.4rem 0 .8rem;color:var(--frost)}
.storyText h2::before{content:"✦ ";color:var(--gold);font-size:.6em;vertical-align:.25em}
.storyText blockquote{margin:1.6rem 0;padding:1rem 1.2rem;border-left:2px solid var(--gold);background:rgba(18,29,59,.6);border-radius:0 10px 10px 0;font-size:1.08rem}
.storyText blockquote p{margin:0}
.storyText blockquote footer{font-size:.82rem;color:var(--dim);margin-top:.4rem}
.storyAside{position:relative}
.seeBlock{position:sticky;top:6rem;background:linear-gradient(180deg,#15214A,var(--panel));border:1px solid rgba(242,212,146,.45);border-radius:var(--round);padding:1.3rem 1.3rem 1.1rem}
.seeBlock h2{font:400 1.6rem/1.15 var(--title);margin:0 0 .3rem;color:var(--gold)}
.seeBlock .seeSub{font-size:.8rem;color:var(--dim);margin:0 0 1rem}
.seeBlock dl{margin:0;display:grid;gap:.7rem}
.seeBlock dt{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--peri)}
.seeBlock dd{margin:.15rem 0 0;font-size:.93rem;line-height:1.5}
.altTable{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.3rem}
.altTable th,.altTable td{text-align:left;padding:.35rem .3rem;border-bottom:1px solid var(--line)}
.altTable th{font-weight:600;color:var(--dim)}
@media (max-width:62rem){.storyBody{grid-template-columns:1fr}.seeBlock{position:static}}
.sourceNotes{margin:2.6rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--dim)}
.sourceNotes h2{font:700 .75rem/1 var(--text)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)!important;margin:0 0 .8rem!important}
.sourceNotes h2::before{content:none!important}
.sourceNotes ul{padding-left:1.1rem;margin:0}
.nextStars{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.6rem 0 0}
.nextStars a{display:block;border:1px solid var(--line);border-radius:var(--round);padding:1rem 1.2rem;text-decoration:none;color:var(--frost)}
.nextStars a:hover{border-color:var(--gold)}
.nextStars span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.nextStars b{font:400 1.35rem/1.2 var(--title)}
@media (max-width:40rem){.nextStars{grid-template-columns:1fr}}

/* ---------- guide + plain pages */
.pageHead{text-align:center;max-width:44rem;margin:2.6rem auto 2rem}
.pageHead h1{font:400 clamp(2.6rem,6vw,4.4rem)/1.05 var(--title);margin:0 0 .8rem}
.pageHead p{color:var(--dim);margin:0}
.monthPick{display:flex;gap:.7rem;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 0 2rem}
.monthPick label{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.monthPick select{font:inherit;background:var(--panel);color:var(--frost);border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem}
.seasonCard{border:1px solid var(--line);border-radius:var(--round);padding:1.6rem;margin:0 0 1.4rem;background:rgba(18,29,59,.55);display:grid;grid-template-columns:minmax(0,14rem) 1fr;gap:1.5rem 2rem;transition:border-color .3s,box-shadow .3s}
.seasonCard.isNow{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 40px rgba(242,212,146,.12)}
.seasonCard h2{font:400 2.2rem/1.05 var(--title);margin:0}
.seasonCard .months{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:.4rem 0 0}
.seasonCard .nowTag{display:none;margin-top:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--night);background:var(--gold);border-radius:999px;padding:.25rem .6rem;width:max-content}
.seasonCard.isNow .nowTag{display:block}
.seasonCard ul{margin:0;padding-left:1.1rem}
.seasonCard li{margin-bottom:.55rem}
.seasonCard p{margin:0 0 .8rem}
@media (max-width:48rem){.seasonCard{grid-template-columns:1fr}}
.plainText{max-width:44rem;margin:0 auto}
.plainText h2{font:400 1.9rem/1.15 var(--title);margin:2.2rem 0 .7rem;color:var(--gold)}
.plainText p,.plainText li{margin:0 0 .95rem}
.plainText .stamp{font-size:.85rem;color:var(--dim);text-align:center}
.noteForm{display:grid;gap:1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--round);padding:1.4rem;margin:1.6rem 0}
.noteForm label{display:grid;gap:.35rem;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.noteForm input,.noteForm textarea,.noteForm select{font:inherit;font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--frost);background:var(--night);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.noteForm textarea{min-height:9rem;resize:vertical}
.noteForm small{color:var(--dim);font-size:.85rem}
.noteForm button{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.lostSky{text-align:center;padding:4rem 0 2rem}
.lostSky .bigNum{font:400 clamp(6rem,20vw,11rem)/1 var(--title);color:var(--gold);margin:0}

/* ---------- footer */
.skyFooter{margin-top:4.5rem;border-top:1px solid var(--line);padding:2.6rem 0 2rem;background:linear-gradient(transparent,rgba(5,9,20,.9))}
.skyFooter .frame{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.skyFooter .signoff{font:400 2.2rem/1 var(--title);margin:0 0 .6rem}
.skyFooter p{margin:0 0 .5rem;font-size:.9rem;color:var(--dim)}
.skyFooter h2{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.skyFooter ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.skyFooter a,.skyFooter button{color:var(--frost);font:inherit;font-size:.92rem;text-decoration:none}
.skyFooter button{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.skyFooter a:hover,.skyFooter button:hover{color:var(--gold)}
.skyFooter .domainLine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1rem;text-align:center;font-size:.85rem}
@media (max-width:48rem){.skyFooter .frame{grid-template-columns:1fr}}

/* ---------- consent */
.skyConsent{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:70;width:min(40rem,calc(100% - 2rem));background:rgba(18,29,59,.97);border:1px solid var(--peri);border-radius:20px;padding:1.1rem 1.3rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.skyConsent[hidden]{display:none}
.skyConsent h2{font:400 1.35rem/1.1 var(--title);margin:0 0 .3rem;color:var(--gold)}
.skyConsent p{margin:0;font-size:.88rem;line-height:1.5;color:var(--frost)}
.consentBtns{display:flex;gap:.6rem}
.consentBtns button{font:700 .85rem/1 var(--text);padding:.75rem 1.1rem;border-radius:999px;border:1px solid var(--peri);background:var(--peri);color:var(--night);cursor:pointer;min-width:6.5rem}
.consentBtns button:hover{background:var(--gold);border-color:var(--gold)}
@media (max-width:40rem){.skyConsent{grid-template-columns:1fr}.consentBtns button{flex:1}}

/* ---------- night-vision (red light) mode */
html.redLight{--night:#0b0000;--deep:#120202;--panel:#1a0303;--line:rgba(255,80,60,.28);--frost:#ff8f80;--dim:#d0675a;--peri:#ff6d5c;--gold:#ff9e8c}
html.redLight body{background-image:none;background-color:#0b0000}
html.redLight img:not(.brandLogo){filter:grayscale(1) sepia(1) hue-rotate(-40deg) saturate(3) brightness(.55)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}