/* Bedtime Atelier — shared site styles (public pages) */
:root { --navy:#0B1F3A; --navy2:#0E2748; --navy3:#132f56; --gold:#F5C842; --lav:#B9A7F5; --teal:#7FD1C9; --rose:#F0A8B8; --text:#c8d6e5; --muted:#8a9db5; --dim:#6b7c93; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--navy); color:var(--text); font-family:Georgia,'Times New Roman',serif; line-height:1.7; }
.wrap { max-width:1020px; margin:0 auto; padding:0 22px; }
a { color:var(--gold); text-decoration:none; }
h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; color:#fff; line-height:1.25; font-weight:600; }
h1 { font-size:2.4rem; } h2 { font-size:1.6rem; margin-bottom:14px; } h3 { font-size:1.15rem; }
.muted { color:var(--muted); }
.eyebrow { color:var(--gold); font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; font-family:Arial,sans-serif; }
.btn-gold { display:inline-block; background:var(--gold); color:var(--navy); font-family:Arial,sans-serif; font-weight:700; font-size:0.95rem; padding:13px 30px; border-radius:50px; border:none; cursor:pointer; }
.btn-ghost { display:inline-block; border:1px solid rgba(245,200,66,0.5); color:var(--gold); font-family:Arial,sans-serif; font-size:0.95rem; padding:12px 28px; border-radius:50px; }

/* Top bar: menu / brand / actions */
header.site { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:34px 0 18px; }
.menu-btn { background:transparent; border:1px solid rgba(245,200,66,0.35); color:var(--gold); font-size:1.05rem; width:42px; height:42px; border-radius:12px; cursor:pointer; line-height:1; }
.brand { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gold); justify-self:center; }
.brand img { width:40px; height:40px; }
.brand span { font-size:1.05rem; letter-spacing:4px; font-family:Arial,sans-serif; white-space:nowrap; }
.head-actions { display:flex; align-items:center; gap:14px; font-family:Arial,sans-serif; justify-self:end; }
.head-actions .login { color:var(--text); font-size:0.85rem; white-space:nowrap; }
.head-actions .cta { background:var(--gold); color:var(--navy); font-weight:700; font-size:0.82rem; padding:10px 18px; border-radius:50px; white-space:nowrap; }
.head-actions .cta .cta-s { display:none; }

/* Drawer menu */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; }
.scrim.show { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; left:0; bottom:0; width:272px; background:var(--navy2); border-right:1px solid rgba(245,200,66,0.2); transform:translateX(-100%); transition:transform .22s; z-index:50; padding:22px 0; overflow-y:auto; }
.drawer.open { transform:translateX(0); }
.drawer .d-head { display:flex; align-items:center; justify-content:space-between; padding:0 20px 16px; border-bottom:1px solid rgba(245,200,66,0.15); }
.drawer .d-head span { color:var(--gold); font-family:Arial,sans-serif; font-size:0.72rem; letter-spacing:3px; }
.drawer .d-close { background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer; }
.drawer a { display:block; padding:13px 22px; color:var(--text); font-family:Arial,sans-serif; font-size:0.95rem; border-bottom:1px solid rgba(255,255,255,0.04); }
.drawer a:hover { background:rgba(245,200,66,0.08); color:var(--gold); }

.hero { text-align:center; padding:64px 0 48px; }
.hero p.lead { max-width:560px; margin:18px auto 0; color:var(--muted); font-size:1.05rem; }
.section { padding:48px 0; }
.section.alt { background:var(--navy2); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:26px; }
.card { background:var(--navy2); border:1px solid rgba(245,200,66,0.18); border-radius:16px; padding:26px 22px; }
.section.alt .card { background:var(--navy3); }
.card h3 { margin-bottom:8px; }
.card p { color:var(--muted); font-size:0.92rem; }

/* Colorful pressable step cards */
.stepcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:28px; }
.stepcard { display:block; background:var(--navy2); border-radius:18px; padding:28px 22px; text-align:center; border:1px solid transparent; transition:transform .15s, box-shadow .15s; }
a.stepcard { display:block; background:var(--navy2); border-radius:18px; padding:28px 22px; text-align:center; border:1px solid transparent; transition:transform .15s, box-shadow .15s; }
a.stepcard:hover, a.stepcard:active { transform:translateY(-4px); }
.stepcard .ic { font-size:2rem; display:block; margin-bottom:12px; }
.stepcard .n { font-family:Arial,sans-serif; font-size:0.68rem; letter-spacing:2px; display:block; margin-bottom:8px; }
.stepcard h3 { margin-bottom:8px; }
.stepcard p { color:var(--muted); font-size:0.9rem; }
.stepcard.c1 { border-color:rgba(245,200,66,0.45); } a.stepcard.c1 .n { color:var(--gold); } a.stepcard.c1:hover { box-shadow:0 8px 26px rgba(245,200,66,0.15); }
.stepcard.c2 { border-color:rgba(185,167,245,0.45); } a.stepcard.c2 .n { color:var(--lav); } a.stepcard.c2:hover { box-shadow:0 8px 26px rgba(185,167,245,0.15); }
.stepcard.c3 { border-color:rgba(127,209,201,0.45); } a.stepcard.c3 .n { color:var(--teal); } a.stepcard.c3:hover { box-shadow:0 8px 26px rgba(127,209,201,0.15); }

.center { text-align:center; }
.divider { height:1px; background:rgba(245,200,66,0.14); }
footer.site { border-top:1px solid rgba(245,200,66,0.12); margin-top:56px; padding:34px 0 44px; font-family:Arial,sans-serif; font-size:0.8rem; color:var(--dim); }
footer.site .cols { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer.site a { color:var(--muted); }
.prose { max-width:720px; margin:0 auto; }
.prose p { margin-bottom:16px; }
.prose h2 { margin-top:34px; }
.prose ul { margin:0 0 16px 24px; }
.prose li { margin-bottom:8px; }
details { background:var(--navy2); border:1px solid rgba(245,200,66,0.16); border-radius:12px; padding:16px 20px; margin-bottom:12px; }
details summary { cursor:pointer; color:#fff; font-family:'Playfair Display',Georgia,serif; font-size:1.02rem; }
details p { color:var(--muted); font-size:0.92rem; margin-top:10px; }
.story { max-width:680px; margin:0 auto; }
.story p { margin-bottom:18px; font-size:1.04rem; line-height:1.9; }
.story-title { text-align:center; margin-bottom:26px; font-size:1.7rem; }

/* Audio sample player */
.sample-player { display:flex; align-items:center; gap:14px; max-width:440px; margin:0 auto; background:var(--navy2); border:1px solid rgba(245,200,66,0.3); border-radius:50px; padding:10px 18px; }
.sample-player .play-btn { flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--gold); background:rgba(245,200,66,0.12); color:var(--gold); font-size:0.9rem; cursor:pointer; }
.sample-player .play-btn.playing { background:var(--gold); color:var(--navy); }
.sample-player .sp-label { font-family:Arial,sans-serif; font-size:0.85rem; color:var(--text); text-align:left; line-height:1.4; }
.sample-player .sp-label em { color:var(--muted); font-style:normal; font-size:0.75rem; display:block; }

@media (max-width:640px){
  h1{font-size:1.8rem;}
  .hero{padding:44px 0 36px;}
  .brand img{width:26px;height:26px;}
  header.site{grid-template-columns:auto 1fr auto; grid-template-areas:"brand brand brand" "menu . actions"; row-gap:16px; padding:30px 0 14px;}
  .brand{grid-area:brand; justify-self:center;}
  .menu-btn{grid-area:menu; width:38px; height:38px;}
  .head-actions{grid-area:actions; gap:8px;}
  .brand span{font-size:1.05rem; letter-spacing:3px;}
  .brand img{width:38px;height:38px;}
  .head-actions .login{display:none;}
  .head-actions .cta{font-size:0.72rem; padding:8px 14px;}
  .head-actions .cta .cta-l{display:none;}
  .head-actions .cta .cta-s{display:inline;}
}
@media (max-width:360px){
  .brand span{font-size:0.85rem; letter-spacing:2px;}
}