/* =============================================================================
   Lumeria Noir — base.css
   Design tokens, reset, body, ambient lunar glow, shared motifs, buttons,
   fade-in motion. Identical across all three pages. Page-specific components
   live in pages.css, scoped by body class (.page-hub / .page-book / .page-album).
   ============================================================================= */

:root{
  --ink:#14101A;          /* page background */
  --panel:#1E1825;        /* cards / detail cells */
  --panel-warm:#251D2E;   /* card gradient bottom */
  --rose:#D99FA6;
  --rose-soft:#E8B4B8;    /* italic accents, hover, byline */
  --gold:#C9A86A;         /* primary button, eyebrows, rules */
  --gold-dim:#9A8350;     /* notes, fine print */
  --bone:#EDE6DA;         /* body text, titles */
  --mauve:#9B8FA0;        /* secondary text, labels */
  --line:rgba(201,168,106,0.22); /* hairline borders */
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Jost',sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Ambient lunar glow (fixed, behind everything) ---------- */
body::before{
  content:"";
  position:fixed;
  top:-25vh; left:50%;
  transform:translateX(-50%);
  width:130vw; height:95vh;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse at center,
    rgba(217,159,166,0.10) 0%,
    rgba(201,168,106,0.05) 30%,
    rgba(20,16,26,0) 64%);
}

/* ---------- Narrow centered column (max-width set per page in pages.css) ---------- */
.wrap{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:0 auto;
  padding:0 28px 80px;
}

/* ---------- Gold rule divider ---------- */
.rule{
  width:50px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:26px auto;
}

/* ---------- Eyebrows / section labels ---------- */
.sec-label{
  font-size:0.68rem;
  letter-spacing:0.38em;
  text-transform:uppercase;
  color:var(--gold);
  text-align:center;
  margin-bottom:26px;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Jost',sans-serif; font-weight:400; font-size:0.72rem;
  letter-spacing:0.24em; text-transform:uppercase; text-decoration:none;
  padding:15px 30px; border-radius:2px; transition:all .4s ease; cursor:pointer;
}
.btn-primary{background:var(--gold); color:#14101A; border:1px solid var(--gold);}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--rose-soft); border-color:var(--rose-soft); outline:none;}
.btn-ghost{background:transparent; color:var(--bone); border:1px solid var(--line);}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--rose-soft); color:var(--rose-soft); outline:none;}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:34px 0 8px;}

/* ---------- Footer / closing mark ---------- */
.mark{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.15rem; color:var(--rose-soft);
}

/* ---------- "Coming soon" note (pre-release CTA target) ---------- */
.soon-note{
  text-align:center; font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold-dim); margin-top:26px; scroll-margin-top:40vh;
}

/* ---------- Fade-in entrance ---------- */
.fade{opacity:0; transform:translateY(16px); transition:opacity 1s ease, transform 1s ease;}
.fade.in{opacity:1; transform:none;}

/* ---------- Visible focus for keyboard users ---------- */
a:focus-visible,.portal:focus-visible{outline:none;}

@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .portal,.index a,.track{transition:none;}
}