/* Pocket Shaman Journal — shared styles for the standalone blog.
   Token values match public/privacy.html and public/terms.html so the
   blog reads as the same brand, not a bolted-on marketing site. */
:root{
  --bg:#0c1620; --panel:#121f2c; --ink:#e9e4d6; --muted:#a9b3bd;
  --gold:#b08d57; --purple:#3a2f5c; --line:#243441;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Spectral",Georgia,serif; font-weight:300; line-height:1.7;
  font-size:17px; -webkit-font-smoothing:antialiased;
}
/* Three-column shell: archive sidebar / content / events sidebar. Only the
   hero sits outside it (full width). Collapses to a single stacked column
   on narrow screens, content first for reading priority. */
.shell{
  max-width:1180px; margin:0 auto; padding:40px 22px 96px;
  display:grid; grid-template-columns:220px minmax(0,720px) 240px; gap:36px;
  align-items:start;
}
.side-left, .side-right{position:sticky; top:24px}
.wrap{max-width:none; margin:0; padding:0}
@media (max-width:1040px){
  .shell{grid-template-columns:220px minmax(0,1fr); max-width:900px}
  .side-right{grid-column:1 / -1; position:static; order:3}
}
@media (max-width:760px){
  .shell{grid-template-columns:1fr; padding:28px 18px 72px}
  .side-left{position:static; order:2}
  .wrap{order:1}
  .side-right{position:static; order:3}
}

header.site{text-align:center; margin-bottom:0; padding:64px 22px 40px}

/* Page hero: no separate photo treatment. The starfield (below) is the
   background for the ENTIRE page, hero included, so the blog reads as one
   continuous piece of the same night sky the app opens on, not a banner
   glued on top of a plain page. */
header.hero{padding:72px 22px 44px}
header.hero .hero-inner{max-width:720px; margin:0 auto}

/* ---- Starfield background, the whole page, matching the app's home screen
   exactly (see makeStarfield()/<ShootingStars/> in src/PocketShaman.jsx).
   Fixed behind all content so it never scrolls away. ---- */
.blog-starfield{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg)}
.bs-star{position:absolute; border-radius:999px; background:#fdf6e3; animation-name:psTwinkle; animation-timing-function:ease-in-out; animation-iteration-count:infinite}
.bs-star.bs-soft{animation-name:psTwinkleSoft}
.bs-shoot{
  position:absolute; height:2px; border-radius:2px;
  background:linear-gradient(to right, rgba(255,240,200,0) 0%, rgba(255,240,200,0.9) 65%, #fff 100%);
  filter:drop-shadow(0 0 4px rgba(255,224,160,0.85));
}
@keyframes psTwinkle { 0%,100%{opacity:0.2} 50%{opacity:0.9} }
@keyframes psTwinkleSoft { 0%,100%{opacity:0.10} 50%{opacity:0.42} }
@keyframes psShoot {
  0% { transform:translate(0,0) rotate(var(--ang)); opacity:0 }
  12% { opacity:1 }
  100% { transform:translate(var(--dx), var(--dy)) rotate(var(--ang)); opacity:0 }
}

/* Ornamental divider: two gold gradient lines with a small gold star between
   them, matching the app's own <Ornament/> component exactly (same star path,
   same amber-300 gold) so the motif feels shared, not reinvented for the blog. */
.ornament{display:flex; align-items:center; justify-content:center; gap:10px; max-width:260px; margin:0 auto 48px}
.ornament .oline{height:1px; width:64px; background:linear-gradient(90deg, transparent, rgba(252,211,77,.5), rgba(252,211,77,.65))}
.ornament .oline.right{background:linear-gradient(270deg, transparent, rgba(252,211,77,.5), rgba(252,211,77,.65))}
.ornament svg{color:#fcd34d; opacity:.85; flex:none}

.mark{font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold)}
h1{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:40px; margin:.4em 0 .15em; color:#fff}
h2{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:25px; color:var(--gold); margin:38px 0 10px}
h3{font-size:18px; font-weight:500; color:#fff; margin:22px 0 6px}
p,li{color:var(--ink)}
a{color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(176,141,87,.4)}
a:hover{border-bottom-color:var(--gold)}
ul{padding-left:22px} li{margin:6px 0}
.lead{color:var(--muted); font-size:18px}
.tagline{color:var(--muted); font-size:15px; margin-top:6px}
.eff{color:var(--muted); font-size:14px; letter-spacing:.04em}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:18px 0}
strong{color:#fff; font-weight:500}
.back{display:inline-block; margin-bottom:28px; font-size:14px; border:none}

/* Listing cards on the index page */
.post-card{
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:24px 26px; margin:18px 0;
  text-decoration:none; border-bottom:1px solid var(--line);
  transition:border-color .15s ease;
}
.post-card:hover{border-color:var(--gold)}
.post-card .cat{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:none}
.post-card h2{margin:8px 0 8px; font-size:24px}
.post-card p{color:var(--muted); font-size:15px; margin:0; border:none}
.post-card .date{color:var(--muted); font-size:13px; margin-top:12px; display:block}

/* In-app call to action at the bottom of a post */
.cta{
  display:block; text-align:center;
  background:linear-gradient(135deg, var(--purple), #241c3d);
  border:1px solid var(--gold); border-radius:14px; padding:28px 24px;
  margin:44px 0 12px; text-decoration:none;
}
.cta .mark{display:block; margin-bottom:8px}
.cta .cta-title{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:26px; color:#fff; display:block}
.cta .cta-sub{color:var(--muted); font-size:15px; display:block; margin-top:6px}
.cta .cta-btn{
  display:inline-block; margin-top:18px; background:var(--gold); color:#1a1206;
  font-family:"Spectral",Georgia,serif; font-weight:500; font-size:15px;
  padding:10px 28px; border-radius:999px;
}

footer.site{margin-top:54px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; text-align:center}
footer.site a{border-bottom:1px solid rgba(176,141,87,.3)}

/* ---- Archive sidebar (Journal / Daily Horoscope / Oracle Draw) ---- */
.idx-block{margin-bottom:34px}
.idx-title{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; font-weight:500}

details.idx-year, details.idx-month{border:none; margin:0}
details.idx-year > summary, details.idx-month > summary{
  display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  padding:6px 0; user-select:none;
}
details.idx-year > summary::-webkit-details-marker,
details.idx-month > summary::-webkit-details-marker{display:none}
details.idx-year > summary{font-family:"Cormorant Garamond",serif; font-weight:600; color:#fff; font-size:18px}
details.idx-month > summary{font-size:14px; color:var(--ink); padding-left:2px}
.chev{display:inline-block; color:var(--gold); font-size:12px; transition:transform .15s ease}
details[open] > summary .chev{transform:rotate(90deg)}

.idx-year-body{padding-left:2px}
.idx-month-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:12px 0 4px}
.idx-post{display:block; font-size:14px; color:var(--ink); border:none; padding:4px 0 4px 12px; line-height:1.4}
.idx-post:hover{color:var(--gold)}
.idx-post.active{color:var(--gold); font-weight:500}

.idx-day-grid{display:flex; flex-wrap:wrap; gap:6px; padding:8px 2px 6px 12px}
.idx-day{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:6px; background:var(--panel);
  font-size:12px; color:var(--muted); text-decoration:none;
}
.idx-day:hover{border-color:var(--gold); color:var(--gold)}
.idx-day.active{border-color:var(--gold); color:var(--gold); background:rgba(176,141,87,.14)}
.idx-empty{font-size:13px; color:var(--muted); font-style:italic}

/* ---- Comments ---- */
.comments{margin-top:56px; padding-top:32px; border-top:1px solid var(--line)}
.comments h2{margin-top:0}
.comment-row{padding:14px 0; border-bottom:1px solid var(--line)}
.comment-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px}
.comment-name{color:#fff; font-weight:500; font-size:15px}
.comment-date{color:var(--muted); font-size:12px; white-space:nowrap}
.comment-message{margin:0; font-size:15px; color:var(--ink)}
.comments-empty{color:var(--muted); font-style:italic; font-size:14px; padding:12px 0}

.comment-form{display:flex; flex-direction:column; gap:10px; margin-top:22px; position:relative}
.comment-form input[type="text"], .comment-form textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:"Spectral",Georgia,serif; font-size:15px;
  padding:10px 14px; resize:vertical;
}
.comment-form textarea{min-height:90px}
.comment-form input:focus, .comment-form textarea:focus{outline:none; border-color:var(--gold)}
.comment-honeypot{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}
.comment-submit{align-self:flex-start; border:none; cursor:pointer}
.comment-status{font-size:13px; color:var(--muted); min-height:1em}

/* ---- Share bar ---- */
.share-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:28px 0}
.share-label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.share-btn{
  display:inline-block; background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:7px 16px; font-size:13px; color:var(--ink); cursor:pointer; text-decoration:none;
  font-family:"Spectral",Georgia,serif;
}
.share-btn:hover{border-color:var(--gold); color:var(--gold)}

/* ---- Events widget (right column) ---- */
.events-widget{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px}
.events-widget .idx-title{margin-bottom:14px}
.event-row{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; text-decoration:none}
.event-row:last-child{border-bottom:none}
.event-date{color:var(--gold); flex:none; width:50px; border:none}
.event-name{color:var(--ink)}
.event-row:hover .event-name{color:var(--gold)}
.events-widget .see-all{display:block; margin-top:14px; font-size:13px; text-align:right}

/* ---- Full-year events page ---- */
.event-full-row{display:flex; gap:20px; padding:18px 0; border-bottom:1px solid var(--line)}
.event-full-date{flex:none; width:150px; color:var(--muted); font-size:14px; padding-top:2px}
.event-full-type{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:4px}
.event-full-name{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:20px; color:#fff; margin-bottom:4px}
.event-full-desc{margin:0 0 6px; font-size:14px; color:var(--ink)}
.event-full-source{font-size:12px; border:none}
@media (max-width:600px){
  .event-full-row{flex-direction:column; gap:4px}
  .event-full-date{width:auto}
}

/* ---- Daily Horoscope month page (pick-your-sign, no birth date) ---- */
.hm-day-row{display:flex; align-items:center; gap:10px; margin-bottom:22px}
.hm-day-label{font-size:13px; color:var(--muted)}
.hm-day-select{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:"Spectral",Georgia,serif; font-size:14px; padding:6px 10px;
}
.hm-sign-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:28px}
@media (max-width:480px){.hm-sign-grid{grid-template-columns:repeat(2, 1fr)}}
.hm-sign-btn{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:"Cormorant Garamond",serif; font-weight:600; font-size:17px;
  padding:14px 10px; cursor:pointer; text-align:center;
}
.hm-sign-btn:hover{border-color:var(--gold); color:var(--gold)}
.hm-sign-btn.active{border-color:var(--gold); background:rgba(176,141,87,.14); color:var(--gold)}
.hm-loading, .hm-error{font-size:14px; color:var(--muted); font-style:italic; padding:12px 0}
.hm-error{color:#e8a0a0}
.hm-reading{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 24px}
.hm-reading-text{margin:10px 0 0; font-size:16px; line-height:1.75}