* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
  --cream: #f3ebe0;
  --gold: #f2cf80;
  --gold-soft: rgba(240,205,124,.78);
  --rose: #d98a96;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --read: 680px;   /* chapter reading column on desktop */
  --col: 980px;    /* home column on desktop */
}
body {
  background: #0e0714;
  font-family: var(--sans);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* Mobile-first. On larger screens backgrounds go full-bleed and the inner
   content widens — never a phone floating in the middle. */
#app { min-height: 100svh; }
.screen {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
}

@keyframes letterIn { from { opacity: 0; filter: blur(10px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shake { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-5px);} 40%,60%{transform:translateX(5px);} }
@keyframes softPulse { 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:1;transform:scale(1.04);} }
@keyframes flicker { 0%,100%{opacity:.85;transform:scale(1);} 25%{opacity:1;transform:scale(1.06);} 60%{opacity:.78;transform:scale(.98);} }
@keyframes driftA { 0%,100%{transform:translate(0,0);} 50%{transform:translate(24px,-26px);} }
@keyframes driftB { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-26px,20px);} }
@keyframes driftC { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,22px) scale(1.08);} }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- shared atmosphere (richer / more vibrant) ---------- */
.bg-landing { position:absolute; inset:0; background:
  radial-gradient(140% 100% at 50% 4%, #3a1f3f 0%, #271433 46%, #160c1f 100%); }
.bg-glow-bottom { position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(120% 78% at 50% 120%, rgba(240,180,110,.62) 0%, rgba(217,138,150,.34) 30%, rgba(20,13,24,0) 64%); }
.blob-a { position:absolute; left:-14%; top:46%; width:64%; height:56%; border-radius:50%; background:rgba(217,138,150,.30); filter:blur(70px); animation:driftA 14s ease-in-out infinite; pointer-events:none; }
.blob-b { position:absolute; right:-12%; top:8%;  width:58%; height:50%; border-radius:50%; background:rgba(120,58,128,.55); filter:blur(66px); animation:driftB 17s ease-in-out infinite; pointer-events:none; }
.blob-c { position:absolute; left:38%; top:24%;  width:44%; height:40%; border-radius:50%; background:rgba(240,195,124,.22); filter:blur(80px); animation:driftC 20s ease-in-out infinite; pointer-events:none; }

/* ---------- landing ---------- */
.landing-inner { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 36px; }
.landing-kicker { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:30px; animation:fadeIn 2s 1.4s both; }
.landing-name { font-family:var(--serif); font-weight:300; font-size:84px; line-height:1; margin:0; background:linear-gradient(180deg,#fff6ea 0%,#f2cf80 55%,#e0a45e 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 8px 40px rgba(240,195,124,.25)); }
.landing-name span { display:inline-block; opacity:0; animation:letterIn 1s both; }
.landing-tag { font-family:var(--serif); font-style:italic; font-size:23px; color:rgba(243,235,224,.78); margin:24px 0 0; animation:fadeUp 1.6s 2s both; }
.pw-wrap { margin-top:60px; width:min(300px,80vw); animation:fadeUp 1.6s 2.6s both; }
.pw-field { display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(243,235,224,.32); padding-bottom:10px; }
.pw-field.shake { animation:shake .5s ease; }
.pw-field input { flex:1; background:transparent; border:none; outline:none; color:var(--cream); font-family:var(--serif); font-size:20px; letter-spacing:1px; text-align:center; }
.pw-field button { background:transparent; border:none; color:rgba(240,205,124,.9); font-size:20px; cursor:pointer; line-height:1; padding:0; min-height:44px; min-width:44px; }
.pw-hint { display:block; margin-top:14px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(243,235,224,.3); }
.candle { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,#ffe6a8,#e6a14a); box-shadow:0 0 30px 14px rgba(240,195,124,.6),0 0 80px 36px rgba(240,195,124,.28); animation:flicker 3.2s ease-in-out infinite; margin-bottom:54px; }

/* ---------- onboarding ---------- */
.onb { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:90px 34px; max-width:680px; margin:0 auto; }
.onb.left { align-items:flex-start; text-align:left; }
.onb-kicker { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:26px; animation:fadeIn 1.4s .1s both; }
.onb h1 { font-family:var(--serif); font-weight:300; font-size:60px; line-height:1.02; margin:0; color:var(--cream); animation:fadeUp 1.4s .3s both; }
.onb h2 { font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.1; margin:0 0 22px; color:var(--cream); animation:fadeUp 1.2s .1s both; }
.onb-sub { font-family:var(--serif); font-style:italic; font-size:27px; color:var(--gold); margin:20px 0 0; animation:fadeUp 1.4s 1s both; }
.onb-body { font-family:var(--serif); font-size:22px; line-height:1.85; color:rgba(243,235,224,.85); margin:0; animation:fadeUp 1.4s .7s both; }
.onb-dots-row { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:250px; margin-top:34px; animation:fadeUp 1.4s .9s both; }
.onb-dot { position:relative; width:18px; height:18px; border-radius:50%; border:1px solid rgba(243,235,224,.16); background:rgba(243,235,224,.04); }
.onb-dot.lit::after { content:""; position:absolute; inset:-2px; border-radius:50%; background:radial-gradient(circle,#ffe6a8,#e6a14a); box-shadow:0 0 14px 5px rgba(240,195,124,.6); animation:softPulse 3s ease-in-out infinite; }
.btn-gold { font-family:var(--sans); font-size:15px; letter-spacing:1px; color:#241019; background:linear-gradient(180deg,#ffe6ab,#eec078); border:none; border-radius:999px; padding:16px 44px; cursor:pointer; box-shadow:0 14px 40px rgba(240,195,124,.36); min-height:44px; }
.onb-foot { position:absolute; left:0; right:0; bottom:0; padding:0 0 42px; display:flex; flex-direction:column; align-items:center; gap:22px; }
.onb-continue { display:flex; align-items:center; gap:8px; background:transparent; border:none; cursor:pointer; font-family:var(--sans); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:rgba(243,235,224,.6); min-height:44px; }
.onb-continue span { font-size:16px; color:var(--gold); }
.onb-prog { display:flex; gap:7px; align-items:center; }
.onb-prog i { height:6px; border-radius:999px; transition:all .4s ease; width:6px; background:rgba(243,235,224,.22); }
.onb-prog i.on { width:22px; background:var(--gold); }
.btn-back { position:absolute; top:max(18px,env(safe-area-inset-top)); left:18px; z-index:20; width:44px; height:44px; border-radius:50%; border:1px solid rgba(243,235,224,.14); background:rgba(255,255,255,.05); color:rgba(243,235,224,.65); font-size:18px; cursor:pointer; }

/* ---------- home ---------- */
.home { position:relative; min-height:100svh; background:
  radial-gradient(120% 60% at 50% 0%, #34203f 0%, #21142b 56%, #160d1f 100%); }
.home-inner { position:relative; padding:max(40px,env(safe-area-inset-top)) 22px 56px; max-width:var(--col); margin:0 auto; }
.home-head { display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.avatar { width:46px; height:46px; border-radius:50%; border:1px solid rgba(240,195,124,.55); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:22px; color:var(--gold); }
.home-greet small { font-size:13px; letter-spacing:.5px; color:rgba(243,235,224,.5); display:block; }
.home-greet strong { font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.1; color:var(--cream); }
.hero { position:relative; border-radius:26px; overflow:hidden; cursor:pointer; box-shadow:0 30px 70px rgba(0,0,0,.5); margin-bottom:34px; min-height:218px; transition:transform .35s ease, box-shadow .35s ease; }
.hero:hover { transform:translateY(-3px); box-shadow:0 38px 90px rgba(0,0,0,.55); }
.hero-bg { position:absolute; inset:0; background:linear-gradient(150deg,#7a3656 0%,#4f2a55 46%,#321f3a 100%); }
.hero-glow { position:absolute; inset:0; background:radial-gradient(95% 75% at 82% 6%, rgba(240,195,124,.45), transparent 60%); }
.hero-body { position:relative; padding:26px 24px; min-height:218px; display:flex; flex-direction:column; justify-content:space-between; }
.hero-top { display:flex; justify-content:space-between; align-items:flex-start; }
.tag-kicker { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(240,205,124,.9); }
.badge { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(243,235,224,.6); border:1px solid rgba(243,235,224,.22); border-radius:999px; padding:4px 10px; }
.hero h3 { font-family:var(--serif); font-style:italic; font-weight:400; font-size:34px; line-height:1.08; margin:0 0 16px; color:#fbf3e9; }
.cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; letter-spacing:.5px; color:#241019; background:linear-gradient(180deg,#ffe6ab,#eec078); border-radius:999px; padding:11px 22px; }
.section-label { display:flex; flex-direction:column; gap:3px; margin-bottom:18px; }
.section-label .lab { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(240,195,124,.7); }
.section-label .sub { font-family:var(--serif); font-style:italic; font-size:18px; color:rgba(243,235,224,.55); }
.month-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.month-card { position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:linear-gradient(165deg,#341f3d,#241730); border:1px solid rgba(243,235,224,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px; transition:transform .3s ease, border-color .3s ease; }
.month-card.unlocked { cursor:pointer; }
.month-card.unlocked:hover { transform:translateY(-3px); border-color:rgba(240,195,124,.4); }
.month-card.next::before { content:""; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(240,195,124,.45), 0 0 36px rgba(240,195,124,.16); background:radial-gradient(80% 60% at 50% 30%, rgba(240,195,124,.18), transparent 70%); animation:softPulse 4s ease-in-out infinite; pointer-events:none; }
.month-icon { position:relative; flex:1; display:flex; align-items:center; justify-content:center; }
.env { position:relative; width:50px; height:36px; border:1.5px solid rgba(240,195,124,.46); border-radius:4px; background:rgba(240,195,124,.06); }
.env::before { content:""; position:absolute; top:0; left:0; width:0; height:0; border-left:25px solid transparent; border-right:25px solid transparent; border-top:18px solid rgba(240,195,124,.32); }
.env::after { content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:rgba(217,138,150,.8); box-shadow:0 0 8px rgba(217,138,150,.55); }
.book { width:34px; height:46px; border-radius:3px 6px 6px 3px; background:linear-gradient(90deg,rgba(240,195,124,.2),rgba(240,195,124,.06)); border:1.5px solid rgba(240,195,124,.44); border-left-width:4px; }
.month-foot { position:relative; display:flex; align-items:center; gap:6px; }
.month-foot .nm { font-family:var(--sans); font-size:13px; letter-spacing:.3px; color:rgba(243,235,224,.62); }
.month-card.unlocked .month-foot .nm { color:var(--cream); }
.unlocks-soon { position:relative; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(240,195,124,.85); margin-top:5px; }
.about-link { text-align:center; margin-top:36px; }
.about-link button { font-family:var(--serif); font-style:italic; font-size:16px; color:rgba(243,235,224,.45); border:none; border-bottom:1px solid rgba(243,235,224,.16); background:transparent; padding:0 0 3px; cursor:pointer; }

/* ---------- chapter ---------- */
.chapter { position:relative; min-height:100svh; background:
  radial-gradient(120% 50% at 50% 0%, #2a1730 0%, #1d1226 55%, #160d1d 100%); }
.chapter .btn-back { position:fixed; top:max(18px,env(safe-area-inset-top)); background:rgba(20,13,24,.55); backdrop-filter:blur(8px); border-color:rgba(243,235,224,.16); color:rgba(243,235,224,.8); }
.cover { position:relative; height:470px; overflow:hidden; }
.cover-bg { position:absolute; inset:0; background:linear-gradient(160deg,#7a3656 0%,#4f2a55 45%,#2a1730 100%); }
.cover-glow { position:absolute; inset:0; background:radial-gradient(95% 65% at 70% 6%, rgba(240,195,124,.42), transparent 58%); }
.cover-fade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,#160d1d 100%); }
.cover-inner { position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 34px; }
.cover-kicker { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:rgba(240,205,124,.85); margin-bottom:22px; animation:fadeIn 1.6s .2s both; }
.cover h1 { font-family:var(--serif); font-style:italic; font-weight:400; font-size:46px; line-height:1.08; margin:0; color:#fbf3e9; animation:fadeUp 1.6s .4s both; }
.cover-date { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:rgba(243,235,224,.55); margin-top:24px; animation:fadeUp 1.6s 1s both; }
.chapter-body { position:relative; padding:14px 30px 70px; max-width:var(--read); margin:0 auto; }
.blk { opacity:0; }
.blk.shown { animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.blk-text { font-family:var(--serif); font-size:21px; line-height:1.92; color:rgba(243,235,224,.9); margin:0 0 26px; }
.blk-quote { margin:42px 0; text-align:center; }
.blk-quote .rule { width:40px; height:1px; background:rgba(240,195,124,.45); margin:0 auto 26px; }
.blk-quote .rule.b { margin:26px auto 0; }
.blk-quote p { font-family:var(--serif); font-style:italic; font-size:30px; line-height:1.3; color:var(--gold); margin:0; }
.blk-photo { margin:0 -30px 12px; }
.blk-photo .frame { position:relative; width:100%; aspect-ratio:4/3; background-image:repeating-linear-gradient(135deg,#2a1730 0 14px,#341f3d 14px 28px); display:flex; align-items:center; justify-content:center; }
.blk-photo img { width:100%; display:block; border-radius:2px; }
.blk-photo .ph { font-family:ui-monospace,monospace; font-size:12px; letter-spacing:1px; color:rgba(243,235,224,.4); }
.blk-caption { text-align:center; font-family:var(--serif); font-style:italic; font-size:16px; color:rgba(243,235,224,.5); margin:8px 0 38px; }
.blk-embed { margin:0 -30px 38px; }
.blk-embed .ratio { position:relative; width:100%; aspect-ratio:16/9; background:#0c0712; }
.blk-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.blk-embed.audio .ratio { aspect-ratio:auto; height:152px; }
.blk-list { margin:0 0 40px; }
.blk-list h4 { font-family:var(--serif); font-weight:500; font-size:24px; color:var(--cream); margin:0 0 22px; }
.blk-list .row { display:flex; gap:16px; align-items:baseline; margin-bottom:18px; }
.blk-list .n { font-family:var(--serif); font-style:italic; font-size:22px; color:var(--gold); flex:0 0 auto; width:22px; }
.blk-list .t { font-family:var(--serif); font-size:20px; line-height:1.5; color:rgba(243,235,224,.85); }
.blk-poem { text-align:center; margin:46px 0; padding:0 6px; }
.blk-poem p { font-family:var(--serif); font-style:italic; font-size:21px; line-height:2; color:rgba(243,235,224,.8); margin:0; }
.blk-timeline { margin:0 0 40px; }
.blk-timeline h4 { font-family:var(--serif); font-weight:500; font-size:24px; color:var(--cream); margin:0 0 22px; }
.blk-timeline .tl { display:flex; gap:16px; margin-bottom:20px; }
.blk-timeline .dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:8px; background:var(--gold); box-shadow:0 0 12px rgba(240,195,124,.5); }
.blk-timeline .when { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--gold); }
.blk-timeline .what { font-family:var(--serif); font-size:19px; line-height:1.5; color:rgba(243,235,224,.82); }
.blk-link a { display:block; text-decoration:none; border:1px solid rgba(240,195,124,.28); border-radius:14px; padding:16px 18px; color:var(--gold); font-family:var(--sans); font-size:15px; letter-spacing:.3px; margin:0 0 32px; transition:background .25s ease; }
.blk-link a:hover { background:rgba(240,195,124,.08); }
.chapter-close { text-align:center; margin-top:48px; }
.chapter-close .rule { width:1px; height:46px; background:linear-gradient(rgba(240,195,124,.55),transparent); margin:0 auto 22px; }
.chapter-close p { font-family:var(--serif); font-style:italic; font-size:19px; color:rgba(243,235,224,.6); margin:0 0 28px; white-space:pre-line; }
.chapter-close button { background:transparent; border:none; color:rgba(243,235,224,.5); font-family:var(--sans); font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; min-height:44px; }

/* ---------- loader / about ---------- */
.loader { min-height:100svh; display:flex; align-items:center; justify-content:center; color:rgba(243,235,224,.4); font-family:var(--serif); font-style:italic; font-size:20px; }
.sheet { position:fixed; inset:0; z-index:80; background:rgba(12,7,18,.78); backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center; }
.sheet-card { width:100%; max-width:520px; background:#22152c; border-radius:26px 26px 0 0; padding:34px 28px max(34px,env(safe-area-inset-bottom)); }
.sheet-card h4 { font-family:var(--serif); font-size:24px; margin:0 0 16px; color:var(--cream); }
.sheet-card p { font-family:var(--serif); font-size:19px; line-height:1.7; color:rgba(243,235,224,.8); margin:0 0 22px; }

/* ============================================================
   RESPONSIVE — wider, more spacious on larger screens
   ============================================================ */
@media (min-width:700px) {
  .month-grid { grid-template-columns:repeat(3,1fr); gap:18px; }
  .home-inner { padding-left:36px; padding-right:36px; }
  .hero { min-height:300px; }
  .hero-body { padding:36px 36px; }
  .hero h3 { font-size:46px; }
  .landing-name { font-size:112px; }
  .cover { height:60vh; min-height:440px; }
  .cover h1 { font-size:60px; }
  .chapter-body { padding-top:24px; }
}

@media (min-width:1024px) {
  .month-grid { grid-template-columns:repeat(4,1fr); gap:22px; }
  .home-inner { padding-top:64px; }
  /* hero gets a two-up feel: larger and brighter */
  .hero { min-height:340px; }
  .hero h3 { font-size:54px; }
  .home-greet strong { font-size:30px; }
  .landing-name { font-size:140px; }
  .landing-tag { font-size:28px; }
  .onb h1 { font-size:76px; }
  .onb h2 { font-size:52px; }
  .onb-body { font-size:26px; }
  .cover h1 { font-size:72px; }
  .blk-text { font-size:23px; }
  .blk-quote p { font-size:38px; }
  /* keep the back button aligned near the reading column, not the far edge */
  .chapter .btn-back { left:max(18px, calc(50% - var(--read)/2 - 64px)); }
}

@media (min-width:1500px) {
  .landing-name { font-size:172px; }
}