/* =============================================================================
   Lumeria Noir — pages.css
   Page-specific components, scoped by body class. base.css holds the shared
   tokens, body, glow default (= album), buttons, rule, sec-label, fade motion.
   ============================================================================= */

/* Shared eyebrow (book + album use gold; hub overrides to mauve below). */
.eyebrow{
  font-size:0.7rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}

/* Top nav (book + album). */
.topnav{
  display:flex; justify-content:center; padding:30px 0 18px;
  font-size:0.66rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--mauve);
}
.topnav a{color:var(--mauve); text-decoration:none; transition:color .3s ease;}
.topnav a:hover,.topnav a:focus-visible{color:var(--rose-soft); outline:none;}


/* =============================================================================
   HUB  —  .page-hub  (max-width 560px)
   ============================================================================= */
.page-hub .wrap{max-width:560px; padding:0 28px 80px;}

.page-hub body::before,
body.page-hub::before{
  top:-22vh; width:120vw; height:90vh;
  background:radial-gradient(ellipse at center,
    rgba(217,159,166,0.10) 0%,
    rgba(201,168,106,0.06) 28%,
    rgba(20,16,26,0) 62%);
}

.page-hub .hero{
  min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 0 40px;
}
.page-hub .eyebrow{
  font-weight:400; font-size:0.72rem; letter-spacing:0.42em;
  color:var(--mauve); margin-bottom:26px;
}
.page-hub .moon{
  width:8px; height:8px; border-radius:50%;
  background:var(--rose-soft);
  box-shadow:0 0 22px 6px rgba(232,180,184,0.45);
  margin:0 auto 30px;
}
.page-hub .title{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(3.4rem,16vw,5.6rem); line-height:0.98;
  letter-spacing:0.01em; color:var(--bone);
}
.page-hub .title .noir{
  display:block; font-style:italic; font-weight:400; color:var(--rose-soft);
}
.page-hub .rule{width:52px; margin:34px auto 28px;}
.page-hub .thesis{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.15rem,4.6vw,1.45rem); color:var(--mauve);
  max-width:34ch; line-height:1.5;
}
.page-hub .scrollcue{
  margin-top:54px; font-size:0.66rem; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--gold-dim);
}
.page-hub .sec-label{color:var(--mauve); margin-bottom:30px;}

/* Portals */
.page-hub .portals{padding-top:30px;}
.page-hub .portal{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:2px;
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-warm) 100%);
  padding:26px 28px; margin-bottom:18px; position:relative; overflow:hidden;
  transition:border-color .5s ease, transform .4s ease, box-shadow .5s ease;
}
.page-hub .portal::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold); transform:scaleY(0); transform-origin:top;
  transition:transform .5s ease;
}
.page-hub .portal:hover,.page-hub .portal:focus-visible{
  border-color:rgba(201,168,106,0.55); transform:translateY(-2px);
  box-shadow:0 12px 40px -22px rgba(217,159,166,0.5); outline:none;
}
.page-hub .portal:hover::after,.page-hub .portal:focus-visible::after{transform:scaleY(1);}
.page-hub .portal .verb{
  font-family:'Jost',sans-serif; font-weight:400; font-size:0.72rem;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:8px;
}
.page-hub .portal .name{
  font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:500;
  line-height:1.1; color:var(--bone); margin-bottom:6px;
}
.page-hub .portal .desc{font-size:0.9rem; color:var(--mauve);}

/* About */
.page-hub .about{padding-top:80px; text-align:center;}
.page-hub .about p{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.25rem,5vw,1.5rem);
  line-height:1.6; color:var(--bone); max-width:36ch; margin:0 auto;
}
.page-hub .about p .accent{color:var(--rose-soft); font-style:italic;}

/* Index */
.page-hub .index{padding-top:80px;}
.page-hub .index a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  text-decoration:none; color:var(--bone); padding:18px 4px;
  border-bottom:1px solid var(--line);
  transition:color .35s ease, padding-left .35s ease;
}
.page-hub .index a:first-child{border-top:1px solid var(--line);}
.page-hub .index a:hover,.page-hub .index a:focus-visible{
  color:var(--rose-soft); padding-left:10px; outline:none;
}
.page-hub .index .lbl{font-family:'Cormorant Garamond',serif; font-size:1.25rem;}
.page-hub .index .meta{
  font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mauve); white-space:nowrap;
}

/* Footer */
.page-hub footer{text-align:center; padding-top:74px;}
.page-hub footer .mark{margin-bottom:8px;}
.page-hub footer .fine{
  font-size:0.66rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold-dim);
}


/* =============================================================================
   BOOK  —  .page-book  (max-width 680px)
   ============================================================================= */
.page-book{line-height:1.75;}
.page-book .wrap{max-width:680px; padding:0 28px 90px;}

.page-book body::before,
body.page-book::before{
  background:radial-gradient(ellipse at center,
    rgba(217,159,166,0.09) 0%,
    rgba(201,168,106,0.05) 30%,
    rgba(20,16,26,0) 64%);
}

.page-book .topnav{padding:30px 0 10px;}
.page-book .hero{text-align:center; padding:34px 0 18px;}
.page-book .title{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(3rem,13vw,4.8rem); line-height:1; color:var(--bone);
}
.page-book .byline{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.25rem; color:var(--rose-soft); margin-top:14px;
}
.page-book .tagline{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.15rem,4.4vw,1.4rem); color:var(--mauve); max-width:30ch; margin:0 auto;
}

/* Real cover (replaces the CSS placeholder concept) */
.page-book .cover-stage{display:flex; justify-content:center; padding:46px 0 14px;}
.page-book .cover-real{
  display:block; width:248px; max-width:72vw; height:auto; border-radius:3px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(201,168,106,0.18);
}

/* Pull quote */
.page-book .pull{
  text-align:center; padding:78px 0 8px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.4rem,5.6vw,1.9rem); line-height:1.5; color:var(--bone);
}
.page-book .pull span{display:block; color:var(--rose-soft);}
.page-book .pull .src{
  display:block; font-style:normal; font-family:'Jost',sans-serif;
  font-size:0.66rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--mauve); margin-top:26px;
}

/* Sections + prose */
.page-book .sec{padding-top:76px;}
.page-book .sec-label{color:var(--gold);}
.page-book .prose p{
  font-size:1.04rem; color:var(--bone); margin-bottom:20px; text-align:center;
  max-width:48ch; margin-left:auto; margin-right:auto;
}
.page-book .prose p.lead{
  font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-style:italic; color:var(--rose-soft);
}

/* Details grid */
.page-book .details{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:2px;
  overflow:hidden; margin-top:14px;
}
.page-book .details div{background:var(--panel); padding:22px 20px; text-align:center;}
.page-book .details .k{
  font-size:0.62rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--mauve); margin-bottom:8px;
}
.page-book .details .v{font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--bone);}

/* Closing */
.page-book .closing{text-align:center; padding-top:84px;}
.page-book .closing .mark{margin-top:30px;}

@media (max-width:430px){ .page-book .details{grid-template-columns:1fr;} }


/* =============================================================================
   ALBUM  —  .page-album  (max-width 640px)
   ============================================================================= */
.page-album .wrap{max-width:640px; padding:0 28px 90px;}

.page-album .hero{text-align:center; padding:14px 0 6px;}

/* Album art — CSS eclipse-moon concept */
.page-album .art-stage{display:flex; justify-content:center; padding:6px 0 16px;}
.page-album .art{
  width:300px; height:300px; max-width:84vw; max-height:84vw; border-radius:4px;
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #2A2030 0%, #1A1422 55%, #100C16 100%);
  box-shadow:0 34px 80px -34px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,168,106,0.18) inset;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.page-album .art .moon{
  width:120px; height:120px; border-radius:50%; margin-bottom:22px; position:relative;
  background:radial-gradient(circle at 38% 36%, #F2D9DC 0%, #E8B4B8 42%, #C99097 70%, #8E6A72 100%);
  box-shadow:0 0 50px 8px rgba(232,180,184,0.35);
}
.page-album .art .moon::after{
  content:""; position:absolute; top:-6%; left:24%; width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(20,16,26,0.92), rgba(20,16,26,0.7) 55%, transparent 72%);
}
.page-album .art .a-title{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:1.7rem; line-height:1.1; color:var(--bone);
}
.page-album .art .a-artist{
  font-size:0.6rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--gold); margin-top:12px;
}
.page-album .art-note{
  text-align:center; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold-dim); margin-top:14px;
}
/* Real album art (when an image is supplied) */
.page-album .art-real{
  width:300px; height:300px; max-width:84vw; max-height:84vw; border-radius:4px; object-fit:cover;
  box-shadow:0 34px 80px -34px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,168,106,0.18);
}

.page-album .title{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(2.6rem,11vw,3.8rem); line-height:1; color:var(--bone); margin-top:30px;
}
.page-album .byline{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.2rem; color:var(--rose-soft); margin-top:12px;
}
.page-album .rule{margin:24px auto;}
.page-album .tagline{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.1rem,4.4vw,1.35rem); color:var(--mauve); max-width:32ch; margin:0 auto;
}

/* Buttons sized slightly tighter on the album page (matches source) */
.page-album .btn{font-size:0.7rem; letter-spacing:0.22em; padding:14px 26px;}
.page-album .cta-row{gap:12px; padding:34px 0 6px;}

/* Concept */
.page-album .concept{text-align:center; padding-top:78px;}
.page-album .sec-label{color:var(--gold);}
.page-album .concept p{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.2rem,4.8vw,1.45rem); line-height:1.6; color:var(--bone);
  max-width:34ch; margin:0 auto;
}
.page-album .concept p .accent{color:var(--rose-soft);}

/* Tracklist */
.page-album .tracks{padding-top:78px;}
.page-album .track{
  display:flex; align-items:baseline; gap:18px; padding:15px 4px;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s ease, color .35s ease;
}
.page-album .track:first-of-type{border-top:1px solid var(--line);}
.page-album .track:hover{padding-left:10px; color:var(--rose-soft);}
.page-album .track .no{font-size:0.78rem; color:var(--gold); letter-spacing:0.1em; min-width:26px;}
.page-album .track .tname{font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:inherit; flex:1;}
.page-album .track .len{font-size:0.72rem; color:var(--mauve); letter-spacing:0.12em;}

/* Closing */
.page-album .closing{text-align:center; padding-top:84px;}
.page-album .closing .mark{margin-top:28px;}