:root { --ink:#312b3d; --muted:#746c7b; --paper:#fffaf5; --cream:#f9efe6; --lilac:#dcd4f5; --lavender:#9380c5; --peach:#f4c9b5; --coral:#dd806e; --sage:#b9d2bf; --line:rgba(63,48,73,.14); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; overflow-x:hidden; } button { font:inherit; } .wrap { width:min(1120px, calc(100% - 48px)); margin-inline:auto; } .page-glow { position:absolute; z-index:-1; border-radius:50%; filter:blur(5px); opacity:.55; } .glow-one { width:460px; height:460px; top:-220px; left:-120px; background:#f1dbdf; }.glow-two { width:540px; height:540px; top:230px; right:-310px; background:#e4ddf7; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:27px 0; } .brand { text-decoration:none; color:var(--ink); font-family:Fraunces,serif; font-size:20px; font-weight:700; letter-spacing:-.7px; } .brand-mark { color:var(--coral); font-family:"DM Sans",sans-serif; margin-right:3px; }.nav-link { color:var(--muted); font-size:14px; text-decoration:none; }.nav-link span { color:var(--coral); padding-left:4px; }
.hero { padding:82px 0 96px; text-align:center; }.eyebrow { display:flex; align-items:center; justify-content:center; gap:9px; margin:0; color:var(--lavender); text-transform:uppercase; letter-spacing:1.6px; font:500 10px "DM Mono",monospace; }.eyebrow span { width:6px; height:6px; background:var(--coral); border-radius:50%; }.hero h1 { margin:17px 0 20px; font:700 clamp(54px,8.5vw,102px)/.93 Fraunces,serif; letter-spacing:-5px; }.hero h1 em { color:var(--lavender); font-style:italic; }.intro { max-width:510px; margin:0 auto; color:var(--muted); font-size:16px; line-height:1.65; }.controls { display:grid; max-width:690px; margin:38px auto 0; gap:19px; text-align:left; }.filter-group { display:flex; align-items:center; gap:17px; }.filter-label { flex:0 0 54px; font:500 10px "DM Mono",monospace; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }.filter-pills { display:flex; flex-wrap:wrap; gap:7px; }.filter { border:1px solid var(--line); border-radius:999px; padding:8px 13px; background:rgba(255,255,255,.55); color:var(--muted); cursor:pointer; font-size:13px; transition:.2s ease; }.filter:hover { border-color:var(--lavender); }.filter.active { background:var(--lilac); border-color:transparent; color:#51456e; font-weight:600; }.generate-button { justify-self:center; min-width:315px; margin-top:8px; padding:15px 20px; border:0; border-radius:8px; box-shadow:0 8px 0 #b7a9dc, 0 12px 24px rgba(104,87,142,.19); background:var(--lavender); color:#fff; font-weight:700; cursor:pointer; transition:transform .2s,box-shadow .2s; }.generate-button:hover { transform:translateY(-2px); box-shadow:0 10px 0 #b7a9dc, 0 15px 27px rgba(104,87,142,.2); }.generate-button:active { transform:translateY(5px); box-shadow:0 3px 0 #b7a9dc; }.spark { color:#ffe5af; margin-right:7px; }.arrow { margin-left:13px; }.tiny-note { margin:24px 0 0; color:#a49ba8; font-size:12px; }
.sheet-section { padding-bottom:112px; }.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.section-heading .eyebrow { justify-content:flex-start; }.hint { color:#aaa1aa; font-size:12px; margin:0; }.character-sheet { position:relative; overflow:hidden; min-height:382px; background:#fffdf9; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 44px rgba(67,45,76,.08); }.sheet-topline { position:absolute; inset:0 0 auto; z-index:3; display:flex; justify-content:space-between; padding:18px 21px; color:#a59ba6; font:10px "DM Mono",monospace; letter-spacing:1.2px; }.sheet-tag { color:var(--coral); }.empty-state { display:grid; place-content:center; height:382px; text-align:center; color:#968d9b; font:17px/1.5 Fraunces,serif; }.empty-state p { margin:8px 0 0; }.empty-star { color:var(--peach); font-size:33px; }.result-content { display:grid; grid-template-columns:34% 66%; min-height:438px; }.portrait-panel { position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:52px 30px 28px; overflow:hidden; color:#fff; background:#b9aecf; }.portrait-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(49,43,61,.27)); pointer-events:none; }.portrait-label,.portrait-panel p,.palette { z-index:1; }.portrait-label { position:absolute; top:52px; left:30px; color:rgba(255,255,255,.8); font:10px "DM Mono",monospace; letter-spacing:1.2px; }.portrait-panel p { max-width:210px; margin:0 0 14px; font:600 15px/1.3 Fraunces,serif; }.portrait-art { position:absolute; inset:0; overflow:hidden; }.halo { position:absolute; top:73px; left:50%; width:195px; aspect-ratio:1; border:1px solid rgba(255,255,255,.52); border-radius:50%; transform:translateX(-50%); }.head { position:absolute; z-index:2; width:102px; height:132px; left:50%; bottom:102px; border-radius:47% 47% 42% 42%; background:#f7d4c1; transform:translateX(-50%); }.head i { position:absolute; top:-19px; left:-8px; width:119px; height:75px; background:#594c64; border-radius:68% 45% 40% 25%; }.head b { position:absolute; top:66px; left:28px; width:8px; height:8px; border-radius:50%; background:#5c4c5d; box-shadow:39px 0 #5c4c5d; }.neck { position:absolute; z-index:1; left:50%; bottom:81px; width:35px; height:45px; background:#f1c6af; transform:translateX(-50%); }.shoulders { position:absolute; z-index:2; left:50%; bottom:-30px; width:260px; height:142px; border-radius:50% 50% 0 0; background:#796796; transform:translateX(-50%); }.art-star { position:absolute; color:#fff4c8; font-size:22px; }.s1 { top:105px; right:37px; }.s2 { top:190px; left:34px; font-size:28px; }.palette { display:flex; gap:5px; }.palette span { width:21px; height:21px; border:2px solid rgba(255,255,255,.76); border-radius:50%; }.details-panel { padding:57px 38px 26px; }.identity { display:flex; align-items:baseline; gap:11px; }.result-kicker { margin:0; color:var(--coral); font:10px "DM Mono",monospace; letter-spacing:1px; text-transform:uppercase; }.identity h2 { margin:7px 0 0; font:700 clamp(33px,4vw,50px)/1 Fraunces,serif; letter-spacing:-2.2px; }.age { margin:0 0 0 auto; color:#948a98; font-size:13px; }.hook { max-width:520px; margin:21px 0 24px; color:#594f61; font:600 19px/1.36 Fraunces,serif; }.hook::before,.hook::after { color:var(--peach); }.hook::before { content:"“"; }.hook::after { content:"”"; }.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 34px; padding-top:20px; border-top:1px solid var(--line); }.detail-grid section h3 { margin:0 0 5px; color:var(--lavender); text-transform:uppercase; font:10px "DM Mono",monospace; letter-spacing:1px; }.detail-grid section p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }.sheet-actions { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }.text-button { border:0; padding:0; background:none; color:var(--coral); cursor:pointer; font-size:12px; text-decoration:underline; text-underline-offset:3px; }.small-generate { border:1px solid var(--line); border-radius:7px; padding:9px 11px; background:var(--cream); color:#5f5269; cursor:pointer; font-size:12px; font-weight:600; }.small-generate span { color:var(--coral); margin-left:7px; }
.how { padding:72px 0 87px; border-top:1px solid var(--line); }.how .eyebrow { justify-content:flex-start; }.how-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; padding-top:22px; }.how h2 { margin:0; font:700 clamp(35px,5vw,60px)/.97 Fraunces,serif; letter-spacing:-3px; }.how-copy { max-width:380px; color:var(--muted); font-size:15px; line-height:1.7; }.how-copy p { margin:0; }.how-copy .made-with { margin-top:26px; color:var(--ink); font:500 12px "DM Mono",monospace; }.made-with span { color:var(--coral); }.footer { display:flex; justify-content:space-between; padding:21px 0 28px; color:#9c929f; border-top:1px solid var(--line); font-size:11px; }
@media (max-width:720px) { .wrap { width:min(100% - 32px,1120px); }.nav { padding-top:20px; }.hero { padding:65px 0 72px; }.hero h1 { letter-spacing:-3px; }.filter-group { align-items:flex-start; flex-direction:column; gap:8px; }.generate-button { width:100%; min-width:0; }.section-heading .hint { display:none; }.result-content { grid-template-columns:1fr; }.portrait-panel { min-height:286px; }.details-panel { padding:50px 22px 22px; }.identity { display:block; }.identity h2 { margin-top:8px; }.age { margin:7px 0 0; }.hook { font-size:18px; }.detail-grid { gap:16px; }.sheet-actions { gap:15px; }.how { padding:55px 0; }.how-grid { grid-template-columns:1fr; gap:25px; }.footer { flex-direction:column; gap:7px; }.empty-state { height:330px; } }
/* Keep the content visually connected to the character-file label. */
.portrait-label { top:38px; }
.halo { top:59px; }
.s1 { top:91px; }
.s2 { top:176px; }
.details-panel { padding-top:40px; }
/* The visual-vibe panel is copy-first; its palette remains the visual cue. */
.portrait-art { display:none; }
/* Before the first generation, keep the character-file card as a compact header. */
.character-sheet.empty { min-height:58px; }
.character-sheet.empty .empty-state { display:none; }
/* Do not reserve result-card space before the first character exists. */
#generator:has(.character-sheet.empty) { padding-bottom:0; }
/* In a populated sheet, use the top row for content instead of empty breathing room. */
.character-sheet:not(.empty) .details-panel { padding-top:21px; }
.character-sheet:not(.empty) .portrait-label { top:21px; }
.character-sheet:not(.empty) .sheet-number { display:none; }
/* Align a generated character's identity with the file label—no blank row. */
.character-sheet:not(.empty) .details-panel { padding-top:10px; }
.identity h2 { margin-top:0; }
/* Keep the populated file label and name together, rather than in separate columns. */
.character-sheet:not(.empty) .sheet-topline { display:none; }
.file-inline { color:var(--coral); font:10px "DM Mono",monospace; letter-spacing:1.1px; text-transform:uppercase; white-space:nowrap; }
.character-sheet:not(.empty) .identity { gap:10px; }
@media (max-width:720px) { .character-sheet:not(.empty) .identity { display:flex; flex-wrap:wrap; align-items:baseline; } }
/* Generated results should end cleanly, without a blank section beneath the sheet. */
.sheet-section { padding-bottom:0; }
/* The placeholder must not keep its fixed height after a result is revealed. */
.empty-state[hidden] { display:none; }
/* Generated concept sketch: deliberately loose and kept above the written visual brief. */
.portrait-art.rough-sketch { display:block; inset:38px 24px auto; height:188px; border:1px solid rgba(255,255,255,.42); border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.rough-sketch .sketch-note { position:absolute; top:9px; left:10px; color:rgba(255,255,255,.8); font:9px "DM Mono",monospace; letter-spacing:.8px; }
.rough-sketch .halo { top:24px; width:126px; border-style:dashed; opacity:.65; }
.rough-sketch .head { bottom:24px; width:76px; height:97px; filter:drop-shadow(3px 3px 0 rgba(49,43,61,.18)); }
.rough-sketch .head i { width:91px; height:57px; }
.rough-sketch .head b { top:52px; left:21px; transform:scale(.75); transform-origin:left; }
.rough-sketch .neck { bottom:8px; }
.rough-sketch .shoulders { bottom:-65px; width:215px; height:130px; background:rgba(49,43,61,.7); }
.rough-sketch .s1 { top:35px; right:19px; }.rough-sketch .s2 { top:90px; left:22px; }
.sketch-stroke { position:absolute; height:1px; background:rgba(255,255,255,.6); transform:rotate(-28deg); }.sketch-stroke.one { width:66px; right:-11px; top:110px; }.sketch-stroke.two { width:47px; left:-8px; top:141px; transform:rotate(34deg); }
.rough-sketch.horror .head i { background:#302638; border-radius:65% 52% 18% 35%; }.rough-sketch.horror .shoulders { background:#24212f; }.rough-sketch.historical .head i { background:#7e5849; border-radius:48% 52% 22% 22%; }.rough-sketch.historical .shoulders { background:#495467; }.rough-sketch.postapoc .head i { background:#5a4f46; border-radius:65% 25% 40% 25%; }.rough-sketch.postapoc .shoulders { background:#5f6557; }.rough-sketch.scifi .head i { background:#44576a; }.rough-sketch.scifi .shoulders { background:#566987; }.rough-sketch.fantasy .head i { background:#574762; }.rough-sketch.fantasy .shoulders { background:#62705e; }
.name-reroll { border:0; padding:4px 6px; border-radius:4px; background:var(--cream); color:var(--coral); cursor:pointer; font:10px "DM Mono",monospace; white-space:nowrap; }.name-reroll:hover { background:var(--peach); color:var(--ink); }
.how-steps { display:grid; gap:17px; }.how-steps div { display:grid; grid-template-columns:31px 1fr; gap:11px; }.how-steps span { color:var(--coral); font:500 11px "DM Mono",monospace; }.how-steps p { font-size:14px; line-height:1.55; }.how-steps strong { color:var(--ink); }
@media (max-width:720px) { .portrait-art.rough-sketch { height:170px; }.portrait-panel { padding-top:218px; }.portrait-panel p { max-width:none; }.name-reroll { order:4; }.how-steps { gap:14px; } }
.portrait-panel { justify-content:flex-start; padding-top:242px; }
/* The visual brief is intentionally copy-first, using the full panel. */
.portrait-panel { justify-content:flex-start; padding-top:56px; }
.portrait-panel .portrait-label { top:23px; }
.portrait-panel .visual-vibe-copy { flex:1; max-width:none; margin:25px 0 16px; font-size:16px; line-height:1.36; }
/* Do not render character-only controls or layout until generation begins. */
.result-content[hidden] { display:none; }
.section-heading { margin-bottom:26px; }
.download-button { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:7px; padding:10px 12px; background:var(--lavender); color:#fff; cursor:pointer; font-size:12px; font-weight:700; text-decoration:none; }.download-button span { padding:2px 5px; border-radius:3px; background:rgba(255,255,255,.18); color:#fff0c9; font:10px "DM Mono",monospace; }
.checkout-page { min-height:100vh; background:linear-gradient(120deg,#fffaf5 15%,#f3eefc 100%); }.checkout-wrap { width:min(1020px,calc(100% - 48px)); margin:auto; padding:32px 0 60px; }.checkout-brand { display:inline-block; }.checkout-grid { display:grid; grid-template-columns:1fr 1fr; gap:78px; align-items:center; min-height:calc(100vh - 120px); }.checkout-intro .eyebrow { justify-content:flex-start; }.checkout-intro h1 { margin:18px 0; font:700 clamp(48px,6vw,76px)/.95 Fraunces,serif; letter-spacing:-3.7px; }.checkout-intro h1 em { color:var(--lavender); }.checkout-intro > p { max-width:390px; color:var(--muted); line-height:1.65; }.back-link { display:inline-block; margin-top:22px; color:var(--coral); font-size:13px; text-underline-offset:3px; }.checkout-card { padding:24px; border:1px solid var(--line); border-radius:16px; background:#fffdf9; box-shadow:0 18px 48px rgba(67,45,76,.1); }.checkout-top,.checkout-summary { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:1px; }.price { color:var(--coral); font-size:18px; font-family:Fraunces,serif; letter-spacing:0; }.mini-sheet { margin:20px 0; padding:22px; border-radius:10px; background:linear-gradient(135deg,var(--sheet-accent,#e8b7b5),#eee8fb); }.mini-label { margin:0; color:#665570; font:10px "DM Mono",monospace; letter-spacing:1px; }.mini-sheet h2 { margin:9px 0 3px; font:700 36px/1 Fraunces,serif; letter-spacing:-1.5px; }.mini-sheet > p:not(.mini-label):not(.mini-hook) { margin:0; color:#685c6c; font:10px "DM Mono",monospace; text-transform:uppercase; }.mini-hook { margin:18px 0 0; color:#51495d; font:600 15px/1.42 Fraunces,serif; }.checkout-summary { padding:18px 0; border-top:1px solid var(--line); font:13px "DM Sans",sans-serif; letter-spacing:0; }.checkout-summary strong { color:var(--ink); }.pay-button { width:100%; padding:14px; border:0; border-radius:8px; background:var(--lavender); box-shadow:0 5px 0 #b7a9dc; color:#fff; cursor:pointer; font-weight:700; }.pay-button span { margin-left:12px; }.pay-button:disabled { cursor:not-allowed; opacity:.55; }.payment-note { margin:16px 0 0; color:#9a909d; text-align:center; font-size:11px; line-height:1.45; }
@media (max-width:720px) { .checkout-wrap { width:min(100% - 32px,1020px); }.checkout-grid { grid-template-columns:1fr; gap:38px; padding:54px 0; }.checkout-intro h1 { letter-spacing:-2.6px; }.mini-sheet h2 { font-size:31px; } }
/* ============================================
   UNLOCK TEASE SECTION
   ============================================ */

.unlock-tease {
  position: relative;
  margin: 32px 22px 22px;
  padding: 32px 30px 30px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fdf6ef 0%, #f4ecfb 50%, #fce9e6 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}

.unlock-tease::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--lavender), var(--peach));
}

.tease-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.tease-header .eyebrow {
  justify-content: flex-start;
  margin: 0;
}

.tease-price {
  color: var(--coral);
  font: 700 20px Fraunces, serif;
  letter-spacing: -0.5px;
}

.tease-title {
  margin: 0 0 8px;
  font: 700 clamp(26px, 3.2vw, 34px)/1.05 Fraunces, serif;
  letter-spacing: -1.2px;
  color: var(--ink);
}

.tease-title em {
  color: var(--lavender);
  font-style: italic;
}

.tease-sub {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.tease-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}

.tease-card {
  position: relative;
  padding: 18px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(147, 128, 197, 0.15);
  backdrop-filter: blur(2px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tease-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(147, 128, 197, 0.12);
  border-color: rgba(147, 128, 197, 0.35);
}

.tease-card::after {
  content: "🔒";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  opacity: 0.4;
}

.tease-icon {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
}

.tease-card h4 {
  margin: 0 0 6px;
  font: 700 14px Fraunces, serif;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.tease-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.tease-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 10px;
  background: var(--lavender);
  box-shadow: 0 6px 0 #b7a9dc, 0 10px 20px rgba(104, 87, 142, 0.18);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tease-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 0 #b7a9dc, 0 12px 22px rgba(104, 87, 142, 0.22);
}

.tease-cta span {
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  font: 700 12px "DM Mono", monospace;
  letter-spacing: 0.5px;
}

.tease-note {
  margin: 14px 0 0;
  color: #a49ba8;
  font-size: 11px;
  letter-spacing: 0.3px;
}

@media (max-width: 720px) {
  .unlock-tease {
    margin: 24px 16px 16px;
    padding: 24px 20px;
  }
  .tease-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tease-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
/* ============================================
   BIBLE / SUCCESS PAGE
   ============================================ */

.bible-page {
  min-height: 100vh;
  background: linear-gradient(120deg, #fffaf5 0%, #f3eefc 50%, #fce9e6 100%);
}

.bible-wrap {
  width: min(880px, calc(100% - 48px));
  margin: 0 auto;
  padding: 32px 0 80px;
}

.bible-brand {
  display: inline-block;
  margin-bottom: 40px;
}

.bible-header {
  text-align: center;
  margin-bottom: 48px;
}

.bible-header .eyebrow {
  justify-content: center;
}

.bible-header h1 {
  margin: 20px 0 12px;
  font: 700 clamp(40px, 5.5vw, 62px)/0.95 Fraunces, serif;
  letter-spacing: -2.5px;
  color: var(--ink);
}

.bible-header h1 em {
  color: var(--lavender);
  font-style: italic;
}

.bible-sub {
  margin: 0 auto 28px;
  max-width: 460px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.bible-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.bible-actions .pay-button {
  width: auto;
  padding: 14px 28px;
}

.ghost-button {
  padding: 14px 24px;
  border: 1px solid var(--lavender);
  border-radius: 8px;
  background: transparent;
  color: var(--lavender);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ghost-button:hover {
  background: var(--lavender);
  color: #fff;
}

.email-form {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 400px;
  margin: 16px auto 0;
  flex-wrap: wrap;
}

.email-form input {
  flex: 1;
  min-width: 200px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: 14px "DM Sans", sans-serif;
}

.email-form input:focus {
  outline: none;
  border-color: var(--lavender);
}

.email-form button {
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--lavender);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.email-status {
  width: 100%;
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ============================================
   BIBLE CONTENT
   ============================================ */

.bible-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bible-section {
  padding: 32px 30px;
  border-radius: 14px;
  background: #fffdf9;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(67, 45, 76, 0.04);
}

.bible-section h3 {
  margin: 0 0 16px;
  font: 700 22px Fraunces, serif;
  letter-spacing: -0.8px;
  color: var(--lavender);
}

.bible-section h4 {
  margin: 0 0 6px;
  font: 700 13px "DM Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lavender);
}

.bible-section h5 {
  margin: 0 0 4px;
  font: 500 10px "DM Mono", monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--coral);
}

.bible-section p {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
}

/* COVER SECTION */
.bible-cover {
  text-align: center;
  padding: 56px 30px;
  border-width: 2px;
}

.bible-label {
  margin: 0 0 12px;
  font: 500 10px "DM Mono", monospace;
  letter-spacing: 2px;
  color: var(--coral);
  text-transform: uppercase;
}

.bible-cover h2 {
  margin: 0 0 8px;
  font: 700 clamp(44px, 6vw, 68px)/0.95 Fraunces, serif;
  letter-spacing: -3px;
  color: var(--ink);
}

.cover-meta {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 24px !important;
}

.cover-hook {
  max-width: 520px;
  margin: 0 auto 28px !important;
  font: 600 18px/1.4 Fraunces, serif !important;
  color: #594f61;
  font-style: italic;
}

.cover-palette {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cover-palette span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* PERSONALITY / DETAIL GRID */
.bible-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

.bible-grid > div {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* BACKSTORY */
.section-body p {
  margin-bottom: 16px;
}

.section-body p:last-child {
  margin-bottom: 0;
}

/* VOICE */
.voice-pattern {
  margin-bottom: 18px !important;
  font-style: italic;
  color: var(--muted) !important;
}

.voice-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-lines blockquote {
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--lavender);
  background: rgba(147, 128, 197, 0.06);
  border-radius: 0 8px 8px 0;
  font: 500 15px/1.5 Fraunces, serif;
  color: var(--ink);
  font-style: italic;
}

/* SYMBOL */
.symbol-main {
  margin-bottom: 20px !important;
  font-size: 16px !important;
}

.symbol-main strong {
  color: var(--coral);
  text-transform: uppercase;
  font: 500 11px "DM Mono", monospace;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
}

.symbol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}

/* WARDROBE */
.wardrobe-grid {
  display: grid;
  gap: 20px;
}

.outfit p {
  color: var(--muted);
  font-size: 14px;
}

/* RELATIONSHIPS */
.relationships {
  display: grid;
  gap: 14px;
}

.rel-card {
  padding: 18px 20px;
  border-radius: 10px;
  background: rgba(147, 128, 197, 0.04);
  border: 1px solid rgba(147, 128, 197, 0.15);
}

.rel-role {
  margin: 0 0 4px !important;
  font: 500 10px "DM Mono", monospace !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coral) !important;
}

.rel-name {
  margin: 0 0 8px !important;
  font: 700 18px Fraunces, serif !important;
  color: var(--ink) !important;
  letter-spacing: -0.5px;
}

.rel-note {
  color: var(--muted) !important;
  font-size: 14px !important;
}

/* DRAWING PROMPTS */
.drawing-prompts {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: prompt-counter;
}

.drawing-prompts li {
  counter-increment: prompt-counter;
  position: relative;
  padding: 12px 0 12px 40px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.drawing-prompts li:last-child {
  border-bottom: none;
}

.drawing-prompts li::before {
  content: counter(prompt-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--coral);
  font: 500 12px "DM Mono", monospace;
  letter-spacing: 0.5px;
}

/* QUIZ */
.quiz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}

.quiz-grid p {
  color: var(--muted);
  font-size: 14px;
}

/* FOOTER */
.bible-footer {
  text-align: center;
  padding: 32px 20px 20px;
  color: var(--muted);
}

.bible-footer p {
  margin: 0 !important;
  color: var(--coral) !important;
  font: 700 14px Fraunces, serif !important;
}

.bible-footer-sub {
  margin-top: 6px !important;
  color: var(--muted) !important;
  font: 400 12px "DM Mono", monospace !important;
  letter-spacing: 0.5px;
}

/* EMPTY STATE */
.bible-empty {
  text-align: center;
  padding: 80px 20px;
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* RESPONSIVE */
@media (max-width: 720px) {
  .bible-wrap {
    width: min(100% - 32px, 880px);
    padding: 24px 0 60px;
  }
  .bible-section {
    padding: 24px 22px;
  }
  .bible-cover {
    padding: 40px 22px;
  }
  .bible-grid,
  .symbol-grid,
  .quiz-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .bible-actions {
    flex-direction: column;
  }
  .bible-actions .pay-button,
  .ghost-button {
    width: 100%;
  }
}
/* ============================================
   WORLD THEMING WITH REAL IMAGES
   Uses uploaded artwork from /images/[world]/
   ============================================ */

/* Palette CSS variables (set by JS) with fallbacks */
:root {
  --char-color-1: #E9A5A2;
  --char-color-2: #F6D7AC;
  --char-color-3: #8DB9AA;
  --char-color-4: #5B617C;
}

/* ============================================
   UNIVERSAL BOLD PALETTE BAR
   Every section gets a palette color strip on left
   ============================================ */

.bible-content .bible-section {
  position: relative;
  overflow: hidden;
  padding-left: 50px;
}

.bible-content .bible-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32px;
  background: linear-gradient(180deg,
    var(--char-color-1) 0%,
    var(--char-color-1) 25%,
    var(--char-color-2) 25%,
    var(--char-color-2) 50%,
    var(--char-color-3) 50%,
    var(--char-color-3) 75%,
    var(--char-color-4) 75%,
    var(--char-color-4) 100%
  );
  z-index: 1;
}

.bible-content .bible-section {
  counter-increment: bible-counter;
}

.bible-content {
  counter-reset: bible-counter;
}

.bible-content .bible-section:not(.bible-cover)::after {
  content: counter(bible-counter, decimal-leading-zero);
  position: absolute;
  top: 20px;
  left: 6px;
  width: 20px;
  color: #fff;
  font: 700 11px "DM Mono", monospace;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  z-index: 2;
}

.bible-content h3 {
  color: var(--char-color-4) !important;
  font-size: 26px !important;
  padding-bottom: 12px;
  margin-bottom: 20px !important;
  border-bottom: 2px solid var(--char-color-2);
}

.bible-content h4,
.bible-content h5 {
  color: var(--char-color-4) !important;
}

.bible-content .rel-role,
.bible-content .drawing-prompts li::before,
.bible-content .symbol-main strong {
  color: var(--char-color-1) !important;
}

.bible-content .voice-lines blockquote {
  border-left: 4px solid var(--char-color-4) !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--char-color-1) 15%, transparent) 0%,
    transparent 100%
  ) !important;
  padding: 16px 22px !important;
}

.bible-content .rel-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--char-color-2) 25%, #fff) 0%,
    color-mix(in srgb, var(--char-color-3) 15%, #fff) 100%
  ) !important;
  border: 2px solid color-mix(in srgb, var(--char-color-1) 40%, transparent) !important;
  padding: 20px !important;
}

.bible-content .rel-name {
  color: var(--char-color-4) !important;
  font-size: 20px !important;
}

/* ============================================
   COVER — SHOWCASES HERO IMAGE
   ============================================ */

.bible-cover {
  padding: 0 !important;
  min-height: 500px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  text-align: center;
  background: none !important;
  position: relative;
  overflow: hidden;
}

.bible-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: 0;
  opacity: 0.85;
}

.bible-cover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.3) 50%,
    rgba(0,0,0,0.75) 100%
  );
  z-index: 1;
  display: block !important;
}

.bible-cover > * {
  position: relative;
  z-index: 2;
}

.bible-cover .bible-label,
.bible-cover h2,
.bible-cover .cover-meta,
.bible-cover .cover-hook,
.bible-cover .cover-palette {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.bible-cover h2 {
  font-size: clamp(50px, 7vw, 76px) !important;
}

.bible-cover .cover-meta,
.bible-cover .cover-hook {
  color: rgba(255,255,255,0.9) !important;
}

.bible-cover .bible-label {
  color: var(--char-color-2) !important;
}

.bible-cover .cover-palette {
  padding-bottom: 40px;
}

.bible-cover .cover-palette span {
  border: 3px solid rgba(255,255,255,0.9) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ============================================
   DECORATIVE MOTIFS
   Scattered around each section using ::before/::after
   on wrappers, using the world's motif images
   ============================================ */

.bible-section .motif-decoration {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   PER-WORLD IMAGE ASSIGNMENTS
   Cover uses hero, background uses background,
   motifs float around sections
   ============================================ */

/* FANTASY */
.world-fantasy {
  background:
    linear-gradient(rgba(253, 248, 240, 0.90), rgba(251, 232, 227, 0.90)),
    url('images/fantasy/background.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
.world-fantasy .bible-cover::before {
  background-image: url('images/fantasy/hero.png') !important;
}
.world-fantasy .bible-section:nth-of-type(2)::before,
.world-fantasy .bible-section:nth-of-type(3)::before,
.world-fantasy .bible-section:nth-of-type(4)::before,
.world-fantasy .bible-section:nth-of-type(5)::before {
  /* preserve palette bar */
}

.world-fantasy .bible-section:nth-of-type(3n+2) {
  background:
    url('images/fantasy/motif-1.png') no-repeat top right / 90px auto,
    #fffdf9 !important;
}
.world-fantasy .bible-section:nth-of-type(3n+3) {
  background:
    url('images/fantasy/motif-2.png') no-repeat bottom right / 100px auto,
    #fffdf9 !important;
}
.world-fantasy .bible-section:nth-of-type(3n+4) {
  background:
    url('images/fantasy/motif-3.png') no-repeat top right / 80px auto,
    #fffdf9 !important;
}

.world-fantasy .bible-cover .bible-label,
.world-fantasy .bible-cover h2,
.world-fantasy .bible-cover .cover-meta,
.world-fantasy .bible-cover .cover-hook {
  text-shadow: 0 2px 15px rgba(80, 40, 100, 0.7);
}

/* MODERN */
.world-modern {
  background:
    linear-gradient(rgba(250, 250, 247, 0.92), rgba(250, 250, 247, 0.92)),
    url('images/modern/background.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
.world-modern .bible-cover::before {
  background-image: url('images/modern/hero.png') !important;
}
.world-modern .bible-section:nth-of-type(3n+2) {
  background:
    url('images/modern/motif-1.png') no-repeat top right / 85px auto,
    #fff !important;
}
.world-modern .bible-section:nth-of-type(3n+3) {
  background:
    url('images/modern/motif-2.png') no-repeat bottom right / 95px auto,
    #fff !important;
}
.world-modern .bible-section:nth-of-type(3n+4) {
  background:
    url('images/modern/motif-3.png') no-repeat top right / 80px auto,
    #fff !important;
}

/* SCI-FI */
.world-scifi {
  background:
    linear-gradient(rgba(30, 40, 60, 0.85), rgba(50, 40, 70, 0.85)),
    url('images/scifi/background.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  color: #e8ecf3 !important;
}
.world-scifi .bible-header h1,
.world-scifi .bible-header h1 em,
.world-scifi .bible-brand,
.world-scifi .bible-header .eyebrow,
.world-scifi .bible-sub {
  color: #e8ecf3 !important;
}
.world-scifi .bible-header h1 em {
  color: var(--char-color-1) !important;
}
.world-scifi .bible-cover::before {
  background-image: url('images/scifi/hero.png') !important;
}
.world-scifi .bible-section {
  background: #fdfdfd !important;
  color: var(--ink) !important;
}
.world-scifi .bible-section:nth-of-type(3n+2) {
  background:
    url('images/scifi/motif-1.png') no-repeat top right / 90px auto,
    #fdfdfd !important;
}
.world-scifi .bible-section:nth-of-type(3n+3) {
  background:
    url('images/scifi/motif-2.png') no-repeat bottom right / 100px auto,
    #fdfdfd !important;
}
.world-scifi .bible-section:nth-of-type(3n+4) {
  background:
    url('images/scifi/motif-3.png') no-repeat top right / 85px auto,
    #fdfdfd !important;
}
.world-scifi .ghost-button {
  border-color: var(--char-color-1) !important;
  color: var(--char-color-1) !important;
}

/* HORROR */
.world-horror {
  background:
    linear-gradient(rgba(26, 21, 31, 0.90), rgba(31, 24, 38, 0.90)),
    url('images/horror/background.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  color: #e8dfe6 !important;
}
.world-horror .bible-header h1,
.world-horror .bible-header h1 em,
.world-horror .bible-brand,
.world-horror .bible-header .eyebrow,
.world-horror .bible-sub {
  color: #ede4e8 !important;
}
.world-horror .bible-header h1 em {
  color: var(--char-color-1) !important;
  text-shadow: 0 0 30px color-mix(in srgb, var(--char-color-1) 60%, transparent);
}
.world-horror .bible-cover::before {
  background-image: url('images/horror/hero.png') !important;
}
.world-horror .bible-section {
  background: #f4eef1 !important;
  color: #2a222f !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.world-horror .bible-section:nth-of-type(3n+2) {
  background:
    url('images/horror/motif-1.png') no-repeat top right / 100px auto,
    #f4eef1 !important;
}
.world-horror .bible-section:nth-of-type(3n+3) {
  background:
    url('images/horror/motif-2.png') no-repeat bottom right / 110px auto,
    #f4eef1 !important;
}
.world-horror .bible-section:nth-of-type(3n+4) {
  background:
    url('images/horror/motif-3.png') no-repeat top right / 95px auto,
    #f4eef1 !important;
}
.world-horror .ghost-button {
  border-color: var(--char-color-1) !important;
  color: var(--char-color-1) !important;
}
.world-horror .bible-footer p {
  color: var(--char-color-1) !important;
}
.world-horror .bible-footer p:last-child {
  color: #bbafb5 !important;
}

/* HISTORICAL */
.world-historical {
  background:
    linear-gradient(rgba(249, 242, 228, 0.88), rgba(238, 224, 197, 0.88)),
    url('images/historical/background.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
.world-historical .bible-cover::before {
  background-image: url('images/historical/hero.png') !important;
}
.world-historical .bible-section {
  background: #fdf9ef !important;
  border: 1px solid #c8b085 !important;
  box-shadow: 0 6px 20px rgba(139, 108, 60, 0.15);
}
.world-historical .bible-section:nth-of-type(3n+2) {
  background:
    url('images/historical/motif-1.png') no-repeat top right / 95px auto,
    #fdf9ef !important;
}
.world-historical .bible-section:nth-of-type(3n+3) {
  background:
    url('images/historical/motif-2.png') no-repeat bottom right / 105px auto,
    #fdf9ef !important;
}
.world-historical .bible-section:nth-of-type(3n+4) {
  background:
    url('images/historical/motif-3.png') no-repeat top right / 90px auto,
    #fdf9ef !important;
}
.world-historical h3 {
  font-style: italic;
}

/* POST-APOCALYPTIC */
.world-postapoc {
  background:
    linear-gradient(rgba(237, 230, 221, 0.90), rgba(216, 204, 184, 0.90)),
    url('images/postapoc/background.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
.world-postapoc .bible-cover::before {
  background-image: url('images/postapoc/hero.png') !important;
}
.world-postapoc .bible-section {
  background: #f8f3ea !important;
  border: 1px solid #b5a58a !important;
  box-shadow: 3px 3px 0 rgba(107, 89, 65, 0.2);
}
.world-postapoc .bible-section:nth-of-type(3n+2) {
  background:
    url('images/postapoc/motif-1.png') no-repeat top right / 90px auto,
    #f8f3ea !important;
}
.world-postapoc .bible-section:nth-of-type(3n+3) {
  background:
    url('images/postapoc/motif-2.png') no-repeat bottom right / 100px auto,
    #f8f3ea !important;
}
.world-postapoc .bible-section:nth-of-type(3n+4) {
  background:
    url('images/postapoc/motif-3.png') no-repeat top right / 85px auto,
    #f8f3ea !important;
}
.world-postapoc h3 {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 20px !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 720px) {
  .bible-content .bible-section {
    padding-left: 44px;
  }
  .bible-content .bible-section::before {
    width: 24px !important;
  }
  .bible-cover {
    min-height: 380px;
  }
  .bible-content .bible-section[class*="nth-of-type"] {
    background-size: 60px auto !important;
  }
}
/* ============================================
   MOTIF & TEXT FIXES
   Push text away from motifs and constrain heading underline
   ============================================ */

/* Make sure text never gets covered by decorative motifs */
.bible-content .bible-section {
  padding-right: 130px !important;
}

/* Constrain the heading underline so it doesn't run under motifs */
.bible-content h3 {
  display: inline-block !important;
  padding-right: 20px;
  max-width: calc(100% - 130px);
}

/* Cover section shouldn't get the padding — hero image fills it */
.bible-cover {
  padding-right: 0 !important;
}

/* On smaller screens, reduce the padding since motifs are smaller too */
@media (max-width: 720px) {
  .bible-content .bible-section {
    padding-right: 80px !important;
  }
  .bible-content h3 {
    max-width: calc(100% - 80px);
  }
}

/* Motifs slightly more transparent so text is fully readable if they do overlap */
.world-fantasy .bible-section:nth-of-type(3n+2),
.world-fantasy .bible-section:nth-of-type(3n+3),
.world-fantasy .bible-section:nth-of-type(3n+4),
.world-modern .bible-section:nth-of-type(3n+2),
.world-modern .bible-section:nth-of-type(3n+3),
.world-modern .bible-section:nth-of-type(3n+4),
.world-scifi .bible-section:nth-of-type(3n+2),
.world-scifi .bible-section:nth-of-type(3n+3),
.world-scifi .bible-section:nth-of-type(3n+4),
.world-horror .bible-section:nth-of-type(3n+2),
.world-horror .bible-section:nth-of-type(3n+3),
.world-horror .bible-section:nth-of-type(3n+4),
.world-historical .bible-section:nth-of-type(3n+2),
.world-historical .bible-section:nth-of-type(3n+3),
.world-historical .bible-section:nth-of-type(3n+4),
.world-postapoc .bible-section:nth-of-type(3n+2),
.world-postapoc .bible-section:nth-of-type(3n+3),
.world-postapoc .bible-section:nth-of-type(3n+4) {
  background-blend-mode: normal;
}
/* ============================================
   PRINT / PDF STYLES
   Preserves images, colors, and layout when printing
   ============================================ */

@media print {

  /* Force browsers to print backgrounds and colors */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Remove page margins around the actual PDF page */
  @page {
    size: A4;
    margin: 10mm;
  }

  /* Hide everything except the bible content */
  .bible-header,
  .bible-brand,
  .bible-actions,
  .email-form,
  .bible-empty {
    display: none !important;
  }

  /* Remove page background — sections carry their own colors */
  body,
  .bible-page,
  .world-fantasy,
  .world-modern,
  .world-scifi,
  .world-horror,
  .world-historical,
  .world-postapoc {
    background: white !important;
    background-image: none !important;
  }

  /* Wrap width for print */
  .bible-wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Section styling for print */
  .bible-section {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none !important;
    margin-bottom: 12px !important;
    padding: 20px 130px 20px 50px !important;
  }

  /* Cover section gets its own page */
  .bible-cover {
    page-break-after: always;
    break-after: page;
    min-height: 250mm !important;
    padding: 0 !important;
  }

  /* Make sure cover images print */
  .bible-cover::before {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    opacity: 1 !important;
  }

  /* Cover text should still be visible */
  .bible-cover h2,
  .bible-cover .bible-label,
  .bible-cover .cover-meta,
  .bible-cover .cover-hook {
    color: white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
  }

  /* Preserve palette colors in the palette circles */
  .cover-palette span,
  .palette span {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Backstory should stay together where possible */
  .section-body {
    orphans: 3;
    widows: 3;
  }

  /* Avoid breaking these mid-block */
  .rel-card,
  .voice-lines blockquote,
  .outfit,
  .quiz-grid > div {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Footer at the end */
  .bible-footer {
    page-break-before: avoid;
    break-before: avoid;
    margin-top: 20px;
  }

  /* Ensure sections keep their backgrounds and images */
  .bible-content .bible-section {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Palette bar on left preserved */
  .bible-content .bible-section::before {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Section number preserved */
  .bible-content .bible-section:not(.bible-cover)::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}
/* ============================================
   PRINT INSTRUCTIONS MODAL
   ============================================ */

#print-instructions {
  position: fixed;
  inset: 0;
  background: rgba(30, 25, 40, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.print-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.close-modal {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}

.close-modal:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

.print-modal h2 {
  margin: 0 0 12px;
  font: 700 26px Fraunces, serif;
  color: var(--ink);
  letter-spacing: -1px;
}

.print-modal p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.print-modal ol {
  margin: 0 0 24px;
  padding-left: 20px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}

.print-modal ol li {
  margin-bottom: 8px;
}

.print-modal ol strong {
  color: var(--lavender);
}

.print-cta {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--lavender);
  box-shadow: 0 5px 0 #b7a9dc;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.15s;
}

.print-cta:hover {
  transform: translateY(-1px);
}

.print-cta:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #b7a9dc;
}

.print-note {
  margin: 14px 0 0 !important;
  text-align: center;
  font-size: 12px !important;
  color: #a49ba8 !important;
}

/* Hide modal when printing */
@media print {
  #print-instructions {
    display: none !important;
  }
}
/* ============================================
   PRINT COVER CENTERING FIX
   ============================================ */

@media print {
  .bible-cover {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-bottom: 60px !important;
  }

  .bible-cover .bible-label,
  .bible-cover h2,
  .bible-cover .cover-meta,
  .bible-cover .cover-hook,
  .bible-cover .cover-palette {
    text-align: center !important;
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .bible-cover .cover-palette {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
  }
}
@media print {
  .bible-cover::after {
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,0.5) 60%,
      rgba(0,0,0,0.85) 100%
    ) !important;
    height: 80% !important;
  }
}
/* ============================================
   PRINT COVER FIX v2 — Force text centering
   ============================================ */

@media print {

  /* Reset cover layout for print */
  .bible-cover,
  .bible-page .bible-cover,
  .bible-content .bible-cover {
    text-align: center !important;
    display: block !important;
    padding: 40mm 20mm !important;
    position: relative !important;
  }

  /* Cover pseudo-element (background image) */
  .bible-cover::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
  }

  /* Force ALL cover text elements to center */
  .bible-cover .bible-label,
  .bible-cover h2,
  .bible-cover .cover-meta,
  .bible-cover .cover-hook,
  .bible-cover .cover-palette,
  .bible-page .bible-cover .bible-label,
  .bible-page .bible-cover h2,
  .bible-page .bible-cover .cover-meta,
  .bible-page .bible-cover .cover-hook,
  .bible-page .bible-cover .cover-palette {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Palette circles in a row, centered */
  .bible-cover .cover-palette {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  /* Space between cover elements */
  .bible-cover .bible-label {
    margin-bottom: 16px !important;
  }

  .bible-cover h2 {
    margin-bottom: 12px !important;
    font-size: 48px !important;
  }

  .bible-cover .cover-meta {
    margin-bottom: 24px !important;
  }

  .bible-cover .cover-hook {
    margin-bottom: 24px !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Nested list in print modal */
.print-modal ol ul {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
}

.print-modal ol ul li {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
}
/* ============================================
   PRINT COVER FIX v3 — Text at bottom + visible palette
   ============================================ */

@media print {

  /* Cover: text pushed to bottom, using padding */
  .bible-cover,
  .bible-page .bible-cover,
  .bible-content .bible-cover {
    padding: 0 !important;
    padding-top: 60% !important;
    padding-bottom: 30mm !important;
    padding-left: 20mm !important;
    padding-right: 20mm !important;
    box-sizing: border-box !important;
  }

  /* Ensure palette circles are fully visible */
  .bible-cover .cover-palette {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding-bottom: 10px !important;
  }

  .bible-cover .cover-palette span {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}
/* ============================================
   CONTENT PAGES (About, Privacy, Terms, Contact)
   ============================================ */

.content-page {
  padding: 60px 0 100px;
  max-width: 780px;
}

.content-page .eyebrow {
  justify-content: flex-start;
  margin-bottom: 16px;
}

.content-page h1 {
  margin: 0 0 40px;
  font: 700 clamp(48px, 6.5vw, 84px)/0.95 Fraunces, serif;
  letter-spacing: -3px;
}

.content-page h1 em {
  color: var(--lavender);
  font-style: italic;
}

.content-body {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.75;
}

.content-body .lead {
  margin: 0 0 32px;
  font: 500 20px/1.5 Fraunces, serif;
  color: var(--muted);
  font-style: italic;
}

.content-body h2 {
  margin: 40px 0 16px;
  font: 700 26px Fraunces, serif;
  color: var(--ink);
  letter-spacing: -1px;
}

.content-body h3 {
  margin: 24px 0 12px;
  font: 700 20px Fraunces, serif;
  color: var(--ink);
}

.content-body p {
  margin: 0 0 18px;
}

.content-body ul {
  margin: 0 0 18px;
  padding-left: 24px;
}

.content-body ul li {
  margin-bottom: 8px;
}

.content-body a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-body a:hover {
  color: var(--lavender);
}

.content-body .closing {
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font: 500 17px Fraunces, serif;
  color: var(--lavender);
  font-style: italic;
}

/* NAVIGATION LINKS */
.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.nav-links .nav-link {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links .nav-link:hover {
  color: var(--coral);
}

/* CONTACT PAGE */
.contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}

.contact-card {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf9;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(147, 128, 197, 0.12);
}

.contact-card .contact-icon {
  display: block;
  font-size: 32px;
  margin-bottom: 12px;
}

.contact-card h3 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
}

.contact-card p {
  margin: 0 0 8px !important;
  font-size: 14px;
  color: var(--muted);
}

.contact-card .contact-link {
  color: var(--lavender);
  font-weight: 600;
}

.contact-card .contact-note {
  color: #a49ba8;
  font-size: 12px;
  font-style: italic;
}

/* FOOTER LINKS */
.footer {
  flex-direction: column;
  gap: 12px;
  padding: 32px 0 40px;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--coral);
}

@media (max-width: 720px) {
  .content-page {
    padding: 40px 0 60px;
  }
  .nav-links {
    gap: 14px;
  }
  .contact-methods {
    grid-template-columns: 1fr;
  }
  .footer {
    text-align: center;
  }
}
/* ============================================
   BUCKET / CART UI
   ============================================ */

.bucket-button {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  background: #fff;
  color: #5f5269;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.bucket-button:hover {
  border-color: var(--lavender);
  color: var(--lavender);
}

.cart-link {
  position: relative;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font: 700 10px "DM Mono", monospace;
}

.sheet-actions {
  gap: 10px;
  flex-wrap: wrap;
}

/* Bucket page */
.bucket-page {
  min-height: 100vh;
  background: linear-gradient(120deg, #fffaf5 0%, #f3eefc 100%);
}

.bucket-wrap {
  width: min(880px, calc(100% - 48px));
  margin: 0 auto;
  padding: 32px 0 80px;
}

.bucket-header h1 {
  margin: 10px 0 8px;
  font: 700 clamp(40px, 6vw, 64px)/0.95 Fraunces, serif;
  letter-spacing: -2px;
}

.bucket-sub {
  color: var(--muted);
  margin-bottom: 28px;
}

.bucket-list {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

.bucket-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffdf9;
}

.bucket-item h3 {
  margin: 0 0 4px;
  font: 700 22px Fraunces, serif;
}

.bucket-item .meta {
  margin: 0 0 8px;
  color: var(--coral);
  font: 500 11px "DM Mono", monospace;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.bucket-item .hook {
  margin: 0;
  color: var(--muted);
  font: 600 15px/1.45 Fraunces, serif;
}

.bucket-item .price {
  color: var(--ink);
  font: 700 16px Fraunces, serif;
  white-space: nowrap;
}

.remove-item {
  border: 0;
  background: none;
  color: var(--coral);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  margin-top: 8px;
}

.bucket-summary {
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bucket-summary .total {
  font: 700 28px Fraunces, serif;
}

.bucket-empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
}

@media (max-width: 720px) {
  .bucket-wrap {
    width: min(100% - 32px, 880px);
  }
  .bucket-item {
    grid-template-columns: 1fr;
  }
}
/* Multi bible purchase */
.multi-bible-label {
  margin: 0 0 10px;
  color: var(--coral);
  font: 700 12px "DM Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.multi-bible-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media print {
  .multi-bible-card {
    page-break-after: always;
    break-after: page;
  }
}
/* ============================================
   PER-CARD WORLD THEMES FOR MULTI BUY
   ============================================ */

.multi-bible-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 34px;
  padding: 18px;
  border-radius: 18px;
}

.multi-bible-label {
  margin: 0 0 4px;
  color: var(--coral);
  font: 700 12px "DM Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Each card gets its own atmospheric background */
.multi-bible-card.world-fantasy {
  background:
    linear-gradient(rgba(253,248,240,0.92), rgba(251,232,227,0.92)),
    url("images/fantasy/background.png");
  background-size: cover;
}
.multi-bible-card.world-modern {
  background:
    linear-gradient(rgba(250,250,247,0.94), rgba(250,250,247,0.94)),
    url("images/modern/background.png");
  background-size: cover;
}
.multi-bible-card.world-scifi {
  background:
    linear-gradient(rgba(30,40,60,0.88), rgba(50,40,70,0.88)),
    url("images/scifi/background.png");
  background-size: cover;
}
.multi-bible-card.world-horror {
  background:
    linear-gradient(rgba(26,21,31,0.9), rgba(31,24,38,0.9)),
    url("images/horror/background.png");
  background-size: cover;
}
.multi-bible-card.world-historical {
  background:
    linear-gradient(rgba(249,242,228,0.92), rgba(238,224,197,0.92)),
    url("images/historical/background.png");
  background-size: cover;
}
.multi-bible-card.world-postapoc {
  background:
    linear-gradient(rgba(237,230,221,0.92), rgba(216,204,184,0.92)),
    url("images/postapoc/background.png");
  background-size: cover;
}

/* Cover image per card */
.multi-bible-card.world-fantasy .bible-cover {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.7)),
    url("images/fantasy/hero.png") center/cover !important;
}
.multi-bible-card.world-modern .bible-cover {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.7)),
    url("images/modern/hero.png") center/cover !important;
}
.multi-bible-card.world-scifi .bible-cover {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.7)),
    url("images/scifi/hero.png") center/cover !important;
}
.multi-bible-card.world-horror .bible-cover {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.75)),
    url("images/horror/hero.png") center/cover !important;
}
.multi-bible-card.world-historical .bible-cover {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.7)),
    url("images/historical/hero.png") center/cover !important;
}
.multi-bible-card.world-postapoc .bible-cover {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.7)),
    url("images/postapoc/hero.png") center/cover !important;
}

.multi-bible-card .bible-cover,
.multi-bible-card .bible-cover h2,
.multi-bible-card .bible-cover .cover-meta,
.multi-bible-card .bible-cover .cover-hook,
.multi-bible-card .bible-cover .bible-label {
  color: #fff !important;
}

.multi-bible-card .bible-section {
  background: #fffdf9;
}

@media print {
  .multi-bible-card {
    page-break-after: always;
    break-after: page;
  }
}
/* ============================================
   CONTACT PAGE — larger "Get in touch" + more space below
   ============================================ */

.content-page .eyebrow {
  font-size: 13px;        /* Makes "Get in touch" larger */
  letter-spacing: 2px;    /* Keeps the nice spaced-out feel */
  margin-bottom: 28px;    /* Adds MORE space between it and the big heading below */
}
/* ============================================
   PALETTE SWATCHES & HEX CODES
   ============================================ */

.palette,
.cover-palette {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.cover-palette {
  justify-content: center !important;
}

.swatch-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.swatch-item:hover {
  transform: translateY(-2px);
}

.swatch-item span[style] {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hex-label {
  font: 500 10px "DM Mono", monospace;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Light background adjustment */
.details-panel .hex-label {
  color: var(--muted);
  text-shadow: none;
}
/* ============================================
   VERTICAL ROUNDED RECTANGLE PALETTE SWATCHES
   ============================================ */

/* Reset old circle styles */
.palette span,
.cover-palette span {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Vertical Stack Container */
.swatch-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 10px;
}

/* Individual Row (Rect on left, Hex on right) */
.swatch-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  width: fit-content;
  transition: transform 0.15s ease, background 0.15s ease;
}

.swatch-row:hover {
  transform: translateX(4px);
  background: rgba(0, 0, 0, 0.3);
}

/* Rounded Rectangle Swatch */
.swatch-rect {
  display: inline-block !important;
  width: 38px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Hex Code Label on the Right */
.swatch-hex {
  font: 600 12px "DM Mono", monospace !important;
  color: #ffffff !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

/* Light background adjustments */
.details-panel .swatch-row {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
}

.details-panel .swatch-hex {
  color: var(--ink) !important;
  text-shadow: none !important;
}
/* ============================================
   TALL VERTICAL PILL PALETTE SWATCHES
   Matches hand-drawn mockup (Pill on left, Hex on right)
   ============================================ */

/* Main Stack Container */
.palette-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 12px !important;
  align-items: flex-start !important;
}

#palette, .palette, .cover-palette {
  display: block !important;
}

/* Individual Row */
.palette-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  padding: 3px 8px 3px 4px !important;
  border-radius: 12px !important;
  transition: transform 0.15s ease !important;
}

.palette-row:hover {
  transform: translateX(5px) !important;
}

/* Tall Vertical Rounded Rectangle / Pill */
.swatch-pill {
  display: inline-block !important;
  width: 22px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  flex-shrink: 0 !important;
}

/* Hex Code Text on the Right */
.swatch-code {
  font: 700 13px "DM Mono", monospace !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  text-transform: uppercase !important;
}

/* Inside light details panel on generator page */
.details-panel .swatch-code {
  color: var(--ink) !important;
  text-shadow: none !important;
}
/* ============================================
   FIX: TALL VERTICAL PILL PALETTE SWATCHES
   ============================================ */

.palette-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 16px !important;
  align-items: center !important;
}

.swatch-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  padding: 4px 12px 4px 5px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(6px) !important;
  transition: transform 0.15s ease !important;
}

.swatch-row:hover {
  transform: translateX(4px) !important;
}

.swatch-pill {
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.swatch-code {
  font: 700 13px "DM Mono", monospace !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  text-transform: uppercase !important;
}

/* Light background adjustments on main page */
.details-panel .swatch-row {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid var(--line) !important;
}

.details-panel .swatch-code {
  color: var(--ink) !important;
  text-shadow: none !important;
}