/* ---- Book of Intentions reel ---- */
.b-root{
  --mid-ink:#1d1a26; --mid-card:#252031; --mid-soft:#2a2635;
  --mid-parch:#ece5d8; --mid-dim:#b7afa4; --mid-faint:#9d958a;
  --mid-gold:#d2a84f; --mid-gild:rgba(210,168,79,.35);
  --par-ink:#f2e8d5; --par-card:#fbf4e6; --par-soft:#f0e6d2;
  --par-parch:#3a2f26; --par-dim:#5f4e39; --par-faint:#715f4b;
  --par-gold:#8a5f22; --par-gild:rgba(138,95,34,.45);
  --bserif:'Fraunces',Georgia,serif;
  --bui:'Inter',system-ui,sans-serif;
}
.b-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:20px;background:#15121d}
.b-stage{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:0 0}
.b-camera{position:absolute;inset:0}
.b-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:64px;padding:0 80px}

/* the night field behind everything */
.b-sky{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 22% 12%,rgba(210,168,79,.13),transparent 58%),
  radial-gradient(90% 80% at 85% 80%,rgba(120,106,160,.16),transparent 60%),
  linear-gradient(#15121d,#1d1a26)}
.b-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#ece5d8;opacity:.5}

/* phone */
.b-phone{position:relative;width:306px;height:624px;border-radius:44px;flex:none;
  background:#0e0c14;padding:11px;box-shadow:0 50px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(236,229,216,.12)}
.b-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:var(--mid-ink);color:var(--mid-parch);font-family:var(--bui);display:flex;flex-direction:column}
.b-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:22px;
  border-radius:12px;background:#0e0c14;z-index:5}
.b-status{display:flex;justify-content:space-between;padding:13px 20px 0;font-size:11px;color:var(--mid-faint);
  font-family:'DM Mono',monospace}

/* lock screen */
.b-lock{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:60px}
.b-lockdate{font-size:13px;color:var(--mid-dim);letter-spacing:.02em}
.b-lockclock{font-family:var(--bserif);font-size:68px;line-height:1.05;font-weight:400;color:var(--mid-parch);margin-top:2px}
.b-notif{margin:26px 16px 0;align-self:stretch;background:rgba(37,32,49,.94);border:1px solid var(--mid-gild);
  border-radius:18px;padding:13px 15px;backdrop-filter:blur(8px)}
.b-notif .b-h{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--mid-gold);
  font-family:'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.b-moonicon{width:15px;height:15px;border-radius:50%;background:var(--mid-gold);
  box-shadow:inset -5px 0 0 0 var(--mid-card)}
.b-notif b{display:block;font-family:var(--bserif);font-size:15px;font-weight:400;margin-top:7px;color:var(--mid-parch)}
.b-notif p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--mid-dim)}

/* the book page */
.b-page{flex:1;display:flex;flex-direction:column;padding:26px 22px 0;opacity:0}
.b-greet{font-size:12px;color:var(--mid-faint);font-family:'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.b-title{font-family:var(--bserif);font-size:27px;font-weight:400;line-height:1.15;margin:7px 0 0;color:var(--mid-parch)}
.b-rule{height:1px;background:var(--mid-gild);margin:16px 0}
.b-moonrow{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mid-dim)}
.b-field{margin-top:16px;border:1px solid var(--mid-gild);border-radius:14px;padding:13px 14px;background:var(--mid-card);min-height:62px}
.b-prompt{font-family:var(--bserif);font-style:italic;font-size:14px;color:var(--mid-faint)}
.b-typed{font-family:var(--bserif);font-size:16px;color:var(--mid-parch);line-height:1.45}
.b-why{margin-top:12px;font-family:var(--bserif);font-style:italic;font-size:13px;color:var(--mid-faint);line-height:1.5;opacity:0}
.b-seal{margin:18px auto 0;width:74px;height:74px;border-radius:50%;border:1px solid var(--mid-gold);
  display:grid;place-items:center;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mid-gold);opacity:0}
.b-kept{margin-top:14px;text-align:center;font-family:var(--bserif);font-style:italic;font-size:13.5px;color:var(--mid-dim);opacity:0}

/* almanac wheel */
.b-alm{flex:1;padding:26px 22px 0;opacity:0;display:flex;flex-direction:column;align-items:center}
.b-wheel{position:relative;width:206px;height:206px;margin-top:14px}
.b-wheel>svg{position:absolute;inset:0}
.b-fest{position:absolute;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mid-faint);transform:translate(-50%,-50%)}
.b-fest.b-now{color:var(--mid-gold)}
.b-whisper{margin-top:18px;font-family:var(--bserif);font-style:italic;font-size:14.5px;line-height:1.55;
  text-align:center;color:var(--mid-dim);padding:0 6px}
.b-whisper b{display:block;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid-gold);font-family:'DM Mono',monospace;margin-bottom:7px}

/* tab bar */
.b-tabs{display:flex;justify-content:space-around;padding:12px 8px 20px;border-top:1px solid var(--mid-gild)}
.b-tabs span{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.05em;color:var(--mid-faint);text-transform:uppercase}
.b-tabs span.b-on{color:var(--mid-gold)}

/* the parchment hand — same markup, re-skinned by a class */
.b-screen.b-par{background:var(--par-ink);color:var(--par-parch)}
.b-par .b-lockclock,.b-par .b-title,.b-par .b-typed,.b-par .b-notif b{color:var(--par-parch)}
.b-par .b-greet,.b-par .b-prompt,.b-par .b-why,.b-par .b-faintable{color:var(--par-faint)}
.b-par .b-rule{background:var(--par-gild)}
.b-par .b-moonrow,.b-par .b-whisper,.b-par .b-kept,.b-par .b-notif p{color:var(--par-dim)}
.b-par .b-field{background:var(--par-card);border-color:var(--par-gild)}
.b-par .b-seal{border-color:var(--par-gold);color:var(--par-gold)}
.b-par .b-whisper b,.b-par .b-tabs span.b-on,.b-par .b-notif .b-h{color:var(--par-gold)}
.b-par .b-tabs{border-top-color:var(--par-gild)}
.b-par .b-tabs span,.b-par .b-fest{color:var(--par-faint)}
.b-par .b-fest.b-now{color:var(--par-gold)}
.b-par .b-moonicon{background:var(--par-gold);box-shadow:inset -5px 0 0 0 var(--par-card)}

/* the words beside the phone */
.b-aside{flex:1;max-width:430px}
.b-aside h3{font-family:var(--bserif);font-weight:400;font-size:40px;line-height:1.18;margin:0;color:#ece5d8;letter-spacing:-.015em}
.b-aside p{font-size:16px;line-height:1.6;color:#b7afa4;margin:16px 0 0}
.b-aside .b-two{display:flex;gap:30px;margin-top:26px}
.b-aside .b-two div{flex:1}
.b-aside .b-two b{display:block;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#d2a84f;margin-bottom:6px}
.b-aside .b-two span{font-size:13.5px;color:#9d958a;line-height:1.5}

/* sign-off */
.b-end{text-align:center}
.b-end .b-word{font-family:var(--bserif);font-size:62px;font-weight:400;line-height:1.1;margin:0;
  color:#ece5d8;letter-spacing:-.02em;overflow:hidden}
.b-end .b-word span{display:inline-block}
.b-end .b-sub{font-family:var(--bserif);font-style:italic;font-size:19px;color:#b7afa4;margin:14px 0 0}
.b-end .b-row{display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.b-end .b-row span{font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  padding:9px 16px;border-radius:999px;border:1px solid var(--mid-gild);color:#b7afa4}
.b-end .b-row .b-store{background:#d2a84f;border-color:#d2a84f;color:#1d1a26}
.b-bigmoon{width:66px;height:66px;border-radius:50%;margin:0 auto 24px;background:#d2a84f;
  box-shadow:inset -20px 0 0 0 #1d1a26,0 0 50px rgba(210,168,79,.4)}

.b-cursor{position:absolute;top:0;left:0;width:26px;height:26px;pointer-events:none;z-index:40}
.b-ripple{position:absolute;top:-13px;left:-13px;width:52px;height:52px;border-radius:50%;
  background:rgba(210,168,79,.5);opacity:0}
.b-flash{position:absolute;inset:0;background:#ece5d8;opacity:0;pointer-events:none}
.b-caption{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:14px 20px;font-family:'DM Mono',monospace;font-size:12px;color:#b7afa4;letter-spacing:.03em}
.b-caption .b-n{color:#d2a84f}