:root {
  --parchment: #F4EFE6;
  --ink: #211D20;
  --gold: #B18A50;
  --twilight: #42495A;
  --teal: #4F8C8A;
  --paper: #FBF8F2;
  --muted: #6f686a;
  --max-width: 1180px;
  --reading-width: 760px;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(33, 29, 32, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--parchment); color:var(--ink); font-family:Georgia,"Times New Roman",serif; line-height:1.65; }
a { color:inherit; }
.site-shell { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
.wrap { width:min(calc(100% - 36px),var(--max-width)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(244,239,230,.96); backdrop-filter:blur(12px); border-bottom:1px solid rgba(177,138,80,.28); }
.header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; letter-spacing:.09em; }
.starburst { width:25px; height:25px; display:inline-grid; place-items:center; color:var(--teal); font-size:1.45rem; }
.nav-toggle { display:none; border:1px solid rgba(177,138,80,.5); background:transparent; color:var(--ink); padding:8px 10px; border-radius:10px; cursor:pointer; }
.site-nav { display:flex; align-items:center; gap:24px; }
.site-nav a { text-decoration:none; font-size:.88rem; text-transform:uppercase; letter-spacing:.08em; padding:28px 0 24px; border-bottom:2px solid transparent; }
.site-nav a:hover,.site-nav a.active { color:var(--teal); border-bottom-color:var(--gold); }
.hero { padding:96px 0 86px; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%,rgba(79,140,138,.08),transparent 27%),radial-gradient(circle at 85% 18%,rgba(177,138,80,.09),transparent 26%),radial-gradient(circle at 50% 100%,rgba(66,73,90,.05),transparent 35%); pointer-events:none; }
.hero .wrap { position:relative; z-index:1; }
.eyebrow { color:var(--teal); letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; font-weight:700; margin-bottom:12px; }
h1,h2,h3 { line-height:1.12; margin-top:0; }
h1 { font-size:clamp(2.6rem,7vw,5.4rem); margin-bottom:12px; letter-spacing:.03em; }
h2 { font-size:clamp(2rem,4vw,3.2rem); }
h3 { font-size:1.3rem; }
.tagline { font-size:clamp(1.2rem,2.4vw,1.65rem); font-style:italic; color:var(--twilight); margin:0 auto 24px; }
.lede { max-width:760px; margin:0 auto 32px; font-size:1.08rem; color:#4b4447; }
.btn { display:inline-block; text-decoration:none; text-transform:uppercase; letter-spacing:.09em; font-weight:700; font-size:.82rem; padding:13px 20px; border:1px solid var(--gold); border-radius:999px; background:var(--ink); color:var(--parchment); transition:.2s ease; }
.btn:hover { transform:translateY(-2px); background:var(--twilight); box-shadow:0 0 0 4px rgba(79,140,138,.12),0 10px 26px rgba(177,138,80,.16); }
.btn.alt { background:var(--teal); }
.section { padding:78px 0; }
.section.light { background:var(--paper); }
.section-title { text-align:center; margin-bottom:42px; }
.divider { width:110px; height:1px; margin:22px auto 0; background:var(--gold); }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.card { background:rgba(255,255,255,.52); border:1px solid rgba(177,138,80,.3); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.card .mini { color:var(--teal); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; }
.series-card { min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; }
.first-vow { background:linear-gradient(180deg,rgba(33,29,32,.22),rgba(33,29,32,.93)),radial-gradient(circle at 55% 30%,rgba(177,138,80,.28),transparent 32%),#282426; color:var(--parchment); }
.tbtr { background:linear-gradient(180deg,rgba(244,239,230,.18),rgba(244,239,230,.95)),radial-gradient(circle at 20% 20%,rgba(79,140,138,.18),transparent 32%),radial-gradient(circle at 80% 30%,rgba(177,138,80,.28),transparent 30%),#eee5d6; }
.profile-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:center; }
.photo-placeholder { min-height:420px; border:1px solid rgba(177,138,80,.5); border-radius:44% 44% 18px 18px; background:radial-gradient(circle at 50% 32%,rgba(79,140,138,.16),transparent 23%),linear-gradient(135deg,rgba(177,138,80,.12),rgba(255,255,255,.35)); display:grid; place-items:center; text-align:center; color:var(--muted); padding:30px; }
.newsletter { border:1px solid rgba(177,138,80,.45); border-radius:var(--radius); padding:44px; text-align:center; background:rgba(255,255,255,.4); }
.form-inline { display:flex; width:min(100%,620px); margin:24px auto 0; gap:10px; }
input,textarea { width:100%; border:1px solid rgba(177,138,80,.5); background:#fffdf9; color:var(--ink); padding:14px 15px; border-radius:10px; font:inherit; }
.placeholder-note { font-size:.88rem; color:var(--muted); border-left:3px solid var(--teal); padding-left:12px; }
.site-footer { background:var(--twilight); color:var(--parchment); padding:54px 0 28px; text-align:center; }
.footer-brand { font-size:1.2rem; letter-spacing:.12em; font-weight:700; }
.footer-tagline { font-style:italic; opacity:.88; margin:8px 0 22px; }
.footer-links,.social-links { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 22px; margin:14px 0; }
.footer-links a,.social-links a { text-decoration:none; }
.copyright { opacity:.72; font-size:.84rem; margin-top:26px; }
.page-placeholder { padding:90px 0; }
.page-placeholder .card { max-width:820px; margin:0 auto; }
@media (max-width:800px) {
  .header-inner { min-height:68px; }
  .nav-toggle { display:inline-block; }
  .site-nav { display:none; position:absolute; top:68px; left:0; right:0; padding:12px 18px 22px; background:var(--parchment); border-bottom:1px solid rgba(177,138,80,.28); flex-direction:column; align-items:stretch; gap:0; }
  .site-nav.open { display:flex; }
  .site-nav a { padding:13px 6px; }
  .cards,.profile-grid { grid-template-columns:1fr; }
  .hero { padding:72px 0 64px; }
  .section { padding:60px 0; }
  .newsletter { padding:30px 22px; }
  .form-inline { flex-direction:column; }
}

/* Homepage v2: author-brand refinement */
.hero-brand-mark {
  color: var(--teal);
  font-size: 2.15rem;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 0 24px rgba(79,140,138,.18);
}

.author-photo-frame {
  margin: 0;
  position: relative;
  border-radius: 46% 46% 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(177,138,80,.62);
  box-shadow:
    0 0 0 8px rgba(244,239,230,.75),
    0 0 0 9px rgba(177,138,80,.2),
    0 22px 55px rgba(33,29,32,.14);
  background: var(--paper);
}

.author-photo-frame::before {
  content: "✦";
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 18px;
  color: var(--gold);
  font-size: 1.25rem;
  text-shadow: 0 0 18px rgba(177,138,80,.3);
}

.author-photo-frame img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

@media (max-width: 800px) {
  .author-photo-frame img {
    height: 440px;
    object-position: center 24%;
  }
}


/* Version 3: quieter, more editorial homepage hero */
.site-header .header-inner {
  min-height: 68px;
}

.hero {
  padding: 58px 0 54px;
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.85rem);
  letter-spacing: .045em;
  margin-bottom: 8px;
}

.hero .eyebrow {
  margin-bottom: 8px;
  font-size: .72rem;
}

.hero-brand-mark {
  font-size: 1.55rem;
  margin-bottom: 6px;
}

.hero .tagline {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  margin-bottom: 18px;
}

.hero .lede {
  max-width: 680px;
  font-size: 1rem;
  margin-bottom: 24px;
}

.hero .btn {
  padding: 11px 18px;
  font-size: .77rem;
}

@media (max-width: 800px) {
  .site-header .header-inner {
    min-height: 62px;
  }

  .hero {
    padding: 48px 0 44px;
  }

  .hero h1 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .hero .lede {
    font-size: .98rem;
  }
}


/* Version 4: Featured Worlds becomes two distinct story doors */
.featured-worlds {
  position: relative;
  overflow: hidden;
}

.featured-worlds::before,
.featured-worlds::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(177,138,80,.12);
  border-radius: 50%;
  pointer-events: none;
}

.featured-worlds::before {
  left: -150px;
  top: 80px;
}

.featured-worlds::after {
  right: -170px;
  bottom: 40px;
}

.worlds-heading h2 {
  margin-bottom: 0;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 34px;
}

.world-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(177,138,80,.34);
  box-shadow: 0 20px 52px rgba(33,29,32,.10);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}

.world-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(33,29,32,.14);
}

.world-art {
  height: 235px;
  position: relative;
  overflow: hidden;
}

.world-copy {
  padding: 32px 34px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.world-copy h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  margin: 8px 0 15px;
}

.world-copy p {
  margin: 0 0 25px;
}

.world-copy .btn {
  margin-top: auto;
}

/* First Vow visual language: stone, shadow, warm oath-light */
.vow-world {
  background: #292527;
  color: var(--parchment);
}

.vow-world .mini {
  color: #d0ad73;
}

.vow-world .world-copy p {
  color: #e6ded4;
}

.vow-art {
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 20%, transparent 80%, rgba(0,0,0,.22)),
    linear-gradient(180deg, #393336 0%, #242123 100%);
  border-bottom: 1px solid rgba(177,138,80,.35);
}

.vow-art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(244,239,230,.05) 50%, transparent 50.5%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(244,239,230,.025) 48px 49px);
}

.vow-door {
  position: absolute;
  width: 116px;
  height: 168px;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border: 2px solid rgba(177,138,80,.58);
  border-bottom: 0;
  border-radius: 58px 58px 0 0;
  box-shadow:
    inset 0 0 38px rgba(0,0,0,.55),
    0 0 36px rgba(177,138,80,.12);
}

.vow-light {
  position: absolute;
  width: 28px;
  height: 104px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(242,215,160,.2), rgba(210,162,89,.78));
  filter: blur(2px);
  box-shadow: 0 0 32px rgba(210,162,89,.45);
  clip-path: polygon(47% 0, 58% 0, 100% 100%, 0 100%);
}

.world-star {
  position: absolute;
  color: rgba(210,173,115,.75);
}

.star-one { left: 24%; top: 25%; }
.star-two { right: 22%; top: 39%; font-size: .8rem; }

.vow-btn {
  background: transparent;
  color: var(--parchment);
  border-color: #cba66d;
}

.vow-btn:hover {
  background: rgba(177,138,80,.14);
}

/* Tales Beyond the Roll: parchment, teal, gold, playful storybook energy */
.roll-world {
  background: #f8f2e8;
}

.roll-world .mini {
  color: var(--teal);
}

.roll-art {
  background:
    radial-gradient(circle at 20% 20%, rgba(79,140,138,.18), transparent 30%),
    radial-gradient(circle at 80% 34%, rgba(177,138,80,.24), transparent 26%),
    linear-gradient(180deg, #f2e8d8 0%, #e9ddc9 100%);
  border-bottom: 1px solid rgba(177,138,80,.30);
}

.roll-art::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.7), transparent);
}

.storybook-mark {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 150px;
  height: 100px;
  transform: translate(-50%,-50%);
}

.book-left,
.book-right {
  position: absolute;
  top: 34px;
  width: 67px;
  height: 48px;
  border: 2px solid rgba(177,138,80,.85);
  background: rgba(244,239,230,.78);
}

.book-left {
  left: 7px;
  border-radius: 5px 4px 24px 5px;
  transform: skewY(7deg);
}

.book-right {
  right: 7px;
  border-radius: 4px 5px 5px 24px;
  transform: skewY(-7deg);
}

.die-mark {
  position: absolute;
  left: 50%;
  top: 0;
  width: 55px;
  height: 55px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: var(--teal);
  font-size: .78rem;
  font-weight: 700;
  border: 2px solid rgba(79,140,138,.75);
  background: rgba(244,239,230,.88);
  clip-path: polygon(50% 0, 95% 25%, 86% 80%, 50% 100%, 14% 80%, 5% 25%);
  box-shadow: 0 8px 25px rgba(79,140,138,.14);
}

.roll-spark {
  position: absolute;
  color: var(--gold);
}

.spark-one { left: 23%; top: 24%; }
.spark-two { right: 22%; top: 22%; font-size: .8rem; }
.spark-three { right: 27%; bottom: 27%; font-size: .65rem; color: var(--teal); }

@media (max-width: 800px) {
  .world-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .world-art {
    height: 205px;
  }

  .world-copy {
    padding: 28px 26px 31px;
  }
}


/* Version 5: polished About Reeca preview */
.about-preview {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 46%, rgba(79,140,138,.08), transparent 26%),
    radial-gradient(circle at 82% 42%, rgba(177,138,80,.07), transparent 28%),
    var(--parchment);
}

.about-preview::before {
  content: "";
  position: absolute;
  left: -110px;
  bottom: -130px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(79,140,138,.11);
  border-radius: 50%;
  pointer-events: none;
}

.about-preview-grid {
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
  gap: clamp(42px, 7vw, 88px);
  align-items: center;
}

.about-photo-wrap {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
}

.about-preview .author-photo-frame {
  border-radius: 48% 48% 24px 24px;
  box-shadow:
    0 0 0 8px rgba(244,239,230,.88),
    0 0 0 9px rgba(177,138,80,.24),
    0 22px 58px rgba(33,29,32,.13);
}

.about-preview .author-photo-frame::before {
  display: none;
}

.about-preview .author-photo-frame img {
  height: 500px;
  object-position: center 27%;
}

.about-ornament {
  position: absolute;
  z-index: 3;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 22px rgba(177,138,80,.2);
}

.about-ornament-one {
  top: 24px;
  left: -18px;
  font-size: 1.2rem;
}

.about-ornament-two {
  right: -14px;
  bottom: 56px;
  color: var(--teal);
  font-size: .95rem;
}

.photo-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--twilight);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .66rem;
}

.caption-line {
  width: 40px;
  height: 1px;
  background: rgba(177,138,80,.55);
}

.about-preview-copy {
  max-width: 620px;
}

.about-preview-copy h2 {
  max-width: 540px;
  margin-bottom: 22px;
}

.about-preview-copy p {
  color: #51494c;
  font-size: 1.04rem;
}

.about-signature-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 128px;
  margin: 25px 0 25px;
}

.about-signature-line span:not(.little-star) {
  height: 1px;
  flex: 1;
  background: rgba(177,138,80,.55);
}

.about-signature-line .little-star {
  color: var(--teal);
  font-size: .76rem;
}

@media (max-width: 800px) {
  .about-preview-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .about-photo-wrap {
    width: min(88%, 410px);
  }

  .about-preview .author-photo-frame img {
    height: 460px;
    object-position: center 24%;
  }

  .about-preview-copy {
    text-align: center;
    margin: 0 auto;
  }

  .about-preview-copy h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .about-signature-line {
    margin-left: auto;
    margin-right: auto;
  }
}


/* Version 6: From My Writing Desk */
.writing-desk {
  position: relative;
  overflow: hidden;
}

.writing-desk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 72%, rgba(79,140,138,.06), transparent 28%),
    radial-gradient(circle at 83% 30%, rgba(177,138,80,.07), transparent 25%);
}

.writing-desk .wrap {
  position: relative;
  z-index: 1;
}

.desk-heading {
  margin-bottom: 38px;
}

.desk-card {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: center;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 52px);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(177,138,80,.32);
  border-radius: 24px;
  box-shadow: 0 20px 52px rgba(33,29,32,.08);
}

.desk-book-visual {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
}

.paper-stack {
  position: absolute;
  width: 210px;
  height: 270px;
  border: 1px solid rgba(177,138,80,.30);
  border-radius: 5px;
  background: #eee5d7;
}

.paper-back {
  transform: rotate(-6deg) translate(-10px, 8px);
}

.paper-mid {
  transform: rotate(4deg) translate(10px, 4px);
  background: #f7f1e7;
}

.manuscript-sheet {
  position: relative;
  z-index: 2;
  width: 220px;
  min-height: 280px;
  padding: 34px 28px 30px;
  background: #fffaf2;
  border: 1px solid rgba(177,138,80,.45);
  border-radius: 5px;
  box-shadow: 0 18px 35px rgba(33,29,32,.11);
  display: flex;
  flex-direction: column;
}

.manuscript-kicker {
  color: var(--teal);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 12px;
}

.manuscript-sheet strong {
  font-size: 1.5rem;
  line-height: 1.08;
  font-weight: 600;
}

.manuscript-rule {
  display: block;
  width: 54px;
  height: 1px;
  margin: 20px 0 18px;
  background: var(--gold);
}

.manuscript-line {
  display: block;
  width: 78%;
  height: 1px;
  margin-bottom: 12px;
  background: rgba(66,73,90,.18);
}

.manuscript-line.long { width: 100%; }
.manuscript-line.short { width: 58%; }

.ink-star {
  margin-top: auto;
  align-self: flex-end;
  color: var(--teal);
  font-size: 1rem;
}

.teal-ink-drop {
  position: absolute;
  z-index: 3;
  width: 28px;
  height: 28px;
  right: calc(50% - 127px);
  bottom: 22px;
  background: rgba(79,140,138,.82);
  border-radius: 52% 48% 54% 46%;
  transform: rotate(26deg);
  box-shadow: 0 3px 9px rgba(79,140,138,.22);
}

.desk-copy {
  max-width: 560px;
}

.desk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px 14px;
  color: var(--twilight);
  font-size: .86rem;
  margin-bottom: 18px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(79,140,138,.40);
  background: rgba(79,140,138,.09);
  color: #386e6d;
  border-radius: 999px;
  padding: 5px 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .67rem;
  font-weight: 700;
}

.desk-copy h3 {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  margin-bottom: 16px;
}

.desk-copy > p {
  color: #51494c;
  font-size: 1.04rem;
  margin-bottom: 22px;
}

.desk-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 26px;
  padding: 13px 15px;
  border-left: 2px solid var(--gold);
  background: rgba(177,138,80,.055);
}

.desk-note p {
  margin: 0;
  color: var(--twilight);
  font-style: italic;
  font-size: .94rem;
}

.desk-note-star {
  color: var(--teal);
  flex: 0 0 auto;
}

@media (max-width: 800px) {
  .desk-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 30px 24px 34px;
  }

  .desk-book-visual {
    min-height: 295px;
  }

  .desk-copy {
    margin: 0 auto;
  }

  .desk-meta {
    justify-content: center;
  }

  .desk-note {
    justify-content: center;
    text-align: left;
  }
}


/* Version 7: Letters from Reeca */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.letters-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(79,140,138,.07), transparent 25%),
    radial-gradient(circle at 90% 82%, rgba(177,138,80,.08), transparent 26%),
    var(--parchment);
}

.letters-card {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(38px, 6vw, 72px);
  align-items: center;
  padding: clamp(32px, 5vw, 58px);
  border: 1px solid rgba(177,138,80,.40);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,250,242,.84));
  box-shadow: 0 22px 58px rgba(33,29,32,.09);
}

.letters-art {
  min-height: 260px;
  position: relative;
}

.envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 145px;
  transform: translate(-52%,-44%) rotate(-5deg);
  background: #eee4d5;
  border: 1px solid rgba(177,138,80,.55);
  border-radius: 7px;
  box-shadow: 0 18px 30px rgba(33,29,32,.12);
  overflow: hidden;
}

.envelope::before,
.envelope::after {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 138px;
  height: 110px;
  border-top: 1px solid rgba(177,138,80,.38);
}

.envelope::before {
  left: -50px;
  transform: rotate(34deg);
}

.envelope::after {
  right: -50px;
  transform: rotate(-34deg);
}

.envelope-flap {
  position: absolute;
  left: 50%;
  top: -55px;
  width: 160px;
  height: 116px;
  transform: translateX(-50%) rotate(45deg);
  background: #f7efe3;
  border-right: 1px solid rgba(177,138,80,.42);
  border-bottom: 1px solid rgba(177,138,80,.42);
}

.wax-seal {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 58%;
  transform: translate(-50%,-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: var(--parchment);
  font-size: .66rem;
  letter-spacing: .08em;
  font-weight: 700;
  border: 2px solid rgba(244,239,230,.5);
  box-shadow: 0 5px 12px rgba(33,29,32,.14);
}

.ink-bottle {
  position: absolute;
  right: 2%;
  bottom: 8px;
  width: 62px;
  height: 72px;
}

.ink-glass {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 54px;
  height: 48px;
  border: 2px solid rgba(79,140,138,.72);
  border-radius: 10px 10px 15px 15px;
  background: linear-gradient(180deg, rgba(79,140,138,.10), rgba(79,140,138,.42));
}

.ink-neck {
  position: absolute;
  left: 19px;
  top: 0;
  width: 27px;
  height: 26px;
  border: 2px solid rgba(79,140,138,.72);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.letter-star {
  position: absolute;
  color: var(--gold);
}

.ls-one {
  left: 8%;
  top: 10%;
  font-size: 1.05rem;
}

.ls-two {
  right: 13%;
  top: 20%;
  color: var(--teal);
  font-size: .86rem;
}

.letter-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.55), transparent);
}

.ll-one {
  width: 90px;
  left: 0;
  bottom: 42px;
}

.ll-two {
  width: 70px;
  right: 10px;
  top: 48px;
}

.letters-copy h2 {
  max-width: 600px;
  margin-bottom: 18px;
}

.letters-copy > p {
  max-width: 620px;
  color: #51494c;
  font-size: 1.03rem;
}

.letters-form {
  display: flex;
  gap: 10px;
  margin-top: 25px;
  max-width: 650px;
}

.letters-form input {
  min-width: 0;
  flex: 1;
  background: #fffdf9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.letters-note {
  margin-top: 12px !important;
  font-size: .82rem !important;
  color: var(--muted) !important;
}

@media (max-width: 800px) {
  .letters-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }

  .letters-art {
    min-height: 220px;
    width: min(100%, 330px);
    margin: 0 auto;
  }

  .letters-copy h2,
  .letters-copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .letters-form {
    flex-direction: column;
  }
}


/* Version 8: Homepage polish pass */

/* Global refinements */
body {
  text-rendering: optimizeLegibility;
}

.section {
  position: relative;
}

.section h2 {
  letter-spacing: .01em;
}

.btn {
  box-shadow: 0 6px 18px rgba(33,29,32,.08);
}

.btn.alt {
  box-shadow: 0 8px 20px rgba(79,140,138,.15);
}

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

.divider {
  opacity: .92;
}

/* Header / nav polish */
.site-header {
  box-shadow: 0 6px 20px rgba(33,29,32,.04);
}

.brand {
  transition: color .2s ease;
}

.brand:hover {
  color: var(--teal);
}

.site-nav a {
  transition: color .18s ease, border-color .18s ease;
}

/* Footer refinement */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,140,138,.12), transparent 30%),
    radial-gradient(circle at 85% 70%, rgba(177,138,80,.13), transparent 28%),
    var(--twilight);
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  width: 110px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.75), transparent);
}

.footer-brand {
  position: relative;
  display: inline-block;
  padding-top: 10px;
}

.footer-brand::before {
  content: "✦";
  display: block;
  color: #d7c6a5;
  font-size: .8rem;
  margin-bottom: 6px;
}

.footer-links a, .social-links a {
  transition: color .18s ease;
}

/* Hero polish */
.hero .wrap {
  max-width: 920px;
}

.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: min(86%, 980px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.36), transparent);
  pointer-events: none;
}

.hero .tagline {
  position: relative;
  display: inline-block;
  padding: 0 6px 8px;
}

.hero .tagline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 92px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(177,138,80,.65);
}

/* Featured Worlds polish */
.featured-worlds .section-title {
  margin-bottom: 34px;
}

.world-card {
  background-clip: padding-box;
}

.world-copy .mini {
  margin-bottom: 4px;
}

.vow-world .world-copy h3,
.roll-world .world-copy h3 {
  max-width: 12ch;
}

.world-copy p {
  line-height: 1.7;
}

.world-copy .btn {
  align-self: flex-start;
}

/* About preview polish */
.about-preview-copy p + p {
  margin-top: 14px;
}

.about-preview .about-photo-wrap::after {
  content: "";
  position: absolute;
  inset: auto 10% -10px 10%;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(33,29,32,.12), transparent 72%);
  filter: blur(5px);
  z-index: 0;
}

.about-preview .author-photo-frame {
  position: relative;
  z-index: 1;
}

/* Writing desk polish */
.desk-card {
  backdrop-filter: blur(4px);
}

.desk-card:hover {
  box-shadow: 0 24px 60px rgba(33,29,32,.10);
}

.manuscript-sheet strong {
  color: var(--ink);
}

.desk-note {
  border-radius: 0 10px 10px 0;
}

/* Letters section polish */
.letters-card:hover {
  box-shadow: 0 26px 62px rgba(33,29,32,.11);
}

.letters-copy .eyebrow {
  margin-bottom: 10px;
}

.letters-form input:focus {
  outline: 2px solid rgba(79,140,138,.38);
  outline-offset: 1px;
}

/* Homepage spacing harmony */
.featured-worlds + .about-preview {
  padding-top: 70px;
}

.about-preview + .writing-desk {
  padding-top: 70px;
}

.writing-desk + .letters-section {
  padding-top: 70px;
}

@media (max-width: 800px) {
  .hero::after {
    width: calc(100% - 36px);
  }

  .world-copy .btn {
    align-self: stretch;
    text-align: center;
  }

  .featured-worlds + .about-preview,
  .about-preview + .writing-desk,
  .writing-desk + .letters-section {
    padding-top: 60px;
  }
}


/* Version 9: Homepage hero artwork */
.homepage-hero {
  min-height: 540px;
  display: flex;
  align-items: center;
  text-align: left;
  background-image:
    linear-gradient(
      90deg,
      rgba(244,239,230,.98) 0%,
      rgba(244,239,230,.96) 35%,
      rgba(244,239,230,.72) 52%,
      rgba(244,239,230,.18) 72%,
      rgba(244,239,230,.04) 100%
    ),
    url("../images/homepage-hero.webp");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

.homepage-hero::before {
  background:
    radial-gradient(circle at 10% 15%, rgba(79,140,138,.06), transparent 25%),
    linear-gradient(180deg, rgba(244,239,230,.04), rgba(244,239,230,.16));
}

.homepage-hero .wrap {
  width: min(calc(100% - 36px), var(--max-width));
  max-width: var(--max-width);
  margin: 0 auto;
}

.homepage-hero .wrap > * {
  max-width: 630px;
}

.homepage-hero h1 {
  margin-left: 0;
  margin-right: 0;
}

.homepage-hero .tagline {
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
}

.homepage-hero .lede {
  margin-left: 0;
  margin-right: 0;
}

.homepage-hero .tagline::after {
  left: 0;
  transform: none;
}

.homepage-hero::after {
  bottom: 18px;
}

@media (max-width: 900px) {
  .homepage-hero {
    min-height: 500px;
    background-image:
      linear-gradient(
        180deg,
        rgba(244,239,230,.95) 0%,
        rgba(244,239,230,.92) 48%,
        rgba(244,239,230,.52) 72%,
        rgba(244,239,230,.22) 100%
      ),
      url("../images/homepage-hero.webp");
    background-position: center, 66% center;
  }

  .homepage-hero,
  .homepage-hero .wrap {
    text-align: center;
  }

  .homepage-hero .wrap > * {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .homepage-hero .tagline::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .homepage-hero {
    min-height: 540px;
    background-position: center, 70% center;
  }
}


/* Version 14: clean reset from Version 9 with approved Featured Worlds scenes */

/* Featured Worlds scene art */
.featured-worlds .scene-art {
  height: 255px;
  min-height: 255px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.featured-worlds .vow-art {
  background-image:
    linear-gradient(180deg, rgba(10,12,17,.03), rgba(10,12,17,.16)),
    url("../images/featured-world-first-vow.webp");
  background-position: center 48%;
  border-bottom: 1px solid rgba(177,138,80,.35);
}

.featured-worlds .roll-art {
  background-image:
    linear-gradient(180deg, rgba(255,248,234,.02), rgba(90,61,35,.10)),
    url("../images/featured-world-tbtr.webp");
  background-position: center 48%;
  border-bottom: 1px solid rgba(177,138,80,.30);
}

.featured-worlds .scene-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -24px 34px rgba(0,0,0,.08);
}

/* Preserve Version 9's dark/light contrast in the text portions */
.featured-worlds .vow-world {
  background: #292527;
  color: var(--parchment);
}

.featured-worlds .vow-world .mini {
  color: #d0ad73;
}

.featured-worlds .vow-world .world-copy p {
  color: #e6ded4;
}

.featured-worlds .roll-world {
  background: #f8f2e8;
  color: var(--ink);
}

.featured-worlds .roll-world .mini {
  color: var(--teal);
}

/* From My Writing Desk: actual Book One cover */
.cover-visual {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}

.cover-shadow {
  position: absolute;
  inset: auto 18% 14px 18%;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(33,29,32,.18), transparent 70%);
  filter: blur(7px);
}

.desk-cover-image {
  position: relative;
  z-index: 1;
  width: min(100%, 255px);
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow:
    0 18px 40px rgba(33,29,32,.16),
    0 0 0 1px rgba(177,138,80,.18);
  transform: rotate(-2deg);
}

@media (max-width: 800px) {
  .featured-worlds .scene-art {
    height: 220px;
    min-height: 220px;
  }

  .featured-worlds .vow-art {
    background-position: 46% 50%;
  }

  .featured-worlds .roll-art {
    background-position: 50% 50%;
  }

  .cover-visual {
    min-height: 330px;
  }

  .desk-cover-image {
    width: min(100%, 230px);
    transform: none;
  }
}


/* --- Version 15: polished Letters from Reeca art --- */
.letters-art {
  min-height: 280px;
  position: relative;
  isolation: isolate;
}

.letter-sheet {
  position: absolute;
  left: 12%;
  top: 20px;
  width: 185px;
  height: 150px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(249,241,229,.95));
  border: 1px solid rgba(177,138,80,.28);
  box-shadow: 0 10px 18px rgba(33,29,32,.06);
  transform: rotate(-4deg);
}

.sheet-line {
  position: absolute;
  left: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,140,138,.22), rgba(79,140,138,.06));
}

.sl-one { top: 42px; width: 105px; }
.sl-two { top: 62px; width: 136px; }
.sl-three { top: 82px; width: 92px; }

.envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 145px;
  transform: translate(-52%,-42%) rotate(-5deg);
  background: linear-gradient(180deg, #f4e9d9 0%, #ebdfce 100%);
  border: 1px solid rgba(177,138,80,.55);
  border-radius: 7px;
  box-shadow: 0 18px 30px rgba(33,29,32,.12), inset 0 1px 0 rgba(255,255,255,.55);
  overflow: hidden;
}

.envelope::before,
.envelope::after {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 138px;
  height: 110px;
  border-top: 1px solid rgba(177,138,80,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0));
}

.envelope-flap {
  position: absolute;
  left: 50%;
  top: -55px;
  width: 160px;
  height: 116px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(180deg, #fbf3e8, #f3e6d5);
  border-right: 1px solid rgba(177,138,80,.42);
  border-bottom: 1px solid rgba(177,138,80,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.wax-seal {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 58%;
  transform: translate(-50%,-50%);
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,248,233,.28), transparent 28%), linear-gradient(180deg, #caa15f 0%, #b7863d 100%);
  border: 2px solid rgba(255,250,240,.42);
  box-shadow: inset -3px -4px 8px rgba(112,74,29,.25), inset 2px 2px 5px rgba(255,251,243,.18), 0 6px 12px rgba(33,29,32,.12);
}

.seal-core,
.seal-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background: var(--deep-ink);
  border-radius: 999px;
  transform-origin: center center;
  opacity: .88;
}

.seal-core {
  width: 4px;
  height: 4px;
  transform: translate(-50%,-50%);
}

.seal-ray {
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  margin-top: -7px;
}

.ray-1 { transform: translate(-50%,-50%) rotate(0deg); height: 16px; }
.ray-2 { transform: translate(-50%,-50%) rotate(45deg); height: 11px; }
.ray-3 { transform: translate(-50%,-50%) rotate(90deg); height: 15px; }
.ray-4 { transform: translate(-50%,-50%) rotate(135deg); height: 10px; }
.ray-5 { transform: translate(-50%,-50%) rotate(180deg); height: 16px; }
.ray-6 { transform: translate(-50%,-50%) rotate(225deg); height: 11px; }
.ray-7 { transform: translate(-50%,-50%) rotate(270deg); height: 15px; }
.ray-8 { transform: translate(-50%,-50%) rotate(315deg); height: 10px; }

.quill {
  position: absolute;
  left: 5%;
  bottom: 22px;
  width: 134px;
  height: 44px;
  transform: rotate(-15deg);
}

.quill-shaft {
  position: absolute;
  left: 20px;
  top: 21px;
  width: 102px;
  height: 3px;
  background: linear-gradient(90deg, rgba(177,138,80,.35), rgba(177,138,80,.9));
  border-radius: 999px;
}

.quill-feather {
  position: absolute;
  left: 0;
  top: 3px;
  width: 54px;
  height: 28px;
  background: linear-gradient(135deg, rgba(79,140,138,.95), rgba(79,140,138,.55));
  border-radius: 70% 25% 68% 18%;
  transform: rotate(-6deg);
  box-shadow: inset -6px -5px 8px rgba(25,63,74,.18);
}

.quill-feather::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 2px;
  width: 2px;
  height: 24px;
  background: rgba(244,239,230,.85);
  transform: rotate(12deg);
  border-radius: 999px;
}

.quill-feather::after {
  content: "";
  position: absolute;
  inset: 3px 7px 5px 7px;
  border-left: 1px solid rgba(244,239,230,.35);
  border-top-left-radius: 100% 100%;
  transform: skewX(-10deg);
}

.ink-bottle {
  position: absolute;
  right: 2%;
  bottom: 8px;
  width: 62px;
  height: 72px;
}

.ink-glass {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 54px;
  height: 48px;
  border: 2px solid rgba(79,140,138,.72);
  border-radius: 10px 10px 15px 15px;
  background: linear-gradient(180deg, rgba(79,140,138,.10), rgba(79,140,138,.42));
  box-shadow: 0 8px 16px rgba(33,29,32,.08);
}

.ink-neck {
  position: absolute;
  left: 19px;
  top: 0;
  width: 27px;
  height: 26px;
  border: 2px solid rgba(79,140,138,.72);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(79,140,138,.06));
}

.ls-one {
  left: 9%;
  top: 6%;
  font-size: 1rem;
}

.ls-two {
  right: 14%;
  top: 16%;
  color: var(--teal);
  font-size: .84rem;
}

.ll-one {
  width: 96px;
  left: 2px;
  bottom: 18px;
}

.ll-two {
  width: 74px;
  right: 10px;
  top: 36px;
}

@media (max-width: 800px) {
  .letters-art {
    min-height: 245px;
  }

  .letter-sheet {
    left: 6%;
    top: 16px;
    width: 160px;
    height: 130px;
  }

  .envelope {
    width: 196px;
    height: 130px;
    transform: translate(-50%,-38%) rotate(-4deg);
  }

  .envelope-flap {
    width: 146px;
    height: 104px;
    top: -50px;
  }

  .quill {
    left: 0;
    bottom: 18px;
    transform: scale(.92) rotate(-15deg);
  }

  .ink-bottle {
    right: 0;
    transform: scale(.94);
  }
}


/* --- Version 16: make Letters from Reeca feel more enchanted/storybook --- */

.letters-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 20%, rgba(79,140,138,.08), transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(177,138,80,.10), transparent 28%),
    linear-gradient(135deg, rgba(255,252,246,.88), rgba(250,244,235,.96));
  border-color: rgba(177,138,80,.42);
}

.letters-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(177,138,80,.16);
  border-radius: 18px;
  pointer-events: none;
}

.fantasy-letters-art {
  min-height: 310px;
}

.letters-vignette {
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 45%, rgba(255,247,226,.95), rgba(233,221,203,.92) 42%, rgba(80,93,106,.18) 100%),
    linear-gradient(180deg, rgba(44,50,58,.10), rgba(44,50,58,.04));
  box-shadow:
    inset 0 0 0 1px rgba(177,138,80,.22),
    inset 0 22px 42px rgba(255,255,255,.18);
}

.letters-frame {
  position: absolute;
  inset: 32px;
  border-radius: 18px;
  border: 1px solid rgba(177,138,80,.24);
  pointer-events: none;
}

.letter-sheet {
  left: 14%;
  top: 38px;
  width: 182px;
  height: 145px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(249,241,229,.96));
  box-shadow: 0 14px 24px rgba(33,29,32,.08);
}

.sl-one { width: 112px; }
.sl-two { width: 138px; }
.sl-three { width: 98px; }

.envelope {
  left: 52%;
  top: 53%;
  transform: translate(-52%,-43%) rotate(-6deg);
  box-shadow:
    0 22px 34px rgba(33,29,32,.14),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.wax-seal {
  width: 52px;
  height: 52px;
  top: 59%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,248,233,.30), transparent 26%),
    linear-gradient(180deg, #d1a867 0%, #b8863e 100%);
  box-shadow:
    inset -3px -5px 9px rgba(112,74,29,.25),
    inset 2px 2px 5px rgba(255,251,243,.18),
    0 8px 15px rgba(33,29,32,.14);
}

.seal-core,
.seal-ray {
  background: #6b4d23;
}

.quill {
  left: 9%;
  bottom: 28px;
  width: 142px;
  transform: rotate(-18deg);
}

.quill-shaft {
  width: 108px;
  background: linear-gradient(90deg, rgba(177,138,80,.42), rgba(177,138,80,.95));
}

.quill-feather {
  width: 58px;
  height: 30px;
  background: linear-gradient(135deg, rgba(69,130,129,.98), rgba(79,140,138,.58));
  box-shadow: inset -7px -6px 10px rgba(25,63,74,.18), 0 4px 8px rgba(33,29,32,.06);
}

.lily-sprig {
  position: absolute;
  right: 10%;
  bottom: 24px;
  width: 86px;
  height: 92px;
  z-index: 2;
  opacity: .96;
}

.lily-stem {
  position: absolute;
  left: 34px;
  bottom: 6px;
  width: 2px;
  height: 62px;
  background: linear-gradient(180deg, rgba(116,143,82,.25), rgba(93,125,58,.95));
  transform: rotate(8deg);
  border-radius: 999px;
}

.lily-bloom,
.lily-leaf {
  position: absolute;
  display: block;
}

.lily-bloom {
  width: 28px;
  height: 28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.94), rgba(242,235,226,.92) 65%, rgba(222,208,191,.86) 100%);
  border-radius: 62% 38% 60% 40%;
  box-shadow: 0 3px 6px rgba(33,29,32,.06);
}

.bloom-one {
  left: 20px;
  top: 10px;
  transform: rotate(18deg);
}

.bloom-two {
  left: 40px;
  top: 24px;
  transform: rotate(-18deg) scale(.92);
}

.bloom-one::before,
.bloom-one::after,
.bloom-two::before,
.bloom-two::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
}

.bloom-one::before { transform: rotate(55deg); }
.bloom-one::after { transform: rotate(-48deg); }
.bloom-two::before { transform: rotate(58deg); }
.bloom-two::after { transform: rotate(-50deg); }

.lily-leaf {
  width: 22px;
  height: 10px;
  background: linear-gradient(135deg, rgba(111,147,73,.85), rgba(76,110,53,.95));
  border-radius: 100% 0 100% 0;
}

.leaf-one {
  left: 16px;
  bottom: 24px;
  transform: rotate(-36deg);
}

.leaf-two {
  left: 38px;
  bottom: 18px;
  transform: rotate(30deg);
}

.ls-one {
  left: 12%;
  top: 11%;
}

.ls-two {
  right: 18%;
  top: 14%;
}

.ls-three {
  right: 28%;
  bottom: 28%;
  color: var(--gold);
  font-size: .72rem;
  position: absolute;
}

.ll-one {
  width: 88px;
  left: 10px;
  bottom: 22px;
}

.ll-two {
  width: 68px;
  right: 16px;
  top: 48px;
}

@media (max-width: 800px) {
  .fantasy-letters-art {
    min-height: 260px;
  }

  .letters-vignette {
    inset: 10px;
  }

  .letters-frame {
    inset: 21px;
  }

  .letter-sheet {
    left: 7%;
    top: 28px;
    width: 150px;
    height: 120px;
  }

  .envelope {
    width: 190px;
    height: 126px;
    left: 52%;
    top: 54%;
  }

  .quill {
    left: 2%;
    bottom: 16px;
    transform: scale(.9) rotate(-18deg);
  }

  .lily-sprig {
    right: 5%;
    bottom: 14px;
    transform: scale(.88);
  }
}


/* Version 17: use illustrated Letters from Reeca art */
.letters-illustration {
  min-height: auto;
}

.letters-illustration-image {
  display: block;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(33,29,32,.10);
}

@media (max-width: 800px) {
  .letters-illustration-image {
    max-width: 100%;
  }
}


/* =========================
   Version 18: Books page
   ========================= */
.books-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #1c1716;
  background:
    linear-gradient(180deg, rgba(18,16,18,.12), rgba(18,16,18,.18)),
    url("../images/books-hero-storybook.png") center/cover no-repeat;
}

.books-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(248,243,233,.78) 0%, rgba(248,243,233,.66) 20%, rgba(248,243,233,.42) 36%, rgba(248,243,233,.12) 50%, rgba(248,243,233,0) 64%),
    linear-gradient(90deg, rgba(8,10,14,.44) 0%, rgba(8,10,14,.12) 18%, rgba(8,10,14,0) 32%, rgba(49,29,23,0) 68%, rgba(49,29,23,.12) 84%, rgba(49,29,23,.34) 100%),
    linear-gradient(180deg, rgba(12,10,12,.08) 0%, rgba(12,10,12,.18) 100%);
}

.books-hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 840px;
  padding: 10px 0;
}
.books-hero .hero-brand-mark {
  color: var(--gold);
  text-shadow: 0 0 22px rgba(177,138,80,.24), 0 2px 10px rgba(0,0,0,.12);
}
.books-hero .eyebrow {
  color: #476766;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}
.books-hero h1 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 18px rgba(255,248,240,.16);
}
.books-hero .lede {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: #3c3431;
  text-shadow: 0 1px 10px rgba(255,248,240,.16);
}

.books-vow-section {
  background: linear-gradient(180deg, #242124 0%, #2c272a 100%);
  color: var(--parchment);
}

.books-tbtr-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(79,140,138,.08), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(177,138,80,.10), transparent 28%),
    #f4eee4;
}

.books-series-card {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px,.85fr) minmax(0,1.15fr);
  gap: clamp(38px,6vw,76px);
  align-items: center;
}

.books-series-visual {
  min-height: 520px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 58px rgba(33,29,32,.16);
}

.books-vow-visual {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(20,18,19,.05), rgba(20,18,19,.32)),
    url("../images/featured-world-first-vow.webp") center/cover no-repeat;
  border: 1px solid rgba(177,138,80,.34);
}

.books-vow-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(16,14,16,.34) 100%);
}

.books-cover {
  position: relative;
  z-index: 1;
  width: min(68%, 285px);
  height: auto;
  border-radius: 7px;
  box-shadow: 0 24px 48px rgba(0,0,0,.38), 0 0 0 1px rgba(218,184,121,.22);
  transform: rotate(-1.5deg);
}


.books-tbtr-visual {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255,249,238,.02), rgba(76,51,29,.12)),
    url("../images/featured-world-tbtr.webp") center/cover no-repeat;
  border: 1px solid rgba(177,138,80,.32);
}

.books-tbtr-cover {
  width: min(64%, 300px);
  transform: rotate(1.6deg);
}

.books-tbtr-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 70px rgba(71,47,29,.12);
}

.books-series-copy { max-width: 650px; }
.books-series-copy h2 { font-size: clamp(2rem,3.5vw,3.15rem); margin: 8px 0 20px; }
.books-series-copy > p { line-height: 1.75; }
.books-vow-card .books-series-copy > p { color: #e5ddd4; }

.books-current-book {
  margin: 28px 0 30px;
  padding: 24px 26px;
  border-left: 2px solid var(--gold);
  background: rgba(255,255,255,.055);
  border-radius: 0 16px 16px 0;
}

.books-current-book h3 {
  margin: 7px 0 5px;
  font-size: clamp(1.6rem,2.6vw,2.15rem);
}

.book-subline {
  display: block;
  margin-bottom: 13px;
  color: var(--gold);
  font-size: .84rem;
  letter-spacing: .06em;
}

.books-current-book p { margin: 0; line-height: 1.68; }
.books-vow-card .books-current-book p { color: #e8dfd5; }

.tbtr-first-adventure {
  background: rgba(255,255,255,.52);
  border-left-color: var(--teal);
  box-shadow: inset 0 0 0 1px rgba(177,138,80,.12);
}

.tbtr-first-adventure .book-subline { color: var(--teal); }

.book-object-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.object-token {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(177,138,80,.40);
  background: rgba(244,239,230,.86);
  color: var(--gold);
  box-shadow: 0 6px 14px rgba(33,29,32,.06);
  font-family: Georgia, serif;
}

.pendant-token { color: #557c9a; }
.chest-token { color: #7b5637; }
.leaf-token { color: #728953; }

.more-worlds-section {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(79,140,138,.07), transparent 35%),
    var(--parchment);
}

.more-worlds-wrap { max-width: 800px; }
.more-worlds-mark { color: var(--teal); font-size: 1.8rem; margin-bottom: 8px; }
.more-worlds-wrap h2 { max-width: 700px; margin: 8px auto 18px; }
.more-worlds-wrap p { max-width: 710px; margin: 0 auto; color: #51494c; font-size: 1.04rem; line-height: 1.75; }
.more-worlds-divider { display: flex; align-items: center; gap: 12px; width: 180px; margin: 28px auto 0; }
.more-worlds-divider span { height: 1px; flex: 1; background: rgba(177,138,80,.48); }
.more-worlds-divider b { color: var(--teal); font-weight: 400; }

.books-letters-section { background: #f2ebdf; }

@media (max-width: 850px) {
  .books-series-card { grid-template-columns: 1fr; gap: 34px; }
  .books-series-visual { min-height: 400px; }
  .books-series-copy { max-width: none; }
  .books-cover { width: min(58%, 250px); }
}

@media (max-width: 560px) {
  .books-series-visual { min-height: 330px; border-radius: 22px; }
  .books-current-book { padding: 20px; }
  .books-cover { width: min(62%, 220px); }
}

@media (max-width: 900px) {
  .books-tbtr-cover { width: min(58%, 250px); }
}


/* =========================================================
   Version 20 — Where the Vow Still Burns
   ========================================================= */

.wv-hero {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(23,20,22,.96) 0%, rgba(23,20,22,.90) 38%, rgba(23,20,22,.52) 62%, rgba(23,20,22,.20) 100%),
    url("../images/featured-world-first-vow.webp") center/cover no-repeat;
  color: var(--parchment);
}

.wv-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 46%, rgba(177,138,80,.10), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22));
}

.wv-hero-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 36px), var(--max-width));
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr);
  align-items: center;
  gap: clamp(42px,7vw,92px);
  padding: 78px 0 74px;
}

.wv-hero-copy { max-width: 690px; }
.wv-hero-copy .eyebrow { color: #d5b67c; }
.wv-hero-copy h1 {
  font-size: clamp(3rem,6.7vw,6rem);
  line-height: .98;
  color: var(--parchment);
  margin: 10px 0 14px;
  text-wrap: balance;
}
.wv-bookline {
  margin: 0 0 12px;
  color: #d9cec2;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wv-hero-copy .tagline {
  color: #d7c4a1;
  font-size: clamp(1.16rem,2.2vw,1.55rem);
  max-width: 620px;
}

.wv-hero-cover {
  display: grid;
  place-items: center;
}
.wv-hero-cover img {
  width: min(100%, 310px);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 28px 60px rgba(0,0,0,.52), 0 0 0 1px rgba(210,175,112,.22);
  transform: rotate(1.2deg);
}

.wv-narrow { max-width: 920px; }
.wv-about-book {
  background:
    radial-gradient(circle at 12% 10%, rgba(79,140,138,.05), transparent 24%),
    var(--parchment);
}
.wv-synopsis {
  width: min(100%, 820px);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.78;
}
.wv-synopsis p { margin: 0 0 18px; }
.wv-synopsis-ending {
  margin-top: 26px !important;
  padding: 22px 24px;
  border-left: 2px solid var(--gold);
  background: rgba(177,138,80,.06);
  font-style: italic;
  color: var(--twilight);
}

.wv-characters {
  background:
    radial-gradient(circle at 10% 80%, rgba(177,138,80,.08), transparent 24%),
    linear-gradient(180deg,#262225,#1f1c1e);
  color: var(--parchment);
}
.wv-characters .section-title h2,
.wv-characters .section-title .eyebrow { color: var(--parchment); }
.wv-character-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 30px;
}
.wv-character-card {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(177,138,80,.27);
  background: rgba(255,255,255,.035);
  box-shadow: 0 24px 54px rgba(0,0,0,.18);
}
.wv-character-art {
  height: 340px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(177,138,80,.25);
}
.athleen-art {
  background:
    radial-gradient(circle at 50% 38%, rgba(193,156,91,.22), transparent 20%),
    linear-gradient(180deg, rgba(50,65,60,.25), rgba(22,26,26,.82)),
    url("../images/featured-world-first-vow.webp") 26% center/cover no-repeat;
}
.nightstalker-art {
  background:
    radial-gradient(circle at 54% 42%, rgba(177,138,80,.14), transparent 24%),
    linear-gradient(180deg, rgba(20,22,27,.35), rgba(15,16,19,.88)),
    url("../images/featured-world-first-vow.webp") 76% center/cover no-repeat;
}
.wv-art-mark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(177,138,80,.45);
  background: rgba(24,21,23,.66);
  box-shadow: 0 0 30px rgba(177,138,80,.12);
  font-size: 1.25rem;
}
.wv-art-label {
  position: absolute;
  bottom: 16px;
  left: 18px;
  color: rgba(244,239,230,.62);
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wv-character-copy { padding: 30px 30px 34px; }
.wv-character-copy .mini { color: #d2ad71; }
.wv-character-copy h3 {
  font-size: clamp(1.55rem,2.8vw,2.15rem);
  margin: 9px 0 16px;
  color: var(--parchment);
}
.wv-character-copy p { color: #ded4ca; line-height: 1.72; }

.wv-world {
  background:
    radial-gradient(circle at 50% 0%, rgba(177,138,80,.08), transparent 32%),
    #f5efe5;
}
.wv-world .section-intro {
  max-width: 800px;
  margin: 8px auto 0;
  color: #51494c;
  line-height: 1.7;
}
.wv-world-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.wv-world-card {
  min-height: 245px;
  padding: 28px 24px;
  border-radius: 20px;
  border: 1px solid rgba(177,138,80,.26);
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 30px rgba(33,29,32,.06);
}
.wv-world-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 1px solid rgba(177,138,80,.4);
  color: var(--gold);
  font-size: 1.25rem;
}
.wv-world-card h3 { margin: 0 0 10px; }
.wv-world-card p { margin: 0; color: #51494c; line-height: 1.62; }
.dominion-world-card {
  background: linear-gradient(180deg,rgba(230,236,242,.82),rgba(247,247,246,.90));
  border-color: rgba(113,129,151,.28);
}
.dominion-world-card .wv-world-icon {
  color: #738198;
  border-color: rgba(113,129,151,.35);
}

.wv-inside {
  background:
    radial-gradient(circle at 80% 20%, rgba(79,140,138,.06), transparent 25%),
    var(--parchment);
}
.wv-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.wv-feature-grid article {
  padding: 26px 24px 28px;
  border: 1px solid rgba(177,138,80,.24);
  border-radius: 18px;
  background: rgba(255,255,255,.45);
}
.wv-feature-grid article > span { color: var(--teal); }
.wv-feature-grid h3 { font-size: 1.12rem; margin: 12px 0 10px; }
.wv-feature-grid p { margin: 0; color: #51494c; line-height: 1.62; }

.wv-black-book {
  color: var(--parchment);
  background:
    radial-gradient(circle at 50% 32%, rgba(177,138,80,.08), transparent 25%),
    linear-gradient(180deg,#242022,#191719);
}
.wv-black-book .section-title h2,
.wv-black-book .section-title .eyebrow { color: var(--parchment); }
.black-book-shell {
  width: min(100%, 900px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 18px;
  border-radius: 12px;
  background: #0f0d0e;
  box-shadow: 0 26px 56px rgba(0,0,0,.38);
}
.black-book-page {
  min-height: 360px;
  padding: 50px 42px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.03)),
    #c9baa1;
  color: #1d1a1b;
  border: 1px solid rgba(48,40,34,.22);
}
.left-page {
  background:
    linear-gradient(90deg,rgba(0,0,0,.04),transparent 22%),
    #c7b79c;
}
.right-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: Georgia,serif;
  font-size: clamp(1.2rem,2.1vw,1.6rem);
  line-height: 1.65;
}
.right-page p { margin: 0 0 12px; }
.black-book-rule {
  display: block;
  height: 1px;
  width: 88%;
  margin: 28px 0;
  background: rgba(36,29,28,.18);
}
.black-book-rule.short { width: 54%; }

.wv-letters { background: #f5efe5; }

@media (max-width: 900px) {
  .wv-hero { min-height: auto; }
  .wv-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 64px 0;
  }
  .wv-hero-copy { margin: 0 auto; }
  .wv-hero-cover img { width: min(60%, 270px); }
  .wv-character-grid { grid-template-columns: 1fr; }
  .wv-world-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wv-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .wv-hero {
    background:
      linear-gradient(180deg, rgba(23,20,22,.90), rgba(23,20,22,.65)),
      url("../images/featured-world-first-vow.webp") center/cover no-repeat;
  }
  .wv-hero-cover img { width: min(76%, 245px); }
  .wv-world-grid,
  .wv-feature-grid { grid-template-columns: 1fr; }
  .black-book-shell { grid-template-columns: 1fr; }
  .black-book-page { min-height: 260px; padding: 34px 28px; }
  .left-page { display: none; }
}


/* =========================================================
   Version 21 — unified dark First Vow theme
   Header stays light. Hero through Black Book stays dark.
   Letters from Reeca + footer return to author palette.
   ========================================================= */

/* Shared dark world atmosphere */
.wv-about-book,
.wv-characters,
.wv-world,
.wv-inside,
.wv-black-book {
  color: #f0e7db;
  background-color: #1d1a1c;
}

.wv-about-book,
.wv-world,
.wv-inside {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(177,138,80,.08), transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(79,140,138,.05), transparent 24%),
    linear-gradient(180deg, #242022 0%, #1d1a1c 100%);
}

/* Dark section typography */
.wv-about-book .section-title h2,
.wv-about-book .section-title .eyebrow,
.wv-world .section-title h2,
.wv-world .section-title .eyebrow,
.wv-inside .section-title h2,
.wv-inside .section-title .eyebrow,
.wv-black-book .section-title h2,
.wv-black-book .section-title .eyebrow {
  color: #f2e9df;
}

.wv-about-book .section-title .eyebrow,
.wv-world .section-title .eyebrow,
.wv-inside .section-title .eyebrow,
.wv-black-book .section-title .eyebrow {
  color: #d2ad71;
}

.wv-about-book .divider,
.wv-world .divider,
.wv-inside .divider,
.wv-black-book .divider,
.wv-characters .divider {
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.72), transparent);
}

/* Synopsis becomes part of the dark world */
.wv-about-book {
  border-top: 1px solid rgba(177,138,80,.18);
  border-bottom: 1px solid rgba(177,138,80,.16);
}

.wv-synopsis {
  color: #ddd2c7;
}

.wv-synopsis p {
  color: #ddd2c7;
}

.wv-synopsis-ending {
  color: #f0e7db !important;
  background:
    linear-gradient(90deg, rgba(177,138,80,.10), rgba(177,138,80,.035));
  border-left-color: #c6a164;
  box-shadow: inset 0 0 0 1px rgba(177,138,80,.08);
}

/* Characters */
.wv-characters {
  background:
    radial-gradient(circle at 12% 76%, rgba(177,138,80,.08), transparent 25%),
    radial-gradient(circle at 84% 22%, rgba(79,140,138,.05), transparent 22%),
    linear-gradient(180deg,#201c1f,#181618);
  border-bottom: 1px solid rgba(177,138,80,.14);
}

.wv-character-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
  border-color: rgba(177,138,80,.34);
  box-shadow:
    0 22px 48px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.015);
}

.wv-character-art {
  height: 360px;
}

.wv-character-copy {
  background: linear-gradient(180deg, rgba(18,16,18,.08), rgba(18,16,18,.28));
}

.wv-character-copy .mini {
  color: #d9b674;
}

.wv-character-copy p {
  color: #ded4ca;
}

.wv-art-label {
  color: rgba(244,239,230,.50);
}

/* Inside the World turns into dark relic cards */
.wv-world {
  border-bottom: 1px solid rgba(177,138,80,.14);
}

.wv-world .section-intro {
  color: #d8cec4;
}

.wv-world-card {
  min-height: 260px;
  color: #eee5da;
  border-color: rgba(177,138,80,.30);
  background:
    radial-gradient(circle at 50% 0%, rgba(177,138,80,.08), transparent 34%),
    linear-gradient(180deg, #292427 0%, #211d20 100%);
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.012);
}

.wv-world-card h3 {
  color: #ecdcc5;
}

.wv-world-card p {
  color: #d6cbc1;
}

.wv-world-icon {
  width: 56px;
  height: 56px;
  color: #d3ad70;
  border-color: rgba(177,138,80,.42);
  background: rgba(177,138,80,.045);
  box-shadow: inset 0 0 18px rgba(177,138,80,.035);
}

/* Dominion stays cool, but still belongs to the same dark page */
.dominion-world-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(145,170,202,.09), transparent 34%),
    linear-gradient(180deg, #272b32 0%, #1e2228 100%);
  border-color: rgba(135,157,186,.34);
}

.dominion-world-card h3 {
  color: #dce4ee;
}

.dominion-world-card p {
  color: #cbd4de;
}

.dominion-world-card .wv-world-icon {
  color: #aebfd2;
  border-color: rgba(149,171,201,.38);
  background: rgba(130,151,179,.045);
}

/* What You'll Find Inside */
.wv-inside {
  border-bottom: 1px solid rgba(177,138,80,.14);
}

.wv-feature-grid article {
  position: relative;
  overflow: hidden;
  min-height: 215px;
  color: #eee4d8;
  border-color: rgba(177,138,80,.29);
  background:
    radial-gradient(circle at 14% 8%, rgba(177,138,80,.07), transparent 32%),
    linear-gradient(180deg, #292427 0%, #211d20 100%);
  box-shadow:
    0 15px 30px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.012);
}

.wv-feature-grid article::after {
  content: "";
  position: absolute;
  inset: auto 18px 15px 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.24), transparent);
}

.wv-feature-grid article > span {
  color: #cda86d;
}

.wv-feature-grid h3 {
  color: #ead8bf;
}

.wv-feature-grid p {
  color: #d5c9be;
}

/* Black Book as the visual climax of the dark section */
.wv-black-book {
  background:
    radial-gradient(circle at 50% 28%, rgba(177,138,80,.10), transparent 26%),
    radial-gradient(circle at 12% 70%, rgba(177,138,80,.055), transparent 20%),
    linear-gradient(180deg,#191719,#121012);
  padding-bottom: 92px;
}

.black-book-shell {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(177,138,80,.26);
  background:
    linear-gradient(180deg, #131112, #0c0b0c);
  box-shadow:
    0 28px 68px rgba(0,0,0,.48),
    0 0 50px rgba(177,138,80,.035);
}

.black-book-shell::before,
.black-book-shell::after {
  content: "✦";
  position: absolute;
  top: 50%;
  color: rgba(177,138,80,.62);
  font-size: .8rem;
  transform: translateY(-50%);
}

.black-book-shell::before { left: -28px; }
.black-book-shell::after { right: -28px; }

.black-book-page {
  position: relative;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,248,229,.35), transparent 28%),
    linear-gradient(180deg, #d2c2a7 0%, #c3b093 100%);
  border-color: rgba(53,42,35,.28);
  box-shadow: inset 0 0 26px rgba(77,54,35,.08);
}

.black-book-page::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(74,54,38,.10);
  pointer-events: none;
}

.right-page {
  color: #1f1a19;
}

.right-page p {
  position: relative;
  padding-left: 12px;
}

.right-page p::before {
  content: "";
  position: absolute;
  left: 0;
  top: .74em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(112,80,41,.56);
}

/* Transition out of the First Vow world */
.wv-letters {
  position: relative;
  background:
    radial-gradient(circle at 12% 20%, rgba(79,140,138,.07), transparent 25%),
    radial-gradient(circle at 90% 82%, rgba(177,138,80,.08), transparent 26%),
    var(--parchment);
  border-top: 1px solid rgba(177,138,80,.28);
}

.wv-letters::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(86%, 980px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.62), transparent);
}

/* Keep the author-brand newsletter light */
.wv-letters .letters-card {
  background:
    radial-gradient(circle at 14% 20%, rgba(79,140,138,.08), transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(177,138,80,.10), transparent 28%),
    linear-gradient(135deg, rgba(255,252,246,.88), rgba(250,244,235,.96));
  color: var(--ink);
}

.wv-letters .letters-copy h2 {
  color: var(--ink);
}

.wv-letters .letters-copy > p {
  color: #51494c;
}

/* Mobile refinements */
@media (max-width: 900px) {
  .wv-world-card,
  .wv-feature-grid article {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .wv-about-book,
  .wv-characters,
  .wv-world,
  .wv-inside,
  .wv-black-book {
    background-image:
      radial-gradient(circle at 50% 0%, rgba(177,138,80,.06), transparent 30%),
      linear-gradient(180deg,#211d20,#181618);
  }

  .black-book-shell::before,
  .black-book-shell::after {
    display: none;
  }
}


/* =========================================================
   Version 22 — force Inside the World dark styling
   ========================================================= */
section.wv-world.light {
  color: #f0e7db !important;
  background-color: #1d1a1c !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(177,138,80,.08), transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(79,140,138,.05), transparent 24%),
    linear-gradient(180deg, #242022 0%, #1d1a1c 100%) !important;
}

section.wv-world.light .section-title h2,
section.wv-world.light .section-title .eyebrow {
  color: #f2e9df !important;
}

section.wv-world.light .section-title .eyebrow {
  color: #d2ad71 !important;
}

section.wv-world.light .section-intro {
  color: #d8cec4 !important;
}

section.wv-world.light .divider {
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.72), transparent) !important;
}

section.wv-world.light .wv-world-card {
  min-height: 260px;
  color: #eee5da !important;
  border-color: rgba(177,138,80,.30) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(177,138,80,.08), transparent 34%),
    linear-gradient(180deg, #292427 0%, #211d20 100%) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.012) !important;
}

section.wv-world.light .wv-world-card h3 {
  color: #ecdcc5 !important;
}

section.wv-world.light .wv-world-card p {
  color: #d6cbc1 !important;
}

section.wv-world.light .wv-world-icon {
  width: 56px;
  height: 56px;
  color: #d3ad70 !important;
  border-color: rgba(177,138,80,.42) !important;
  background: rgba(177,138,80,.045) !important;
  box-shadow: inset 0 0 18px rgba(177,138,80,.035) !important;
}

section.wv-world.light .dominion-world-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(145,170,202,.09), transparent 34%),
    linear-gradient(180deg, #272b32 0%, #1e2228 100%) !important;
  border-color: rgba(135,157,186,.34) !important;
}

section.wv-world.light .dominion-world-card h3 {
  color: #dce4ee !important;
}

section.wv-world.light .dominion-world-card p {
  color: #cbd4de !important;
}

section.wv-world.light .dominion-world-card .wv-world-icon {
  color: #aebfd2 !important;
  border-color: rgba(149,171,201,.38) !important;
  background: rgba(130,151,179,.045) !important;
}


/* =========================================================
   Version 23 — Section 1: enter the First Vow world
   Hero flows naturally into the Synopsis rather than ending
   like a separate banner.
   ========================================================= */

/* Keep the hero scene visible, but let it fall naturally into darkness. */
.wv-hero {
  min-height: 700px;
  background:
    linear-gradient(
      90deg,
      rgba(18,16,18,.95) 0%,
      rgba(18,16,18,.88) 34%,
      rgba(18,16,18,.46) 61%,
      rgba(18,16,18,.18) 100%
    ),
    url("../images/featured-world-first-vow.webp") center 48% / cover no-repeat;
}

.wv-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(29,26,28,0) 0%,
      rgba(29,26,28,.50) 48%,
      rgba(29,26,28,.92) 82%,
      #1d1a1c 100%
    );
}

.wv-hero-overlay {
  z-index: 0;
}

.wv-hero-inner {
  z-index: 2;
}

/* Make the synopsis feel like the next stretch of the same landscape. */
.wv-about-book {
  position: relative;
  margin-top: -1px;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(177,138,80,.13);
  overflow: hidden;
  background-color: #1d1a1c !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(29,26,28,.54) 0%,
      rgba(29,26,28,.78) 25%,
      rgba(29,26,28,.94) 72%,
      #1d1a1c 100%
    ),
    url("../images/featured-world-first-vow.webp") center 82% / cover no-repeat !important;
}

.wv-about-book::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(177,138,80,.08), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(244,239,230,.025), transparent 22%),
    linear-gradient(90deg, rgba(9,8,9,.22), transparent 30%, transparent 70%, rgba(9,8,9,.18));
}

.wv-about-book .wrap {
  position: relative;
  z-index: 1;
}

/* The synopsis becomes a dark-vellum panel sitting inside the world. */
.wv-synopsis {
  position: relative;
  width: min(100%, 850px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(177,138,80,.29);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(20,18,20,.78), rgba(19,17,19,.88));
  box-shadow:
    0 24px 58px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.012);
  backdrop-filter: blur(2px);
}

.wv-synopsis::before,
.wv-synopsis::after {
  content: "✦";
  position: absolute;
  color: rgba(177,138,80,.58);
  font-size: .72rem;
}

.wv-synopsis::before {
  top: 14px;
  left: 16px;
}

.wv-synopsis::after {
  right: 16px;
  bottom: 14px;
}

.wv-synopsis p {
  color: #ded4ca !important;
}

.wv-synopsis-ending {
  border-left-color: #c9a66b !important;
  background:
    linear-gradient(90deg, rgba(177,138,80,.11), rgba(177,138,80,.025)) !important;
}

/* Remove the "new page" feeling between hero and synopsis heading. */
.wv-about-book .section-title {
  margin-top: -12px;
}

@media (max-width: 900px) {
  .wv-hero {
    min-height: auto;
    background:
      linear-gradient(
        180deg,
        rgba(18,16,18,.78) 0%,
        rgba(18,16,18,.63) 48%,
        rgba(18,16,18,.82) 82%,
        #1d1a1c 100%
      ),
      url("../images/featured-world-first-vow.webp") 58% center / cover no-repeat;
  }

  .wv-hero::after {
    height: 120px;
  }

  .wv-about-book {
    background-image:
      linear-gradient(
        180deg,
        rgba(29,26,28,.72) 0%,
        rgba(29,26,28,.91) 52%,
        #1d1a1c 100%
      ),
      url("../images/featured-world-first-vow.webp") 58% center / cover no-repeat !important;
  }
}

@media (max-width: 620px) {
  .wv-synopsis {
    padding: 25px 21px;
    border-radius: 16px;
  }
}


/* Version 24 — First Vow page, Section 2 polish: Meet the Characters */
.wv-characters {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(177,138,80,.08);
  border-bottom: 1px solid rgba(177,138,80,.16);
  background:
    linear-gradient(
      180deg,
      rgba(18,16,18,.64) 0%,
      rgba(17,15,17,.80) 15%,
      rgba(15,13,15,.92) 48%,
      rgba(12,11,12,.98) 100%
    ),
    url("../images/featured-world-first-vow.webp") center 58% / cover no-repeat;
}

.wv-characters::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(177,138,80,.09), transparent 22%),
    radial-gradient(circle at 78% 14%, rgba(244,239,230,.03), transparent 18%),
    linear-gradient(90deg, rgba(7,6,7,.26), transparent 28%, transparent 72%, rgba(7,6,7,.22));
}

.wv-characters .wrap {
  position: relative;
  z-index: 1;
}

.wv-characters .section-title {
  margin-bottom: clamp(28px, 4vw, 42px);
}

.wv-character-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}

.wv-character-card {
  display: grid;
  grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(177,138,80,.30);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(19,17,19,.84), rgba(11,10,11,.94));
  box-shadow:
    0 24px 58px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.012);
  backdrop-filter: blur(2px);
}

.nightstalker-card .wv-character-art {
  order: 2;
  border-right: 0;
  border-left: 1px solid rgba(177,138,80,.18);
}

.wv-character-art {
  position: relative;
  min-height: 420px;
  height: 100%;
  background: none;
  border-right: 1px solid rgba(177,138,80,.18);
}

.wv-character-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-art-mark,
.wv-art-label {
  display: none !important;
}

.athleen-art::after,
.nightstalker-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.athleen-art::after {
  background:
    linear-gradient(180deg, rgba(10,9,10,.10) 0%, rgba(10,9,10,.18) 42%, rgba(10,9,10,.46) 100%),
    radial-gradient(circle at 12% 78%, rgba(198,148,83,.22), transparent 26%),
    linear-gradient(90deg, rgba(8,7,8,.04), rgba(8,7,8,.22));
}

.nightstalker-art::after {
  background:
    linear-gradient(180deg, rgba(9,8,9,.10) 0%, rgba(9,8,9,.18) 40%, rgba(9,8,9,.42) 100%),
    radial-gradient(circle at 82% 16%, rgba(224,186,120,.10), transparent 20%),
    linear-gradient(90deg, rgba(7,6,7,.26), rgba(7,6,7,.04));
}

.wv-character-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3.8vw, 42px);
  background:
    linear-gradient(180deg, rgba(15,13,15,.22), rgba(10,9,10,.36));
}

.wv-character-copy .mini {
  margin-bottom: 12px;
  font-size: .84rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #d9b674;
}

.wv-character-copy h3 {
  margin: 0 0 18px;
  line-height: 1.14;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  color: #f2e8da;
}

.wv-character-copy p {
  color: #ded4ca;
  line-height: 1.76;
}

.wv-character-copy p + p {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .wv-character-card {
    grid-template-columns: 1fr;
  }

  .wv-character-art,
  .nightstalker-card .wv-character-art {
    order: 0;
    min-height: 340px;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(177,138,80,.18);
  }
}


/* =========================================================
   Version 25 — Where the Vow Still Burns continuous world backdrop
   One shared moonlit scene from hero through Black Book.
   ========================================================= */

.wv-world-shell {
  position: relative;
  overflow: hidden;
  background-color: #0d0c0d;
  background-image:
    linear-gradient(180deg, rgba(7,7,8,.16) 0%, rgba(7,7,8,.30) 24%, rgba(7,7,8,.42) 52%, rgba(7,7,8,.58) 100%),
    url("../images/first-vow-page-backdrop.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.wv-world-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,7,8,.08) 0%, rgba(7,7,8,.18) 18%, rgba(10,9,10,.24) 35%, rgba(10,9,10,.38) 62%, rgba(10,9,10,.56) 100%),
    linear-gradient(90deg, rgba(8,7,8,.22) 0%, rgba(8,7,8,.04) 24%, rgba(8,7,8,.04) 76%, rgba(8,7,8,.20) 100%);
}

.wv-world-shell > section {
  position: relative;
  z-index: 1;
}

.wv-hero {
  background: linear-gradient(90deg, rgba(18,16,18,.96) 0%, rgba(18,16,18,.88) 34%, rgba(18,16,18,.48) 63%, rgba(18,16,18,.18) 100%) !important;
}

.wv-hero::after {
  background: linear-gradient(180deg, rgba(16,14,15,0) 0%, rgba(16,14,15,.18) 38%, rgba(16,14,15,.56) 72%, rgba(16,14,15,.84) 100%) !important;
}

.wv-about-book,
.wv-characters,
.wv-world,
.wv-inside,
.wv-black-book {
  background: transparent !important;
}

.wv-about-book,
.wv-characters,
.wv-world,
.wv-inside {
  border-bottom: 1px solid rgba(177,138,80,.12);
}

.wv-about-book::before,
.wv-characters::before,
.wv-world::before,
.wv-inside::before,
.wv-black-book::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wv-about-book::before {
  background:
    linear-gradient(180deg, rgba(15,13,15,.52) 0%, rgba(15,13,15,.58) 52%, rgba(15,13,15,.64) 100%),
    radial-gradient(circle at 18% 14%, rgba(177,138,80,.08), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(244,239,230,.025), transparent 22%);
}

.wv-characters::before {
  background:
    linear-gradient(180deg, rgba(13,11,13,.44) 0%, rgba(13,11,13,.54) 100%),
    radial-gradient(circle at 18% 16%, rgba(177,138,80,.09), transparent 22%),
    radial-gradient(circle at 78% 14%, rgba(244,239,230,.03), transparent 18%);
}

.wv-world::before {
  background:
    linear-gradient(180deg, rgba(13,11,13,.52) 0%, rgba(13,11,13,.62) 100%),
    radial-gradient(circle at 50% 0%, rgba(177,138,80,.08), transparent 32%);
}

.wv-inside::before {
  background:
    linear-gradient(180deg, rgba(12,11,12,.62) 0%, rgba(12,11,12,.72) 100%),
    radial-gradient(circle at 14% 8%, rgba(177,138,80,.07), transparent 32%);
}

.wv-black-book::before {
  background:
    linear-gradient(180deg, rgba(11,10,11,.72) 0%, rgba(9,8,9,.82) 100%),
    radial-gradient(circle at 50% 28%, rgba(177,138,80,.08), transparent 26%),
    radial-gradient(circle at 12% 70%, rgba(177,138,80,.04), transparent 20%);
}

.wv-about-book .wrap,
.wv-characters .wrap,
.wv-world .wrap,
.wv-inside .wrap,
.wv-black-book .wrap {
  position: relative;
  z-index: 1;
}

.wv-about-book .section-title h2,
.wv-about-book .section-title .eyebrow,
.wv-world .section-title h2,
.wv-world .section-title .eyebrow,
.wv-inside .section-title h2,
.wv-inside .section-title .eyebrow,
.wv-black-book .section-title h2,
.wv-black-book .section-title .eyebrow,
.wv-characters .section-title h2,
.wv-characters .section-title .eyebrow {
  color: #f2e8da;
}

.wv-about-book .section-title .eyebrow,
.wv-world .section-title .eyebrow,
.wv-inside .section-title .eyebrow,
.wv-black-book .section-title .eyebrow,
.wv-characters .section-title .eyebrow {
  color: #d2ad71;
}

.wv-world .section-intro,
.wv-feature-grid p,
.wv-world-card p {
  color: #d8cec4;
}

.wv-world-card,
.wv-feature-grid article {
  background: linear-gradient(180deg, rgba(25,22,25,.80) 0%, rgba(18,16,18,.92) 100%) !important;
  backdrop-filter: blur(2px);
}

.wv-world-card h3,
.wv-feature-grid h3 {
  color: #ecdcc5;
}

.wv-black-book {
  padding-bottom: 92px;
}

@media (max-width: 1100px) {
  .wv-world-shell {
    background-size: cover;
  }
}

@media (max-width: 700px) {
  .wv-world-shell {
    background-position: 60% top;
    background-size: cover;
  }

  .wv-hero {
    background: linear-gradient(180deg, rgba(18,16,18,.74) 0%, rgba(18,16,18,.56) 40%, rgba(18,16,18,.76) 86%, rgba(18,16,18,.88) 100%) !important;
  }
}


/* =========================================================
   Version 26 — Landmark styling for Inside the World cards
   ========================================================= */
.wv-world-grid {
  gap: 22px;
}

.wv-world .wv-world-card {
  position: relative;
  overflow: hidden;
  min-height: 285px;
  padding: 30px 24px 28px;
  border-radius: 22px;
  border: 1px solid rgba(177,138,80,.32) !important;
  background: linear-gradient(180deg, rgba(23,21,24,.80) 0%, rgba(15,14,16,.92) 100%) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.01),
    inset 0 22px 40px rgba(255,255,255,.015) !important;
  backdrop-filter: blur(2px);
}

.wv-world .wv-world-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .95;
}

.wv-world .wv-world-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.24), transparent);
}

.wv-world .wv-world-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #eddcc5 !important;
}

.wv-world .wv-world-card p {
  position: relative;
  z-index: 1;
  color: #d9cec2 !important;
  line-height: 1.66;
}

.wv-world .wv-world-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 50%;
  border: 1px solid rgba(177,138,80,.44) !important;
  background: rgba(177,138,80,.05) !important;
  color: #d2ad71 !important;
  box-shadow: inset 0 0 18px rgba(177,138,80,.04);
}

/* The First Vow — sacred warmth */
.wv-world .vow-landmark-card::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(193,150,87,.18), transparent 24%),
    radial-gradient(circle at 76% 22%, rgba(193,150,87,.06), transparent 22%),
    linear-gradient(180deg, rgba(193,150,87,.05), transparent 38%),
    linear-gradient(135deg, transparent 0 82%, rgba(193,150,87,.10) 100%);
}

/* Forgotten Roads — subtle path motif */
.wv-world .roads-landmark-card::before {
  background:
    radial-gradient(circle at 16% 16%, rgba(177,138,80,.10), transparent 22%),
    linear-gradient(180deg, rgba(177,138,80,.04), transparent 34%),
    linear-gradient(140deg, transparent 43%, rgba(177,138,80,.10) 44%, rgba(177,138,80,.04) 46%, transparent 48%),
    linear-gradient(160deg, transparent 56%, rgba(177,138,80,.08) 57%, rgba(177,138,80,.03) 59%, transparent 61%);
}

/* Ruined Sanctuaries — stone / arch feeling */
.wv-world .sanctuary-landmark-card::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(177,138,80,.10), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%),
    radial-gradient(circle at 78% 78%, rgba(177,138,80,.06), transparent 22%);
}

.wv-world .sanctuary-landmark-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(186,165,136,.08);
  border-radius: 18px 18px 22px 22px;
  clip-path: polygon(0% 100%, 0% 36%, 19% 36%, 19% 24%, 50% 5%, 81% 24%, 81% 36%, 100% 36%, 100% 100%);
  pointer-events: none;
}

/* Dominion — colder, sharper, silver-blue */
.wv-world .dominion-landmark-card {
  border-color: rgba(139,161,190,.34) !important;
  background: linear-gradient(180deg, rgba(24,28,33,.82) 0%, rgba(17,20,24,.94) 100%) !important;
}

.wv-world .dominion-landmark-card::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(167,189,214,.14), transparent 22%),
    radial-gradient(circle at 80% 18%, rgba(167,189,214,.05), transparent 22%),
    linear-gradient(180deg, rgba(167,189,214,.06), transparent 40%),
    linear-gradient(145deg, transparent 0 80%, rgba(167,189,214,.08) 100%);
}

.wv-world .dominion-landmark-card::after {
  background: linear-gradient(90deg, transparent, rgba(164,185,210,.26), transparent);
}

.wv-world .dominion-landmark-card h3 {
  color: #dbe4ee !important;
}

.wv-world .dominion-landmark-card p {
  color: #ced7e1 !important;
}

.wv-world .dominion-landmark-card .wv-world-icon {
  color: #aec0d4 !important;
  border-color: rgba(149,171,201,.40) !important;
  background: rgba(130,151,179,.05) !important;
}

@media (max-width: 900px) {
  .wv-world .wv-world-card {
    min-height: 255px;
  }
}

@media (max-width: 620px) {
  .wv-world-grid {
    gap: 18px;
  }

  .wv-world .wv-world-card {
    min-height: auto;
  }
}


/* =========================================================
   Version 27 — Landmark card artwork
   ========================================================= */
.wv-world .wv-world-card {
  display: flex;
  flex-direction: column;
}

.wv-world .wv-world-thumb {
  position: relative;
  z-index: 1;
  margin: -14px -8px 18px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(177,138,80,.26);
  box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.02);
  aspect-ratio: 16 / 10;
  background: #090909;
}

.wv-world .wv-world-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.14) 46%, rgba(8,8,10,.38) 100%);
  pointer-events: none;
}

.wv-world .wv-world-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.wv-world .wv-world-icon {
  margin-top: 0;
}

.wv-world .dominion-landmark-card .wv-world-thumb {
  border-color: rgba(149,171,201,.30);
}

@media (max-width: 620px) {
  .wv-world .wv-world-thumb {
    margin: -10px -4px 16px;
  }
}


/* =========================================================
   Where the Vow Still Burns – feature card artwork update (v28)
   ========================================================= */
.wv-feature-grid {
  gap: 22px;
}

.wv-feature-grid .wv-feature-card {
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(177,138,80,.08), transparent 32%),
    linear-gradient(180deg, #262123 0%, #1b1719 100%);
  border: 1px solid rgba(177,138,80,.26);
  box-shadow:
    0 18px 32px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.01);
}

.wv-feature-grid .wv-feature-card::after,
.wv-feature-grid .wv-feature-card > span {
  display: none;
}

.wv-feature-thumb {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-bottom: 1px solid rgba(177,138,80,.18);
  background: #090909;
}

.wv-feature-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.10) 50%, rgba(8,8,10,.38) 100%);
  pointer-events: none;
}

.wv-feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-feature-copy {
  padding: 18px 18px 20px;
}

.wv-feature-grid .wv-feature-card h3 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  color: #ead8bf;
}

.wv-feature-grid .wv-feature-card p {
  margin: 0;
  color: #d8cdc1;
  line-height: 1.65;
}

.mercy-card .wv-feature-thumb {
  border-bottom-color: rgba(163, 190, 222, .28);
}

@media (max-width: 620px) {
  .wv-feature-grid {
    gap: 18px;
  }

  .wv-feature-copy {
    padding: 16px;
  }
}


/* =========================================================
   Where the Vow Still Burns – Black Book illustration update (v29)
   ========================================================= */
.black-book-illustration {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid rgba(177,138,80,.22);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12,13,18,.96), rgba(9,10,14,.98));
  box-shadow: 0 26px 46px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.02);
}

.black-book-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .black-book-illustration {
    border-radius: 18px;
  }
}


/* =========================================================
   Version 31 — About page hero
   ========================================================= */
.about-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 8vw, 108px) 0;
  background:
    linear-gradient(90deg, rgba(248,243,234,.94) 0%, rgba(248,243,234,.88) 34%, rgba(241,234,223,.76) 62%, rgba(33,29,32,.22) 100%),
    radial-gradient(circle at 12% 26%, rgba(79,140,138,.10), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(177,138,80,.14), transparent 28%),
    url("../images/about-hero-study.png") center center / cover no-repeat;
}

.about-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .92;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(10,14,20,.08) 100%),
    radial-gradient(circle at 8% 80%, transparent 0 120px, rgba(79,140,138,.07) 121px 122px, transparent 123px),
    radial-gradient(circle at 92% 18%, transparent 0 150px, rgba(177,138,80,.10) 151px 152px, transparent 153px);
}

.about-page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(48px, 7vw, 92px);
}

.about-page-photo-wrap {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto;
}

.about-page-photo {
  position: relative;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  border-radius: 48% 48% 24px 24px;
  border: 1px solid rgba(177,138,80,.62);
  background: var(--paper);
  box-shadow:
    0 0 0 9px rgba(244,239,230,.88),
    0 0 0 10px rgba(177,138,80,.20),
    0 28px 62px rgba(33,29,32,.16);
}

.about-page-photo img {
  display: block;
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center 26%;
}

.about-page-orbit {
  position: absolute;
  z-index: 0;
  display: block;
  border: 1px solid rgba(79,140,138,.18);
  border-radius: 50%;
}

.about-page-orbit-one {
  width: 260px;
  height: 260px;
  left: -88px;
  top: -42px;
}

.about-page-orbit-two {
  width: 190px;
  height: 190px;
  right: -62px;
  bottom: 38px;
  border-color: rgba(177,138,80,.18);
}

.about-page-star {
  position: absolute;
  z-index: 3;
  line-height: 1;
  text-shadow: 0 0 20px rgba(177,138,80,.20);
}

.about-page-star-one {
  top: 28px;
  left: -14px;
  color: var(--gold);
  font-size: 1.25rem;
}

.about-page-star-two {
  right: -12px;
  bottom: 76px;
  color: var(--teal);
  font-size: 1rem;
}

.about-page-hero-copy {
  max-width: 650px;
}

.about-page-hero-copy .eyebrow {
  margin-bottom: 14px;
}

.about-page-hero-copy h1 {
  max-width: 620px;
  margin-bottom: 24px;
  font-size: clamp(2.7rem, 5.4vw, 5rem);
  letter-spacing: .015em;
}

.about-page-intro {
  max-width: 590px;
  margin: 0;
  color: #4d4548;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.72;
}

.about-page-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 170px;
  margin: 28px 0 22px;
}

.about-page-divider span {
  flex: 1;
  height: 1px;
  background: rgba(177,138,80,.55);
}

.about-page-divider b {
  color: var(--teal);
  font-size: .8rem;
  font-weight: 400;
}

.about-page-brandline {
  margin: 0;
  color: var(--twilight);
  font-style: italic;
  font-size: 1.06rem;
}

@media (max-width: 820px) {
  .about-page-hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .about-page-photo-wrap {
    width: min(82%, 390px);
  }

  .about-page-photo img {
    height: 480px;
  }

  .about-page-hero-copy {
    margin: 0 auto;
    text-align: center;
  }

  .about-page-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .about-page-divider {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 560px) {
  .about-page-photo-wrap {
    width: min(90%, 340px);
  }

  .about-page-photo img {
    height: 430px;
  }
}


/* =========================================================
   Version 33 — About: Where It Started
   ========================================================= */
.about-origin-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(248,243,234,.96) 0%,
      rgba(248,243,234,.90) 24%,
      rgba(248,243,234,.74) 48%,
      rgba(248,243,234,.82) 72%,
      rgba(248,243,234,.92) 100%),
    url("../images/about-story-parchment.png") left center / cover no-repeat;
}

.about-origin-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .95;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(33,29,32,.05) 100%),
    radial-gradient(circle at 18% 76%, rgba(79,140,138,.06), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(177,138,80,.08), transparent 24%);
}

.about-origin-wrap {
  position: relative;
  z-index: 1;
}

.about-origin-copy {
  max-width: 820px;
  margin-left: auto;
}

.about-origin-copy h2 {
  max-width: 700px;
  margin: 8px 0 20px;
  font-size: clamp(2.15rem,4.1vw,3.65rem);
}

.about-origin-copy p {
  max-width: 760px;
  margin: 0 0 18px;
  color: #4d4548;
  font-size: 1.04rem;
  line-height: 1.8;
}

.about-origin-copy p:last-child {
  margin-bottom: 0;
}

.about-origin-divider {
  width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 28px;
}

.about-origin-divider span {
  flex: 1;
  height: 1px;
  background: rgba(177,138,80,.52);
}

.about-origin-divider b {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 400;
}

.about-first-story-vignette {
  display: none;
}

.about-next-placeholder {
  padding-top: 52px;
}

@media (max-width: 880px) {
  .about-origin-section {
    background-position: 34% center;
  }

  .about-origin-copy {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .about-origin-copy p,
  .about-origin-copy h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .about-origin-divider {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   Version 35 — About: Outside the Story
   ========================================================= */
.about-outside-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 14%, rgba(79,140,138,.11), transparent 26%),
    radial-gradient(circle at 8% 86%, rgba(177,138,80,.10), transparent 28%),
    linear-gradient(180deg, #eef2ea 0%, #f6f1e7 100%);
  border-top: 1px solid rgba(177,138,80,.18);
}

.about-outside-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background:
    radial-gradient(circle at 2% 24%, transparent 0 115px, rgba(79,140,138,.08) 116px 117px, transparent 118px),
    radial-gradient(circle at 98% 76%, transparent 0 135px, rgba(177,138,80,.08) 136px 137px, transparent 138px);
}

.about-outside-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr);
  gap: clamp(48px,7vw,88px);
  align-items: center;
}

.about-outside-copy {
  max-width: 690px;
}

.about-outside-copy h2 {
  max-width: 650px;
  margin: 8px 0 20px;
  font-size: clamp(2.05rem,3.7vw,3.35rem);
}

.about-outside-copy p {
  margin: 0 0 18px;
  color: #4d4548;
  font-size: 1.04rem;
  line-height: 1.8;
}

.about-outside-copy p:last-child { margin-bottom: 0; }

.about-outside-copy strong {
  color: var(--twilight);
  font-weight: 700;
}

.about-outside-divider {
  width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 28px;
}

.about-outside-divider span {
  flex: 1;
  height: 1px;
  background: rgba(177,138,80,.52);
}

.about-outside-divider b {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 400;
}

.about-outside-vignette {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(177,138,80,.30);
  border-radius: 34px 34px 18px 18px;
  background: rgba(248,244,235,.72);
  box-shadow: 0 24px 55px rgba(33,29,32,.11);
}

.about-outside-vignette::before,
.about-outside-vignette::after {
  content: "✦";
  position: absolute;
  z-index: 2;
  line-height: 1;
}

.about-outside-vignette::before {
  top: -10px;
  right: 30px;
  color: var(--gold);
  font-size: 1.15rem;
}

.about-outside-vignette::after {
  left: -9px;
  bottom: 58px;
  color: var(--teal);
  font-size: .95rem;
}

.about-outside-vignette figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px 24px 12px 12px;
  background: var(--paper);
}

.about-outside-vignette img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  object-position: center;
}

.about-outside-vignette > p {
  width: min(100%, 430px);
  margin: 16px auto 4px;
  text-align: center;
  color: var(--twilight);
  font-size: .95rem;
  line-height: 1.55;
  font-style: italic;
}

@media (max-width: 900px) {
  .about-outside-grid {
    grid-template-columns: 1fr;
  }

  .about-outside-copy {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .about-outside-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .about-outside-vignette {
    width: min(100%, 560px);
  }
}

@media (max-width: 560px) {
  .about-outside-vignette {
    padding: 12px;
    border-radius: 24px 24px 14px 14px;
  }

  .about-outside-vignette figure {
    border-radius: 17px 17px 9px 9px;
  }
}


/* =========================================================
   Version 36 — Outside the Story background
   ========================================================= */
.outside-story-section {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 110px) 0;
  border-top: 1px solid rgba(177,138,80,.18);
  background:
    linear-gradient(90deg,
      rgba(244,239,230,.94) 0%,
      rgba(244,239,230,.88) 28%,
      rgba(244,239,230,.72) 52%,
      rgba(244,239,230,.82) 76%,
      rgba(244,239,230,.92) 100%),
    url("../images/about-story-parchment.png") right center / cover no-repeat;
}

.outside-story-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(33,29,32,.05)),
    radial-gradient(circle at 14% 20%, rgba(79,140,138,.06), transparent 22%),
    radial-gradient(circle at 90% 78%, rgba(177,138,80,.08), transparent 26%);
}

.outside-story-wrap {
  position: relative;
  z-index: 1;
}

.outside-story-copy {
  max-width: 820px;
  margin-right: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.outside-story-copy .eyebrow {
  margin-bottom: 12px;
}

.outside-story-copy h2 {
  margin-bottom: 26px;
  max-width: 780px;
}

.outside-story-copy p {
  max-width: 760px;
  color: #40383c;
  line-height: 1.78;
}

.outside-story-copy p + p {
  margin-top: 18px;
}

@media (max-width: 700px) {
  .outside-story-section {
    background-position: 68% center;
  }

  .outside-story-copy {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .outside-story-copy p,
  .outside-story-copy h2 {
    margin-left: auto;
    margin-right: auto;
  }
}


/* Version 40 — Behind the Books hero artwork */
.btb-hero {
  position: relative;
  padding: 132px 0 118px;
  color: #f7f0df;
  background:
    linear-gradient(180deg, rgba(15, 19, 28, 0.36) 0%, rgba(15, 19, 28, 0.52) 44%, rgba(15, 19, 28, 0.74) 100%),
    url("../images/behind-books-hero-study.png") center center / cover no-repeat;
}
.btb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(250, 226, 180, 0.14), transparent 28%),
    radial-gradient(circle at 82% 26%, rgba(79, 140, 138, 0.14), transparent 27%),
    linear-gradient(180deg, rgba(7, 8, 12, 0.10) 0%, rgba(7, 8, 12, 0.28) 100%);
  pointer-events: none;
}
.btb-hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.btb-hero .eyebrow {
  color: #d6b472;
}
.btb-hero h1 {
  color: #f6efde;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.btb-hero .lede {
  color: rgba(246, 239, 222, 0.92);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}
@media (max-width: 760px) {
  .btb-hero {
    padding: 96px 0 82px;
    background-position: center center;
  }
}

/* =========================================================
   Version 41 — Behind the Books full approved content
   ========================================================= */
.btb-hero-copy {
  max-width: 930px !important;
  margin: 0 auto;
}

.btb-hero h1 {
  margin-bottom: 8px;
}

.btb-hero-subtitle {
  margin: 0 auto;
  color: #e6c88e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-style: italic;
}

.btb-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 190px;
  margin: 20px auto 24px;
}

.btb-hero-divider span {
  flex: 1;
  height: 1px;
  background: rgba(214,180,114,.72);
}

.btb-hero-divider b {
  color: #d6b472;
  font-size: .78rem;
  font-weight: 400;
}

.btb-hero .lede {
  max-width: 820px;
  line-height: 1.75;
}

.btb-section-heading {
  width: min(100%, 820px);
  margin-left: auto;
  margin-right: auto;
}

.btb-section-heading > p {
  max-width: 720px;
  margin: 14px auto 0;
  color: #5b5356;
  line-height: 1.7;
}

.btb-desk-section {
  background:
    radial-gradient(circle at 12% 16%, rgba(79,140,138,.07), transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(177,138,80,.08), transparent 26%),
    #f5efe5;
}

.btb-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 56px);
  width: min(100%, 800px);
  margin: 0 auto;
}

.btb-project-card {
  position: relative;
  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid rgba(177,138,80,.34);
  border-radius: 20px;
  background: rgba(255,252,246,.72);
  box-shadow: 0 18px 42px rgba(33,29,32,.08);
}

.btb-project-cover {
  display: block;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: 0 14px 28px rgba(33,29,32,.18);
  transition: transform .2s ease;
}

.btb-project-cover:hover {
  transform: translateY(-3px);
}

.btb-project-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.btb-project-copy h3 {
  margin: 14px 0 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.2;
}

.btb-status {
  display: inline-flex;
  border: 1px solid rgba(79,140,138,.42);
  border-radius: 999px;
  padding: 6px 10px;
  color: #356967;
  background: rgba(79,140,138,.09);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .66rem;
  font-weight: 700;
}

.btb-origins-section {
  background:
    radial-gradient(circle at 8% 20%, rgba(177,138,80,.07), transparent 22%),
    radial-gradient(circle at 93% 80%, rgba(79,140,138,.07), transparent 25%),
    #eee6d9;
}

.btb-origin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.5vw, 50px);
  align-items: start;
}

.btb-paper-story,
.btb-change-card {
  position: relative;
  padding: clamp(30px, 4.2vw, 48px);
  border: 1px solid rgba(177,138,80,.34);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,253,247,.88), rgba(247,239,225,.86));
  box-shadow: 0 18px 44px rgba(33,29,32,.08);
}

.btb-paper-story::before,
.btb-change-card::before {
  content: "✦";
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(177,138,80,.65);
  font-size: .8rem;
}

.btb-paper-story h3,
.btb-change-card h3 {
  margin: 8px 0 22px;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.btb-paper-story p,
.btb-change-card p {
  color: #4d4548;
  line-height: 1.76;
}

.btb-paper-story p + p,
.btb-change-card p + p {
  margin-top: 16px;
}

.btb-opening-line {
  color: var(--twilight) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-style: italic;
}

.btb-changed-section {
  background:
    radial-gradient(circle at 14% 78%, rgba(79,140,138,.065), transparent 27%),
    radial-gradient(circle at 86% 22%, rgba(177,138,80,.07), transparent 24%),
    #f7f1e7;
}

.btb-change-card {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 58px);
}

.btb-change-closing {
  margin-top: 24px !important;
  padding-top: 22px;
  border-top: 1px solid rgba(177,138,80,.30);
  color: var(--twilight) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-style: italic;
}

.btb-letters-section {
  border-top: 1px solid rgba(177,138,80,.18);
}

@media (max-width: 900px) {
  .btb-origin-grid,
  .btb-project-grid {
    grid-template-columns: 1fr;
  }

  .btb-project-grid {
    width: min(100%, 560px);
  }
}

@media (max-width: 560px) {
  .btb-project-card {
    grid-template-columns: 105px 1fr;
    gap: 18px;
    padding: 18px;
  }

  .btb-paper-story,
  .btb-change-card {
    border-radius: 12px;
  }
}


/* =========================================================
   Version 42 — From My Writing Desk card redesign
   ========================================================= */
.btb-desk-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(78px, 8vw, 108px);
  padding-bottom: clamp(88px, 9vw, 120px);
  background:
    radial-gradient(circle at 9% 18%, rgba(79,140,138,.10), transparent 25%),
    radial-gradient(circle at 91% 78%, rgba(177,138,80,.12), transparent 27%),
    linear-gradient(180deg, #f6f0e5 0%, #eee3d3 100%);
}

.btb-desk-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(177,138,80,.08) 14.1% 14.2%, transparent 14.3% 85%, rgba(79,140,138,.06) 85.1% 85.2%, transparent 85.3%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.55), transparent 45%);
}

.btb-desk-section .wrap {
  position: relative;
  z-index: 1;
}

.btb-project-grid {
  width: min(100%, 980px);
  gap: clamp(34px, 5vw, 64px);
  align-items: stretch;
}

.btb-project-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 168px minmax(0,1fr);
  align-items: center;
  gap: clamp(22px, 3vw, 32px);
  min-height: 330px;
  padding: 34px 30px 30px 38px;
  border: 1px solid rgba(177,138,80,.44);
  border-radius: 8px 24px 10px 22px;
  background:
    linear-gradient(rgba(177,138,80,.045) 1px, transparent 1px) 0 38px / 100% 34px,
    linear-gradient(145deg, #fbf3e4 0%, #f5ead8 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.72) inset,
    0 22px 50px rgba(33,29,32,.13);
  transform: rotate(-.35deg);
}

.btb-project-card:nth-child(even) {
  transform: rotate(.35deg);
}

/* layered paper underneath */
.btb-project-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 10px -9px -10px 10px;
  border: 1px solid rgba(177,138,80,.23);
  border-radius: 12px 20px 9px 18px;
  background: #eadfcd;
  transform: rotate(1.1deg);
  box-shadow: 0 10px 26px rgba(33,29,32,.07);
}

/* translucent taped corner */
.btb-project-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  width: 78px;
  height: 25px;
  left: 48%;
  top: -11px;
  border: 1px solid rgba(177,138,80,.18);
  background: rgba(225,207,171,.55);
  box-shadow: 0 2px 7px rgba(33,29,32,.06);
  transform: rotate(-4deg);
}

.btb-project-card:nth-child(even)::after {
  left: 44%;
  transform: rotate(4deg);
}

.btb-project-cover {
  position: relative;
  z-index: 2;
  margin-left: -12px;
  overflow: visible;
  border-radius: 4px;
  box-shadow: none;
  transform: rotate(-2.2deg);
}

.btb-project-card:nth-child(even) .btb-project-cover {
  transform: rotate(2.2deg);
}

.btb-project-cover::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border: 1px solid rgba(177,138,80,.48);
  background: rgba(251,246,235,.78);
  box-shadow: 0 16px 32px rgba(33,29,32,.17);
}

.btb-project-cover:hover {
  transform: translateY(-4px) rotate(-1deg);
}

.btb-project-card:nth-child(even) .btb-project-cover:hover {
  transform: translateY(-4px) rotate(1deg);
}

.btb-project-cover img {
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(33,29,32,.12);
}

.btb-project-copy {
  position: relative;
  z-index: 2;
  padding-right: 8px;
}

.btb-project-series {
  margin-top: 16px;
  color: #786b62;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .67rem;
  font-weight: 700;
}

.btb-project-copy h3 {
  margin: 9px 0 0;
  color: var(--ink);
  font-size: clamp(1.65rem, 2.7vw, 2.25rem);
  line-height: 1.16;
}

.btb-status {
  position: relative;
  border: 1px solid rgba(79,140,138,.38);
  border-radius: 2px;
  padding: 7px 12px 6px;
  color: #356967;
  background: rgba(219,235,229,.62);
  box-shadow: 0 3px 8px rgba(33,29,32,.05);
  transform: rotate(-1deg);
}

.btb-project-card:nth-child(even) .btb-status {
  transform: rotate(1deg);
}

.btb-card-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 145px;
  margin-top: 22px;
}

.btb-card-rule span {
  flex: 1;
  height: 1px;
  background: rgba(177,138,80,.46);
}

.btb-card-rule b {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 400;
}

/* small wax-seal-like mark */
.btb-project-copy::after {
  content: "✦";
  position: absolute;
  right: 2px;
  bottom: -32px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(177,138,80,.58);
  border-radius: 50%;
  color: #8f6d3e;
  background: rgba(177,138,80,.13);
  box-shadow: 0 3px 8px rgba(33,29,32,.08);
  font-size: .72rem;
}

@media (max-width: 820px) {
  .btb-project-grid {
    grid-template-columns: 1fr;
    width: min(100%, 650px);
  }

  .btb-project-card,
  .btb-project-card:nth-child(even) {
    transform: none;
  }
}

@media (max-width: 560px) {
  .btb-project-card {
    grid-template-columns: 116px minmax(0,1fr);
    gap: 20px;
    min-height: 255px;
    padding: 28px 20px 26px 28px;
  }

  .btb-project-cover {
    margin-left: -5px;
  }

  .btb-project-copy h3 {
    font-size: 1.45rem;
  }

  .btb-project-series {
    letter-spacing: .08em;
    font-size: .61rem;
  }

  .btb-project-copy::after {
    display: none;
  }
}

/* =========================================================
   Version 43 — From My Writing Desk background art update
   ========================================================= */
.btb-desk-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(78px, 8vw, 108px);
  padding-bottom: clamp(88px, 9vw, 120px);
  background:
    linear-gradient(180deg, rgba(248,241,230,.84) 0%, rgba(242,232,216,.82) 100%),
    url("../images/btb-writing-desk-bg.png") center center / cover no-repeat;
}

.btb-desk-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,250,241,.56), transparent 34%),
    radial-gradient(circle at 8% 18%, rgba(79,140,138,.08), transparent 23%),
    radial-gradient(circle at 92% 24%, rgba(177,138,80,.10), transparent 24%),
    linear-gradient(90deg, rgba(246,238,225,.16) 0%, transparent 22%, transparent 78%, rgba(241,232,217,.18) 100%);
}

.btb-desk-section .btb-section-heading,
.btb-desk-section .btb-project-grid {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Version 44 — Story Origins background + series personality cards
   ========================================================= */
.btb-origins-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(82px, 8vw, 112px);
  padding-bottom: clamp(92px, 9vw, 126px);
  background:
    linear-gradient(180deg, rgba(246,238,225,.76) 0%, rgba(239,227,208,.80) 100%),
    url("../images/btb-story-origins-bg.png") center center / cover no-repeat;
}

.btb-origins-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,250,240,.52), transparent 30%),
    linear-gradient(90deg, rgba(244,235,220,.14), transparent 25%, transparent 75%, rgba(244,235,220,.15));
}

.btb-origins-section .wrap {
  position: relative;
  z-index: 1;
}

.btb-origins-section .btb-section-heading {
  width: min(100%, 820px);
  margin-left: auto;
  margin-right: auto;
  padding: 24px 30px 26px;
  border-radius: 22px;
  background: rgba(248,241,228,.62);
  box-shadow: 0 12px 34px rgba(33,29,32,.07);
  backdrop-filter: blur(1px);
}

.btb-origin-grid {
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: auto;
  gap: clamp(30px, 4vw, 52px);
  align-items: stretch;
}

.btb-paper-story {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: clamp(34px, 4vw, 52px);
  border-radius: 14px 22px 14px 20px;
  box-shadow: 0 24px 54px rgba(33,29,32,.16);
}

/* First Vow: dark, sacred, antique gold */
.btb-first-vow-origin {
  border: 1px solid rgba(177,138,80,.52);
  color: #f1e6d0;
  background:
    radial-gradient(circle at 50% 0%, rgba(177,138,80,.15), transparent 34%),
    linear-gradient(180deg, rgba(34,31,34,.97), rgba(24,23,27,.985));
}

.btb-first-vow-origin::before {
  content: "✦";
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(203,165,97,.70);
  font-size: 1rem;
}

.btb-first-vow-origin::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(177,138,80,.24);
  border-radius: 10px 17px 10px 15px;
}

.btb-first-vow-origin .eyebrow {
  color: #d5b477;
}

.btb-first-vow-origin h3 {
  color: #e8c98b;
}

.btb-first-vow-origin p {
  color: rgba(244,236,222,.88);
}

.btb-first-vow-origin .btb-opening-line {
  color: #f0d9a8 !important;
}

/* Tales Beyond the Roll: parchment, teal, adventurous */
.btb-tbtr-origin {
  border: 1px solid rgba(79,140,138,.42);
  color: #3f3a38;
  background:
    radial-gradient(circle at 86% 14%, rgba(79,140,138,.10), transparent 28%),
    radial-gradient(circle at 12% 84%, rgba(177,138,80,.09), transparent 26%),
    linear-gradient(145deg, rgba(249,240,219,.97), rgba(238,224,194,.97));
}

.btb-tbtr-origin::before {
  content: "✦";
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(79,140,138,.72);
  font-size: 1rem;
}

.btb-tbtr-origin::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(79,140,138,.20);
  border-radius: 10px 17px 10px 15px;
}

.btb-tbtr-origin .eyebrow {
  color: #497f7d;
}

.btb-tbtr-origin h3 {
  color: #356d6b;
}

.btb-tbtr-origin p {
  color: #4b4542;
}

.btb-tbtr-origin .btb-opening-line {
  color: #356d6b !important;
}

.btb-paper-story h3,
.btb-paper-story p,
.btb-paper-story .eyebrow {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .btb-origins-section {
    background-position: center top;
  }

  .btb-origin-grid {
    width: min(100%, 700px);
  }
}

@media (max-width: 560px) {
  .btb-origins-section .btb-section-heading {
    padding: 20px 18px 22px;
    border-radius: 16px;
  }

  .btb-paper-story {
    padding: 32px 26px;
  }
}


/* =========================================================
   Version 45 — Behind the Books continuous page backdrop
   ========================================================= */
.btb-page-backdrop {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(245,236,221,.70) 0%, rgba(241,229,210,.68) 28%, rgba(236,221,199,.70) 58%, rgba(241,230,214,.72) 100%),
    url("../images/btb-page-backdrop.png") center top / cover no-repeat;
}

.btb-page-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,248,238,.52), transparent 28%),
    linear-gradient(90deg, rgba(245,238,226,.16) 0%, transparent 24%, transparent 76%, rgba(244,236,224,.18) 100%);
}

.btb-page-backdrop .btb-desk-section,
.btb-page-backdrop .btb-origins-section,
.btb-page-backdrop .btb-changed-section {
  position: relative;
  z-index: 1;
  background: transparent;
}

.btb-page-backdrop .btb-section-heading {
  padding: 26px 30px 28px;
  border-radius: 22px;
  background: rgba(249,242,231,.58);
  box-shadow: 0 16px 34px rgba(33,29,32,.06);
  backdrop-filter: blur(1px);
}

.btb-page-backdrop .btb-section-heading > p {
  color: #4f494b;
}

.btb-desk-section::before,
.btb-origins-section::before {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,250,241,.48), transparent 34%),
    linear-gradient(90deg, rgba(246,238,225,.10) 0%, transparent 20%, transparent 80%, rgba(241,232,217,.12) 100%);
}

.btb-changed-section {
  padding-top: clamp(82px, 8vw, 112px);
  padding-bottom: clamp(92px, 9vw, 122px);
}

.btb-change-card {
  border: 1px solid rgba(177,138,80,.45);
  border-radius: 14px 22px 14px 20px;
  background:
    radial-gradient(circle at 82% 18%, rgba(79,140,138,.08), transparent 22%),
    linear-gradient(145deg, rgba(251,244,232,.92), rgba(244,235,220,.90));
  box-shadow: 0 24px 54px rgba(33,29,32,.14);
}

@media (max-width: 560px) {
  .btb-page-backdrop .btb-section-heading {
    padding: 20px 18px 22px;
    border-radius: 16px;
  }
}

/* =========================================================
   Version 46 — Subtle Story Origins card artwork
   ========================================================= */
.btb-first-vow-origin {
  background:
    linear-gradient(180deg, rgba(27,26,30,.91) 0%, rgba(22,22,26,.94) 100%),
    url("../images/btb-origin-first-vow-subtle.png") center center / cover no-repeat;
}

.btb-first-vow-origin::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(177,138,80,.24);
  border-radius: 10px 17px 10px 15px;
  background:
    radial-gradient(circle at 18% 20%, rgba(177,138,80,.08), transparent 28%),
    linear-gradient(90deg, rgba(16,16,20,.08), transparent 46%, rgba(16,16,20,.10));
}

.btb-tbtr-origin {
  background:
    linear-gradient(145deg, rgba(249,240,219,.84), rgba(238,224,194,.88)),
    url("../images/btb-origin-tbtr-subtle.png") center center / cover no-repeat;
}

.btb-tbtr-origin::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(79,140,138,.20);
  border-radius: 10px 17px 10px 15px;
  background:
    radial-gradient(circle at 78% 22%, rgba(79,140,138,.055), transparent 28%),
    linear-gradient(90deg, rgba(250,242,225,.10), transparent 52%, rgba(250,242,225,.05));
}

.btb-first-vow-origin .eyebrow,
.btb-first-vow-origin h3,
.btb-first-vow-origin p,
.btb-tbtr-origin .eyebrow,
.btb-tbtr-origin h3,
.btb-tbtr-origin p {
  position: relative;
  z-index: 2;
}

/* =========================================================
   Version 48 — Reframe Story Origins artwork for card scale
   ========================================================= */
.btb-first-vow-origin {
  background:
    linear-gradient(90deg,
      rgba(22,22,26,.22) 0%,
      rgba(22,22,26,.18) 30%,
      rgba(22,22,26,.36) 58%,
      rgba(22,22,26,.76) 100%),
    linear-gradient(180deg,
      rgba(29,28,33,.18) 0%,
      rgba(18,18,22,.22) 100%),
    url("../images/btb-origin-first-vow-subtle.png") left -36px top -10px / 94% auto no-repeat,
    linear-gradient(180deg, rgba(27,26,30,.96) 0%, rgba(22,22,26,.98) 100%);
}

.btb-tbtr-origin {
  background:
    linear-gradient(90deg,
      rgba(249,241,224,.92) 0%,
      rgba(248,239,221,.86) 34%,
      rgba(246,235,213,.72) 60%,
      rgba(242,229,203,.90) 100%),
    linear-gradient(180deg,
      rgba(255,252,246,.12) 0%,
      rgba(244,233,208,.08) 100%),
    url("../images/btb-origin-tbtr-subtle.png") right -34px bottom -12px / 92% auto no-repeat,
    linear-gradient(145deg, rgba(249,240,219,.96), rgba(238,224,194,.96));
}

.btb-first-vow-origin::after,
.btb-tbtr-origin::after {
  background: transparent;
}


/* =========================================================
   Version 49 — Story Origins cards with dedicated portrait artwork
   ========================================================= */
.btb-origin-grid {
  align-items: stretch;
}

.btb-paper-story {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.btb-origin-illustration {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 4 / 3;
}

.btb-origin-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.btb-origin-copy {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 3.2vw, 42px);
}

.btb-first-vow-origin {
  border: 1px solid rgba(177,138,80,.52);
  color: #f1e6d0;
  background: linear-gradient(180deg, rgba(34,31,34,.985), rgba(23,22,27,.995));
}

.btb-first-vow-origin .btb-origin-illustration {
  border-bottom: 1px solid rgba(177,138,80,.26);
  background: #16171c;
}

.btb-first-vow-origin .btb-origin-illustration::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,10,16,.06) 0%, rgba(8,10,16,.12) 55%, rgba(19,18,23,.96) 100%),
    radial-gradient(circle at 50% 10%, rgba(212,167,88,.08), transparent 34%);
}

.btb-first-vow-origin::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(177,138,80,.24);
  border-radius: 10px 17px 10px 15px;
}

.btb-tbtr-origin {
  border: 1px solid rgba(79,140,138,.42);
  color: #3f3a38;
  background: linear-gradient(145deg, rgba(249,240,219,.985), rgba(238,224,194,.985));
}

.btb-tbtr-origin .btb-origin-illustration {
  border-bottom: 1px solid rgba(79,140,138,.22);
  background: #e9dcc4;
}

.btb-tbtr-origin .btb-origin-illustration::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,251,242,.06) 0%, rgba(255,249,240,.06) 52%, rgba(246,235,213,.96) 100%),
    radial-gradient(circle at 82% 10%, rgba(79,140,138,.08), transparent 30%);
}

.btb-tbtr-origin::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(79,140,138,.20);
  border-radius: 10px 17px 10px 15px;
}

.btb-first-vow-origin .eyebrow,
.btb-first-vow-origin h3,
.btb-first-vow-origin p,
.btb-tbtr-origin .eyebrow,
.btb-tbtr-origin h3,
.btb-tbtr-origin p {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .btb-origin-illustration {
    min-height: 280px;
  }
}

@media (max-width: 560px) {
  .btb-origin-illustration {
    min-height: 240px;
  }

  .btb-origin-copy {
    padding: 24px 22px 26px;
  }
}


/* Version 50 — Contact page hero artwork */
.contact-page-hero {
  position: relative;
  padding: 132px 0 118px;
  color: #f7f0df;
  background:
    linear-gradient(180deg, rgba(14, 16, 22, 0.38) 0%, rgba(14, 16, 22, 0.54) 44%, rgba(14, 16, 22, 0.72) 100%),
    url("../images/contact-hero-correspondence.png") center center / cover no-repeat;
}

.contact-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 26%, rgba(214,180,114,.14), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(79,140,138,.12), transparent 26%),
    linear-gradient(180deg, rgba(7, 8, 12, 0.08) 0%, rgba(7, 8, 12, 0.26) 100%);
  pointer-events: none;
}

.contact-page-hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.contact-page-hero .eyebrow {
  color: #d6b472;
}

.contact-page-hero h1 {
  color: #f6efde;
  text-shadow: 0 2px 14px rgba(0,0,0,.34);
}

.contact-page-hero .lede {
  color: rgba(246,239,222,.92);
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}

@media (max-width: 760px) {
  .contact-page-hero {
    padding: 96px 0 82px;
    background-position: center center;
  }
}


/* =========================================================
   Version 51 — Contact page content
   ========================================================= */
.contact-main-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(82px, 8vw, 112px);
  padding-bottom: clamp(88px, 9vw, 120px);
  background:
    radial-gradient(circle at 10% 18%, rgba(79,140,138,.08), transparent 24%),
    radial-gradient(circle at 90% 82%, rgba(177,138,80,.10), transparent 26%),
    linear-gradient(180deg, #f6f0e6 0%, #efe4d5 100%);
}

.contact-main-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.50), transparent 40%),
    linear-gradient(90deg, transparent 0 10%, rgba(177,138,80,.05) 10.1% 10.2%, transparent 10.3% 90%, rgba(79,140,138,.05) 90.1% 90.2%, transparent 90.3%);
}

.contact-main-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: start;
}

.contact-copy {
  max-width: 500px;
  padding-top: 18px;
}

.contact-copy h2 {
  margin: 8px 0 22px;
  font-size: clamp(2.15rem, 4vw, 3.45rem);
}

.contact-copy > p {
  color: #4d4548;
  font-size: 1.04rem;
  line-height: 1.82;
}

.contact-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 180px;
  margin: 28px 0 22px;
}

.contact-divider span {
  flex: 1;
  height: 1px;
  background: rgba(177,138,80,.54);
}

.contact-divider b {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 400;
}

.contact-email-note {
  margin: 0;
  color: var(--twilight) !important;
  font-style: italic;
  font-size: .95rem !important;
}

.contact-form {
  position: relative;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid rgba(177,138,80,.42);
  border-radius: 12px 24px 12px 22px;
  background:
    linear-gradient(rgba(177,138,80,.04) 1px, transparent 1px) 0 42px / 100% 36px,
    linear-gradient(145deg, rgba(253,248,238,.96), rgba(246,236,219,.96));
  box-shadow: 0 24px 58px rgba(33,29,32,.12);
}

.contact-form::before {
  content: "✦";
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(177,138,80,.68);
  font-size: .85rem;
}

.contact-form label {
  display: block;
  margin-bottom: 20px;
}

.contact-form label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--twilight);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .7rem;
  font-weight: 700;
}

.contact-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.contact-form input,
.contact-form textarea {
  border-color: rgba(177,138,80,.42);
  background: rgba(255,253,248,.88);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

.contact-form textarea {
  min-height: 190px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(79,140,138,.72);
  box-shadow: 0 0 0 3px rgba(79,140,138,.10);
}

.contact-submit {
  margin-top: 2px;
}

.contact-social-section {
  position: relative;
  padding-top: 70px;
  padding-bottom: 78px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 100%, rgba(79,140,138,.08), transparent 34%),
    #f8f3ea;
  border-top: 1px solid rgba(177,138,80,.20);
}

.contact-social-inner {
  max-width: 780px;
}

.contact-social-inner h2 {
  margin: 8px 0 30px;
  font-size: clamp(2rem, 3.6vw, 3rem);
}

.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}

.contact-social-links a {
  min-width: 128px;
  padding: 11px 18px;
  border: 1px solid rgba(177,138,80,.42);
  border-radius: 999px;
  color: var(--twilight);
  background: rgba(255,255,255,.46);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.contact-social-links a:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  background: rgba(79,140,138,.08);
}

@media (max-width: 860px) {
  .contact-main-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .contact-copy {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }

  .contact-divider {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 560px) {
  .contact-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form {
    padding: 28px 22px 30px;
    border-radius: 12px 18px 12px 16px;
  }

  .contact-social-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .contact-social-links a {
    min-width: 0;
  }
}


/* Version 53 — Live contact + newsletter forms */
.letters-mailerlite {
  width: 100%;
}

.letters-success {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(79,140,138,.32);
  border-radius: 14px;
  background: rgba(79,140,138,.08);
  text-align: left;
}

.letters-success h3 {
  margin: 0 0 6px;
  color: var(--teal);
  font-size: 1.18rem;
}

.letters-success p {
  margin: 0;
}


/* Version 54 — Contact completion pass */
.contact-page-hero .wrap {
  max-width: 860px;
}

.contact-form-status {
  min-height: 1.4em;
  margin: 14px 0 0;
  color: #7b4d4d;
  font-size: .9rem;
}

.contact-success {
  position: relative;
  align-self: center;
  width: 100%;
  padding: clamp(42px, 6vw, 68px) clamp(28px, 5vw, 54px);
  border: 1px solid rgba(177,138,80,.42);
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(79,140,138,.10), transparent 34%),
    linear-gradient(145deg, rgba(255,252,246,.90), rgba(244,235,220,.92));
  box-shadow: 0 18px 44px rgba(33,29,32,.10);
}

.contact-success[hidden] {
  display: none;
}

.contact-success-star {
  display: block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: 1.8rem;
}

.contact-success h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 400;
}


/* Version 55 — MailerLite functional wrapper repair */
.letters-mailerlite.ml-form-embedContainer,
.letters-mailerlite .ml-form-align-center,
.letters-mailerlite .ml-form-embedWrapper,
.letters-mailerlite .ml-form-embedBody,
.letters-mailerlite .ml-form-successBody,
.letters-mailerlite .ml-form-formContent,
.letters-mailerlite .ml-form-fieldRow,
.letters-mailerlite .ml-field-group,
.letters-mailerlite .ml-form-embedSubmit {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.letters-mailerlite .ml-form-embedWrapper {
  display: block !important;
}

.letters-mailerlite .ml-form-embedBody {
  display: block;
}

.letters-mailerlite .letters-form {
  display: flex;
  width: 100%;
  gap: 10px;
  margin: 0;
}

.letters-mailerlite .ml-form-formContent {
  flex: 1 1 auto;
  min-width: 0;
}

.letters-mailerlite .ml-form-embedSubmit {
  flex: 0 0 auto;
  width: auto;
}

.letters-mailerlite .ml-form-embedSubmit .btn {
  width: auto !important;
  white-space: nowrap;
  margin: 0;
}

.letters-mailerlite .letters-success {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(79,140,138,.32);
  border-radius: 14px;
  background: rgba(79,140,138,.08);
}

@media (max-width: 640px) {
  .letters-mailerlite .letters-form {
    flex-direction: column;
  }

  .letters-mailerlite .ml-form-embedSubmit,
  .letters-mailerlite .ml-form-embedSubmit .btn {
    width: 100% !important;
  }
}


/* =========================================================
   Version 57 — Tales Beyond the Roll hero resized to show full artwork
   ========================================================= */
.tbtr-series-hero {
  position: relative;
  min-height: clamp(380px, 34vw, 620px);
  display: flex;
  align-items: center;
  padding: 74px 0 72px;
  color: #fff7e8;
  background:
    linear-gradient(90deg, rgba(16,24,28,.72) 0%, rgba(16,24,28,.45) 32%, rgba(16,24,28,.12) 58%, rgba(16,24,28,.18) 100%),
    linear-gradient(180deg, rgba(10,15,20,.10) 0%, rgba(10,15,20,.12) 60%, rgba(24,28,30,.56) 100%),
    url("../images/tbtr-series-hero.png") center center / contain no-repeat,
    linear-gradient(180deg, #121826 0%, #19142a 50%, #10151d 100%);
  text-align: left;
}

.tbtr-series-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 17% 34%, rgba(177,138,80,.20), transparent 27%),
    radial-gradient(circle at 78% 24%, rgba(79,140,138,.09), transparent 26%),
    linear-gradient(180deg, transparent 66%, rgba(33,29,32,.30) 100%);
}

.tbtr-series-hero .wrap {
  position: relative;
  z-index: 1;
}

.tbtr-series-hero-copy {
  width: min(calc(100% - 36px), 1180px);
}

.tbtr-series-hero-copy > * {
  max-width: 590px;
}

.tbtr-series-hero .eyebrow {
  color: #e0bf7e;
  text-shadow: 0 1px 9px rgba(0,0,0,.28);
}

.tbtr-series-hero h1 {
  max-width: 650px;
  margin-bottom: 0;
  color: #fff8e9;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 1.02;
  text-shadow: 0 3px 20px rgba(0,0,0,.42);
}

.tbtr-series-hero .lede {
  max-width: 580px;
  margin: 0;
  color: rgba(255,247,232,.94);
  font-size: 1.08rem;
  line-height: 1.75;
  text-shadow: 0 2px 12px rgba(0,0,0,.38);
}

.tbtr-hero-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
  margin: 22px 0 24px;
}

.tbtr-hero-divider span {
  flex: 1;
  height: 1px;
  background: rgba(224,191,126,.75);
}

.tbtr-hero-divider b {
  color: #e0bf7e;
  font-size: .78rem;
  font-weight: 400;
}

@media (max-width: 820px) {
  .tbtr-series-hero {
    min-height: 500px;
    padding: 80px 0 72px;
    align-items: flex-end;
    background:
      linear-gradient(180deg, rgba(10,15,20,.04) 0%, rgba(10,15,20,.18) 48%, rgba(16,22,26,.86) 100%),
      url("../images/tbtr-series-hero.png") center center / contain no-repeat,
      linear-gradient(180deg, #121826 0%, #19142a 50%, #10151d 100%);
  }

  .tbtr-series-hero-copy > * {
    max-width: 680px;
  }

  .tbtr-series-hero h1 {
    font-size: clamp(2.45rem, 10vw, 4rem);
  }

  .tbtr-series-hero .lede {
    max-width: 650px;
  }
}

@media (max-width: 520px) {
  .tbtr-series-hero {
    min-height: 430px;
    padding: 64px 0 52px;
    background-position: center top;
    background-size: contain;
  }

  .tbtr-hero-divider {
    width: 150px;
    margin-top: 18px;
    margin-bottom: 20px;
  }
}


/* =========================================================
   Version 58 — Tales Beyond the Roll About the Series section
   ========================================================= */
.tbtr-about-series {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  padding-top: clamp(86px, 9vw, 124px);
  padding-bottom: clamp(82px, 8vw, 112px);
  background:
    radial-gradient(circle at 12% 20%, rgba(79,140,138,.10), transparent 27%),
    radial-gradient(circle at 88% 78%, rgba(177,138,80,.11), transparent 28%),
    linear-gradient(180deg, rgba(26,31,34,.18) 0%, rgba(244,239,230,.88) 12%, rgba(247,241,230,.98) 42%, #efe5d5 100%);
}

.tbtr-about-series::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(22deg, transparent 0 47%, rgba(177,138,80,.10) 47.4% 47.8%, transparent 48.2% 100%),
    linear-gradient(-18deg, transparent 0 61%, rgba(79,140,138,.08) 61.3% 61.7%, transparent 62% 100%),
    radial-gradient(circle at 22% 66%, rgba(177,138,80,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 34%, rgba(79,140,138,.12) 0 2px, transparent 3px);
  background-size: 520px 520px, 620px 620px, 170px 170px, 210px 210px;
}

.tbtr-about-series::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 118px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,21,29,.50), rgba(40,43,40,.10) 48%, transparent 100%);
}

.tbtr-about-wrap {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 36px), 980px);
}

.tbtr-series-emblem {
  width: clamp(132px, 16vw, 190px);
  margin: 0 auto 28px;
  padding: 0;
  position: relative;
}

.tbtr-series-emblem::before,
.tbtr-series-emblem::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(74px, 10vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.70));
}

.tbtr-series-emblem::before {
  right: calc(100% + 22px);
}

.tbtr-series-emblem::after {
  left: calc(100% + 22px);
  transform: scaleX(-1);
}

.tbtr-series-emblem img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 18px 42px rgba(33,29,32,.13);
}

.tbtr-about-heading {
  width: min(100%, 760px);
  margin: 0 auto 34px;
}

.tbtr-about-heading h2 {
  margin-bottom: 0;
  color: #2d292b;
}

.tbtr-about-heading .eyebrow {
  color: #497f7d;
}

.tbtr-about-copy {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: clamp(30px, 4.2vw, 46px);
  border: 1px solid rgba(177,138,80,.34);
  border-radius: 18px 26px 18px 24px;
  background:
    radial-gradient(circle at 84% 12%, rgba(79,140,138,.07), transparent 24%),
    linear-gradient(145deg, rgba(255,252,246,.84), rgba(245,235,216,.84));
  box-shadow: 0 22px 52px rgba(33,29,32,.10);
  backdrop-filter: blur(1px);
}

.tbtr-about-copy p {
  margin: 0;
  color: #4a4345;
  line-height: 1.82;
  font-size: 1.04rem;
}

.tbtr-about-copy p + p {
  margin-top: 18px;
}

.tbtr-about-copy p:first-child {
  color: #3a4e50;
  font-size: 1.08rem;
}

.tbtr-series-glance {
  width: min(100%, 940px);
  margin: 38px auto 0;
  padding: 28px 28px 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
  border: 1px solid rgba(177,138,80,.34);
  border-radius: 24px;
  background: rgba(255,248,235,.48);
  box-shadow: 0 16px 38px rgba(54,39,20,.08);
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.tbtr-series-glance b {
  display: none;
}

.tbtr-glance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.tbtr-glance-item img {
  width: clamp(88px, 9vw, 124px);
  height: auto;
  display: block;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(33,29,32,.10);
}

.tbtr-glance-item span {
  color: #3f5455;
  font-size: .80rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.tbtr-next-placeholder {
  background: #f7f1e7;
}

@media (max-width: 700px) {
  .tbtr-series-emblem {
    width: 124px;
  }

  .tbtr-series-emblem::before,
  .tbtr-series-emblem::after {
    width: 54px;
  }

  .tbtr-series-emblem::before {
    right: calc(100% + 14px);
  }

  .tbtr-series-emblem::after {
    left: calc(100% + 14px);
  }

  .tbtr-about-copy {
    padding: 26px 22px 28px;
  }

  .tbtr-series-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 22px 18px;
  }

  .tbtr-glance-item span {
    font-size: .74rem;
  }
}

@media (max-width: 480px) {
  .tbtr-series-emblem::before,
  .tbtr-series-emblem::after {
    display: none;
  }

  .tbtr-series-glance {
    grid-template-columns: 1fr;
  }

  .tbtr-glance-item img {
    width: 92px;
  }
}


/* =========================================================
   Version 61 — TBTR illustrated backdrop below hero
   ========================================================= */
.tbtr-content-backdrop {
  position: relative;
  overflow: hidden;
  background-color: #ead7b4;
  background-image:
    linear-gradient(180deg, rgba(245,232,207,.10) 0%, rgba(245,232,207,.02) 58%, rgba(10,27,38,.10) 100%),
    url("../images/tbtr-content-backdrop.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.tbtr-content-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(42,30,20,.07) 0%, transparent 13%, transparent 87%, rgba(42,30,20,.07) 100%),
    linear-gradient(180deg, rgba(255,248,233,.05) 0%, rgba(255,248,233,.01) 65%, rgba(5,28,40,.08) 100%);
}

.tbtr-content-backdrop > section {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.tbtr-content-backdrop .tbtr-about-series {
  margin-top: 0;
  padding-top: clamp(78px, 8vw, 112px);
  padding-bottom: clamp(92px, 9vw, 126px);
}

.tbtr-content-backdrop .tbtr-about-series::before,
.tbtr-content-backdrop .tbtr-about-series::after {
  display: none;
}

.tbtr-content-backdrop .tbtr-about-heading {
  margin-bottom: 30px;
}

.tbtr-content-backdrop .tbtr-about-heading h2 {
  color: #294f5b;
  text-shadow: 0 1px 0 rgba(255,250,240,.70);
}

.tbtr-content-backdrop .tbtr-about-heading .eyebrow {
  color: #111111;
}

.tbtr-content-backdrop .tbtr-about-copy {
  background: linear-gradient(145deg, rgba(255,250,240,.76), rgba(248,238,219,.70));
  border-color: rgba(143,101,50,.28);
  box-shadow: 0 18px 42px rgba(54,39,20,.10);
  backdrop-filter: blur(1.5px);
}

.tbtr-content-backdrop .tbtr-series-glance {
  padding: 20px 24px;
  border: 1px solid rgba(143,101,50,.32);
  border-radius: 18px;
  background: rgba(255,248,235,.64);
  box-shadow: 0 14px 34px rgba(54,39,20,.08);
}

.tbtr-content-backdrop .tbtr-glance-item span {
  color: #3f5455;
}

.tbtr-content-backdrop .tbtr-next-placeholder {
  padding-top: clamp(120px, 12vw, 180px);
  padding-bottom: clamp(110px, 11vw, 165px);
}

.tbtr-content-backdrop .tbtr-next-placeholder .card {
  background: rgba(255,248,235,.72);
  border-color: rgba(143,101,50,.30);
  box-shadow: 0 18px 42px rgba(54,39,20,.10);
  backdrop-filter: blur(1px);
}

@media (max-width: 1100px) {
  .tbtr-content-backdrop { background-size: cover; }
}

@media (max-width: 700px) {
  .tbtr-content-backdrop {
    background-position: center top;
    background-size: cover;
  }

  .tbtr-content-backdrop .tbtr-about-copy,
  .tbtr-content-backdrop .tbtr-series-glance,
  .tbtr-content-backdrop .tbtr-next-placeholder .card {
    background: rgba(255,248,235,.88);
    backdrop-filter: none;
  }
}


/* =========================================================
   Version 65 — TBTR Beyond the Roll section
   ========================================================= */
.tbtr-beyond-roll {
  padding-top: clamp(88px, 9vw, 132px);
  padding-bottom: clamp(128px, 13vw, 190px);
}

.tbtr-beyond-wrap {
  position: relative;
  width: min(calc(100% - 36px), 980px);
}

.tbtr-beyond-heading {
  width: min(100%, 780px);
  margin: 0 auto 34px;
}

.tbtr-beyond-heading .eyebrow {
  color: #211d20;
}

.tbtr-beyond-heading h2 {
  color: #294f5b;
  text-shadow: 0 1px 0 rgba(255,250,240,.72);
}

.tbtr-beyond-copy {
  position: relative;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: clamp(34px, 4.8vw, 52px);
  border: 1px solid rgba(143,101,50,.32);
  border-radius: 26px 18px 28px 20px;
  background:
    radial-gradient(circle at 88% 8%, rgba(79,140,138,.08), transparent 22%),
    linear-gradient(145deg, rgba(255,250,240,.80), rgba(247,236,216,.74));
  box-shadow: 0 22px 50px rgba(54,39,20,.11);
  backdrop-filter: blur(1.5px);
}

.tbtr-beyond-copy::before {
  content: "✦";
  position: absolute;
  top: 18px;
  right: 24px;
  color: rgba(177,138,80,.72);
  font-size: 1.05rem;
}

.tbtr-beyond-copy p {
  margin: 0;
  color: #443e40;
  font-size: 1.04rem;
  line-height: 1.82;
}

.tbtr-beyond-copy p + p {
  margin-top: 18px;
}

.tbtr-beyond-copy p:first-child {
  color: #38585b;
  font-size: 1.08rem;
}

.tbtr-beyond-punchline {
  color: #211d20 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 2vw, 1.36rem) !important;
  font-style: italic;
  line-height: 1.5 !important;
}

.tbtr-beyond-closing {
  margin-top: 30px !important;
  padding-top: 22px;
  border-top: 1px solid rgba(177,138,80,.34);
  color: #294f5b !important;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.12rem, 1.8vw, 1.3rem) !important;
  line-height: 1.55 !important;
}

@media (max-width: 700px) {
  .tbtr-beyond-roll {
    padding-top: 76px;
    padding-bottom: 116px;
  }

  .tbtr-beyond-copy {
    padding: 30px 22px 32px;
    background: rgba(255,248,235,.90);
    backdrop-filter: none;
  }

  .tbtr-beyond-copy::before {
    top: 14px;
    right: 18px;
  }
}
\n\n/* =========================================================\n   Version 66 — TBTR Choose Your Adventure\n   ========================================================= */\n.tbtr-choose-adventure {\n  padding-top: clamp(92px, 9vw, 136px);\n  padding-bottom: clamp(96px, 10vw, 148px);\n}\n\n.tbtr-choose-wrap {\n  position: relative;\n  width: min(calc(100% - 36px), 1180px);\n}\n\n.tbtr-choose-heading {\n  width: min(100%, 820px);\n  margin: 0 auto 42px;\n}\n\n.tbtr-choose-heading .eyebrow {\n  color: #211d20;\n}\n\n.tbtr-choose-heading h2 {\n  color: #294f5b;\n  text-shadow: 0 1px 0 rgba(255,250,240,.72);\n}\n\n.tbtr-choose-heading p {\n  max-width: 760px;\n  margin: 14px auto 0;\n  color: #433d3f;\n  font-size: 1.03rem;\n  line-height: 1.72;\n}\n\n.tbtr-featured-adventure {\n  width: min(100%, 980px);\n  margin: 0 auto 64px;\n  padding: clamp(24px, 3.4vw, 38px);\n  display: grid;\n  grid-template-columns: minmax(220px, 300px) 1fr;\n  align-items: center;\n  gap: clamp(30px, 5vw, 58px);\n  border: 1px solid rgba(143,101,50,.34);\n  border-radius: 30px 18px 30px 18px;\n  background: linear-gradient(145deg, rgba(255,250,240,.84), rgba(247,236,216,.76));\n  box-shadow: 0 24px 56px rgba(54,39,20,.12);\n  backdrop-filter: blur(1.5px);\n}\n\n.tbtr-featured-cover {\n  margin: 0;\n}\n\n.tbtr-featured-cover img,\n.tbtr-adventure-cover,\n.tbtr-development-card img {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 7px;\n  box-shadow: 0 20px 38px rgba(24,20,20,.22);\n}\n\n.tbtr-featured-copy h3,\n.tbtr-adventure-card h3 {\n  margin: 7px 0 8px;\n  color: #294f5b;\n  font-family: Georgia, "Times New Roman", serif;\n}\n\n.tbtr-featured-copy h3 {\n  font-size: clamp(1.75rem, 3vw, 2.55rem);\n}\n\n.tbtr-featured-copy > p:not(.tbtr-adventure-subline) {\n  margin: 18px 0 24px;\n  color: #443e40;\n  line-height: 1.78;\n}\n\n.tbtr-adventure-subline {\n  margin: 0;\n  color: #4f8c8a;\n  font-weight: 700;\n  letter-spacing: .045em;\n}\n\n.tbtr-adventure-status {\n  color: #8a6537;\n  font-size: .73rem;\n  font-weight: 800;\n  letter-spacing: .16em;\n  text-transform: uppercase;\n}\n\n.tbtr-coming-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  align-items: start;\n  gap: clamp(24px, 3vw, 34px);\n}\n\n.tbtr-adventure-card {\n  overflow: hidden;\n  border: 1px solid rgba(143,101,50,.30);\n  border-radius: 18px 18px 24px 24px;\n  background: linear-gradient(155deg, rgba(255,250,240,.86), rgba(246,234,214,.78));\n  box-shadow: 0 20px 44px rgba(54,39,20,.10);\n  backdrop-filter: blur(1px);\n}\n\n.tbtr-adventure-cover {\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.tbtr-adventure-card-copy {\n  padding: 26px 24px 30px;\n}\n\n.tbtr-adventure-card h3 {\n  font-size: clamp(1.35rem, 2vw, 1.7rem);\n}\n\n.tbtr-adventure-card p {\n  margin: 0;\n  color: #464043;\n  font-size: .96rem;\n  line-height: 1.68;\n}\n\n.tbtr-adventure-card p + p {\n  margin-top: 13px;\n}\n\n.tbtr-adventure-card p:first-of-type {\n  color: #294f5b;\n  font-family: Georgia, "Times New Roman", serif;\n  font-size: 1.04rem;\n  font-weight: 700;\n}\n\n.tbtr-teaser-beat {\n  color: #211d20 !important;\n  font-family: Georgia, "Times New Roman", serif;\n  font-size: 1.06rem !important;\n  font-weight: 700;\n}\n\n.tbtr-development-block {\n  width: min(100%, 1040px);\n  margin: 72px auto 0;\n  padding-top: 34px;\n  border-top: 1px solid rgba(143,101,50,.35);\n}\n\n.tbtr-development-heading {\n  max-width: 680px;\n  margin: 0 auto 30px;\n  text-align: center;\n}\n\n.tbtr-development-heading h3 {\n  margin: 7px 0 8px;\n  color: #294f5b;\n  font-family: Georgia, "Times New Roman", serif;\n  font-size: clamp(1.45rem, 2.5vw, 2rem);\n}\n\n.tbtr-development-heading p {\n  margin: 0;\n  color: #4b4446;\n  line-height: 1.65;\n}\n\n.tbtr-development-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: clamp(22px, 3vw, 32px);\n}\n\n.tbtr-development-card {\n  padding: 18px;\n  border: 1px solid rgba(143,101,50,.28);\n  border-radius: 18px;\n  background: rgba(255,248,235,.70);\n  box-shadow: 0 16px 36px rgba(54,39,20,.08);\n  text-align: center;\n}\n\n.tbtr-development-card h4 {\n  margin: 16px 0 5px;\n  color: #294f5b;\n  font-family: Georgia, "Times New Roman", serif;\n  font-size: 1.2rem;\n}\n\n.tbtr-development-card span {\n  color: #8a6537;\n  font-size: .7rem;\n  font-weight: 800;\n  letter-spacing: .13em;\n  text-transform: uppercase;\n}\n\n@media (max-width: 900px) {\n  .tbtr-featured-adventure {\n    grid-template-columns: minmax(190px, 245px) 1fr;\n    gap: 30px;\n  }\n\n  .tbtr-coming-grid {\n    grid-template-columns: 1fr;\n    width: min(100%, 680px);\n    margin-inline: auto;\n  }\n\n  .tbtr-adventure-card {\n    display: grid;\n    grid-template-columns: minmax(190px, 245px) 1fr;\n  }\n\n  .tbtr-development-grid {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 700px) {\n  .tbtr-choose-adventure {\n    padding-top: 76px;\n    padding-bottom: 100px;\n  }\n\n  .tbtr-featured-adventure,\n  .tbtr-adventure-card {\n    display: block;\n  }\n\n  .tbtr-featured-adventure {\n    width: min(100%, 430px);\n    padding: 20px;\n  }\n\n  .tbtr-featured-copy {\n    padding-top: 26px;\n  }\n\n  .tbtr-adventure-card {\n    width: min(100%, 430px);\n    margin-inline: auto;\n    background: rgba(255,248,235,.92);\n    backdrop-filter: none;\n  }\n\n  .tbtr-development-grid {\n    grid-template-columns: 1fr;\n    width: min(100%, 330px);\n    margin-inline: auto;\n  }\n}\n
/* =========================================================
   Version 68 — Compact horizontal adventure entries
   ========================================================= */
.tbtr-featured-adventure,
.tbtr-adventure-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 30px;
  width: min(100%, 1020px);
  margin-left: auto;
  margin-right: auto;
}

.tbtr-featured-adventure {
  padding: 26px 30px;
}

.tbtr-featured-cover {
  width: 190px;
  margin: 0;
}

.tbtr-featured-cover img {
  display: block;
  width: 190px;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 7px;
  box-shadow: 0 16px 30px rgba(24,20,20,.20);
}

.tbtr-coming-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: min(100%, 1020px);
  margin: 0 auto;
}

.tbtr-adventure-card {
  overflow: visible;
  padding: 24px 28px;
  border-radius: 22px;
}

.tbtr-adventure-cover {
  display: block;
  width: 190px;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  align-self: start;
  border-radius: 7px;
  box-shadow: 0 16px 30px rgba(24,20,20,.18);
}

.tbtr-adventure-card-copy {
  padding: 2px 0 0;
  min-width: 0;
}

.tbtr-adventure-card-copy p {
  max-width: 68ch;
}

.tbtr-featured-copy {
  padding-top: 2px;
}

.tbtr-featured-copy > p:not(.tbtr-adventure-subline) {
  max-width: 68ch;
}

.tbtr-development-card {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 15px;
  text-align: left;
}

.tbtr-development-card img {
  width: 105px;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.tbtr-development-card h4 {
  margin: 0 0 6px;
}

@media (max-width: 760px) {
  .tbtr-featured-adventure,
  .tbtr-adventure-card {
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 20px;
    width: 100%;
  }

  .tbtr-featured-adventure,
  .tbtr-adventure-card {
    padding: 20px;
  }

  .tbtr-featured-cover,
  .tbtr-featured-cover img,
  .tbtr-adventure-cover {
    width: 135px;
  }

  .tbtr-development-grid {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
  }
}

@media (max-width: 560px) {
  .tbtr-featured-adventure,
  .tbtr-adventure-card {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .tbtr-featured-cover,
  .tbtr-featured-cover img,
  .tbtr-adventure-cover {
    width: 100px;
  }

  .tbtr-featured-copy h3,
  .tbtr-adventure-card h3 {
    font-size: 1.25rem;
  }

  .tbtr-adventure-card p,
  .tbtr-featured-copy > p:not(.tbtr-adventure-subline) {
    font-size: .9rem;
    line-height: 1.6;
  }
}

/* =========================================================
   Version 70 — Stronger horizontal feature + compact dev row
   ========================================================= */
.tbtr-featured-adventure {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: clamp(26px, 4vw, 44px) !important;
  width: min(100%, 1040px) !important;
  padding: 26px 30px !important;
}

.tbtr-featured-cover {
  flex: 0 0 180px !important;
  width: 180px !important;
  margin: 0 !important;
}

.tbtr-featured-cover img {
  display: block !important;
  width: 180px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

.tbtr-featured-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 2px 0 0 !important;
}

.tbtr-featured-copy > p:not(.tbtr-adventure-subline) {
  max-width: 66ch !important;
}

.tbtr-featured-copy .button {
  display: inline-flex;
  margin-top: 2px;
}

.tbtr-development-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.5vw, 26px) !important;
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
}

.tbtr-development-card {
  display: block !important;
  padding: 14px !important;
  text-align: center !important;
}

.tbtr-development-card img {
  display: block !important;
  width: min(100%, 150px) !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.tbtr-development-card h4 {
  margin: 12px 0 4px !important;
  font-size: 1.05rem !important;
}

.tbtr-development-card span {
  font-size: .64rem !important;
  letter-spacing: .11em !important;
}

@media (max-width: 700px) {
  .tbtr-featured-adventure {
    gap: 18px !important;
    padding: 18px !important;
  }

  .tbtr-featured-cover {
    flex-basis: 125px !important;
    width: 125px !important;
  }

  .tbtr-featured-cover img {
    width: 125px !important;
  }

  .tbtr-development-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .tbtr-development-card {
    padding: 10px !important;
  }

  .tbtr-development-card img {
    width: 100% !important;
    max-width: 120px !important;
  }
}

@media (max-width: 500px) {
  .tbtr-featured-adventure {
    gap: 14px !important;
    padding: 14px !important;
  }

  .tbtr-featured-cover {
    flex-basis: 96px !important;
    width: 96px !important;
  }

  .tbtr-featured-cover img {
    width: 96px !important;
  }

  .tbtr-featured-copy h3 {
    font-size: 1.18rem !important;
  }

  .tbtr-featured-copy > p:not(.tbtr-adventure-subline) {
    font-size: .88rem !important;
    line-height: 1.55 !important;
  }

  .tbtr-development-card h4 {
    font-size: .9rem !important;
  }

  .tbtr-development-card span {
    font-size: .56rem !important;
  }
}


/* =========================================================
   Version 71 — Featured TBTR adventure + KFTC real summary
   ========================================================= */
.tbtr-featured-adventure {
  position: relative;
  border: 1px solid rgba(177,138,80,.68) !important;
  border-top: 4px solid #b18a50 !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(79,140,138,.10), transparent 27%),
    linear-gradient(145deg, rgba(255,252,245,.96), rgba(241,226,199,.90)) !important;
  box-shadow: 0 26px 58px rgba(54,39,20,.16) !important;
}

.tbtr-featured-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(177,138,80,.52);
  border-radius: 999px;
  background: rgba(177,138,80,.10);
  color: #755328;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tbtr-featured-summary {
  margin: 18px 0 24px;
  max-width: 66ch;
}

.tbtr-featured-summary p {
  margin: 0;
  color: #443e40;
  line-height: 1.7;
}

.tbtr-featured-summary p + p {
  margin-top: 12px;
}

.tbtr-featured-summary .tbtr-featured-closing {
  margin-top: 16px;
  color: #294f5b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
}

.tbtr-coming-heading {
  width: min(100%, 1020px);
  margin: 0 auto 20px;
  padding: 0 4px;
}

.tbtr-coming-heading p {
  margin: 6px 0 0;
  color: #51494b;
  font-size: .95rem;
}

/* Dedicated Kindness First, Then Claws page */
.kftc-about-book {
  padding-top: clamp(78px, 8vw, 118px);
  padding-bottom: clamp(96px, 10vw, 146px);
  background:
    radial-gradient(circle at 15% 12%, rgba(79,140,138,.10), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(177,138,80,.12), transparent 30%),
    linear-gradient(180deg, #f5eee1 0%, #efe3d0 100%);
}

.kftc-about-wrap {
  width: min(calc(100% - 36px), 1060px);
  display: grid;
  grid-template-columns: minmax(190px, 245px) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 70px);
  align-items: start;
}

.kftc-book-cover {
  margin: 0;
  position: sticky;
  top: 98px;
}

.kftc-book-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(33,29,32,.20);
}

.kftc-book-copy {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(177,138,80,.32);
  border-radius: 22px 30px 22px 26px;
  background: rgba(255,250,241,.83);
  box-shadow: 0 22px 50px rgba(54,39,20,.10);
}

.kftc-book-copy .eyebrow {
  color: #211d20;
}

.kftc-book-copy h2 {
  margin: 8px 0 6px;
  color: #294f5b;
}

.kftc-book-subline {
  margin: 0;
  color: #4f8c8a !important;
  font-weight: 700;
  letter-spacing: .04em;
}

.kftc-book-copy .divider {
  margin: 22px 0 26px;
}

.kftc-book-copy > p {
  margin: 0;
  color: #474144;
  line-height: 1.78;
  font-size: 1.02rem;
}

.kftc-book-copy > p + p {
  margin-top: 16px;
}

.kftc-summary-closing {
  margin-top: 24px !important;
  color: #294f5b !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem !important;
}

@media (max-width: 760px) {
  .kftc-about-wrap {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
  }

  .kftc-book-cover {
    position: static;
  }

  .kftc-book-copy {
    padding: 26px 22px 30px;
  }
}

@media (max-width: 580px) {
  .kftc-about-wrap {
    display: block;
  }

  .kftc-book-cover {
    width: min(52vw, 190px);
    margin: 0 auto 28px;
  }
}

/* =========================================================
   Version 72 — TBTR flow + stronger featured CTA
   ========================================================= */
.tbtr-choose-heading {
  margin-bottom: 34px;
}

.tbtr-featured-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 6px !important;
  padding: 14px 24px !important;
  border: 1px solid #b18a50 !important;
  border-radius: 999px !important;
  background: #4f8c8a !important;
  color: #fffaf0 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .80rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(79,140,138,.22), 0 2px 0 rgba(177,138,80,.22);
}

.tbtr-featured-cta:hover,
.tbtr-featured-cta:focus-visible {
  background: #42495a !important;
  color: #fffaf0 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(66,73,90,.22), 0 0 0 4px rgba(177,138,80,.13);
}

.tbtr-choose-adventure {
  padding-bottom: clamp(82px, 8vw, 118px);
}

.tbtr-beyond-roll {
  margin: 0;
  padding-top: clamp(82px, 8vw, 118px);
  padding-bottom: clamp(88px, 9vw, 128px);
}

.tbtr-coming-adventures {
  padding-top: clamp(86px, 9vw, 126px);
  padding-bottom: clamp(104px, 11vw, 154px);
}

.tbtr-coming-adventures .tbtr-coming-heading {
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  .tbtr-featured-cta {
    padding: 12px 18px !important;
    font-size: .72rem;
  }

  .tbtr-coming-adventures {
    padding-top: 76px;
    padding-bottom: 110px;
  }
}


/* =========================================================
   Version 73 — TBTR Easter Egg / Side Quest section
   ========================================================= */
.tbtr-side-quest {
  padding: clamp(32px, 4vw, 54px) 0 clamp(74px, 8vw, 112px);
  background:
    radial-gradient(circle at 15% 40%, rgba(79,140,138,.08), transparent 28%),
    radial-gradient(circle at 88% 65%, rgba(177,138,80,.10), transparent 30%),
    linear-gradient(180deg, #f3eadb 0%, #eee0cb 100%);
}

.tbtr-side-quest-wrap {
  width: min(calc(100% - 36px), 980px);
}

.tbtr-side-quest-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: center;
  padding: clamp(30px, 4.5vw, 48px);
  border: 1px solid rgba(143,101,50,.42);
  border-radius: 18px 30px 18px 28px;
  background:
    linear-gradient(145deg, rgba(255,251,242,.94), rgba(245,231,205,.92));
  box-shadow: 0 22px 52px rgba(54,39,20,.11);
  overflow: hidden;
}

.tbtr-side-quest-card::before,
.tbtr-side-quest-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.55), transparent);
}

.tbtr-side-quest-card::before {
  top: 18px;
  left: 22px;
}

.tbtr-side-quest-card::after {
  right: 22px;
  bottom: 18px;
}

.tbtr-side-quest-mark {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(177,138,80,.58);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(79,140,138,.13) 0 43%, transparent 44%),
    rgba(255,250,239,.72);
  color: #b18a50;
  font-size: 1.75rem;
  box-shadow: inset 0 0 0 6px rgba(177,138,80,.07), 0 10px 24px rgba(54,39,20,.08);
}

.tbtr-side-quest-copy .eyebrow {
  color: #211d20;
}

.tbtr-side-quest-copy h2 {
  margin: 7px 0 15px;
  color: #294f5b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.4vw, 2.65rem);
}

.tbtr-side-quest-copy p {
  margin: 0;
  max-width: 68ch;
  color: #464043;
  font-size: 1rem;
  line-height: 1.76;
}

.tbtr-side-quest-copy p + p {
  margin-top: 14px;
}

.tbtr-side-quest-lede {
  color: #35595a !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem) !important;
  font-weight: 700;
  line-height: 1.6 !important;
}

@media (max-width: 680px) {
  .tbtr-side-quest-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 22px 30px;
  }

  .tbtr-side-quest-mark {
    width: 64px;
    height: 64px;
    font-size: 1.45rem;
  }
}


/* =========================================================
   Version 74 — TBTR map backdrop for Choose Your Adventure + Beyond the Roll
   ========================================================= */
.tbtr-choose-adventure,
.tbtr-beyond-roll {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(251,245,234,.90), rgba(247,238,221,.92)),
    url("../images/tbtr-map-panel-background.png") center top / cover no-repeat;
}

.tbtr-choose-adventure::before,
.tbtr-beyond-roll::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,250,243,.30), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
}

.tbtr-featured-adventure,
.tbtr-beyond-copy {
  background:
    linear-gradient(145deg, rgba(255,251,244,.88), rgba(248,238,221,.84));
}

.tbtr-beyond-copy {
  box-shadow: 0 24px 52px rgba(54,39,20,.12);
}

@media (max-width: 700px) {
  .tbtr-choose-adventure,
  .tbtr-beyond-roll {
    background-size: auto 100%;
    background-position: center top;
  }
}


/* =========================================================
   Version 76 — TBTR Side Quest map background
   ========================================================= */
.tbtr-side-quest {
  padding: clamp(34px, 4.5vw, 58px) 0 clamp(78px, 8vw, 118px);
  background:
    linear-gradient(180deg, rgba(243,231,209,.90) 0%, rgba(243,231,209,.68) 14%, rgba(238,225,201,.52) 100%),
    url('../images/tbtr-side-quest-bg.png') center center / cover no-repeat;
}

.tbtr-side-quest-card {
  border: 1px solid rgba(143,101,50,.46);
  border-radius: 20px 34px 20px 32px;
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.30), transparent 38%),
    linear-gradient(145deg, rgba(255,251,242,.94), rgba(245,231,205,.88));
  box-shadow: 0 24px 60px rgba(54,39,20,.14);
  backdrop-filter: blur(1px);
}

.tbtr-side-quest-card::before,
.tbtr-side-quest-card::after {
  width: 136px;
  background: linear-gradient(90deg, transparent, rgba(177,138,80,.62), transparent);
}

.tbtr-side-quest-card::before {
  top: 20px;
  left: 26px;
}

.tbtr-side-quest-card::after {
  right: 26px;
  bottom: 20px;
}

.tbtr-side-quest-card .tbtr-side-quest-copy {
  position: relative;
}

.tbtr-side-quest-card .tbtr-side-quest-copy::after {
  content: "";
  display: block;
  width: 118px;
  height: 10px;
  margin-top: 18px;
  background:
    radial-gradient(circle, rgba(177,138,80,.95) 0 2px, transparent 3px) left center/26px 10px repeat-x;
  opacity: .68;
}

.tbtr-side-quest-mark {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(177,138,80,.64);
  background:
    radial-gradient(circle, rgba(79,140,138,.15) 0 44%, transparent 45%),
    rgba(255,250,239,.86);
  font-size: 1.85rem;
  box-shadow: inset 0 0 0 7px rgba(177,138,80,.08), 0 12px 28px rgba(54,39,20,.09);
}

.tbtr-side-quest-mark::before,
.tbtr-side-quest-mark::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(177,138,80,.26);
}

.tbtr-side-quest-mark::after {
  inset: 10px;
  border-style: solid;
  border-color: rgba(177,138,80,.20);
}

.tbtr-side-quest-copy h2 {
  margin: 7px 0 12px;
  color: #284e59;
}

.tbtr-side-quest-clues {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 18px;
}

.tbtr-clue-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(177,138,80,.45);
  background: linear-gradient(180deg, rgba(255,251,244,.98), rgba(247,236,217,.92));
  color: #5e4726;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(54,39,20,.05);
}

.tbtr-clue-pill::before {
  content: "✦";
  color: #b18a50;
  font-size: .8rem;
}

.tbtr-side-quest-note {
  display: inline-block;
  margin-top: 16px !important;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(79,140,138,.09);
  color: #35595a !important;
  font-style: italic;
  font-weight: 600;
}

@media (max-width: 680px) {
  .tbtr-side-quest-card .tbtr-side-quest-copy::after {
    width: 92px;
    background-size: 20px 10px;
  }

  .tbtr-side-quest-clues {
    gap: 8px;
  }

  .tbtr-clue-pill {
    font-size: .75rem;
    padding: 7px 12px;
  }
}

/* =========================================================
   Version 77 — Illustrated Side Quest card
   ========================================================= */
@media (min-width: 681px) {
  .tbtr-side-quest-wrap {
    width: min(calc(100% - 36px), 1060px);
  }

  .tbtr-side-quest-card {
    min-height: 690px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(118px, 10vw, 145px) clamp(118px, 11vw, 155px);
    border: 0;
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255,249,237,.08), rgba(255,249,237,.04)),
      url('../images/tbtr-side-quest-card-bg.png') center center / cover no-repeat;
    box-shadow: 0 28px 68px rgba(38,27,17,.24);
    backdrop-filter: none;
  }

  .tbtr-side-quest-card::before,
  .tbtr-side-quest-card::after {
    display: none;
  }

  .tbtr-side-quest-mark {
    display: none;
  }

  .tbtr-side-quest-copy {
    width: min(100%, 690px);
    padding: clamp(24px, 3vw, 34px) clamp(28px, 4vw, 44px);
    border: 1px solid rgba(177,138,80,.30);
    border-radius: 22px;
    background: rgba(255,248,235,.78);
    box-shadow: 0 14px 36px rgba(65,46,24,.11);
    backdrop-filter: blur(1.5px);
    text-align: center;
  }

  .tbtr-side-quest-copy .eyebrow {
    color: #7a5527;
  }

  .tbtr-side-quest-copy h2 {
    color: #245f65;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
  }

  .tbtr-side-quest-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .tbtr-side-quest-clues {
    justify-content: center;
  }

  .tbtr-clue-pill {
    border-color: rgba(177,138,80,.54);
    background: linear-gradient(180deg, rgba(255,252,245,.96), rgba(235,248,245,.91));
    color: #365d60;
    box-shadow: 0 7px 17px rgba(54,39,20,.07);
  }

  .tbtr-clue-pill:nth-child(even) {
    background: linear-gradient(180deg, rgba(255,251,240,.96), rgba(247,232,204,.92));
    color: #74512b;
  }

  .tbtr-side-quest-note {
    background: rgba(79,140,138,.15);
    color: #2f5f62 !important;
  }

  .tbtr-side-quest-card .tbtr-side-quest-copy::after {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 860px) and (min-width: 681px) {
  .tbtr-side-quest-card {
    min-height: 600px;
    padding: 92px 82px;
  }

  .tbtr-side-quest-copy {
    width: min(100%, 610px);
    padding: 24px 28px 28px;
  }
}

@media (max-width: 680px) {
  .tbtr-side-quest-card {
    position: relative;
    background:
      linear-gradient(180deg, rgba(255,249,237,.90), rgba(245,231,205,.91)),
      url('../images/tbtr-side-quest-card-bg.png') center top / cover no-repeat;
    border-color: rgba(177,138,80,.58);
    box-shadow: 0 20px 48px rgba(54,39,20,.16);
  }

  .tbtr-side-quest-copy {
    padding: 4px 2px 0;
  }
}


/* =========================================================
   Version 79 — Kindness First, Then Claws custom hero
   ========================================================= */
.kftc-hero {
  min-height: clamp(430px, 32vw, 610px);
  padding: clamp(78px, 8vw, 120px) 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(18,15,24,.48) 0%, rgba(18,15,24,.64) 34%, rgba(18,15,24,.60) 66%, rgba(18,15,24,.34) 100%),
    url("../images/kftc-hero-panorama.png") center center / cover no-repeat;
  color: #fff8ea;
  border-bottom: 1px solid rgba(177,138,80,.45);
}

.kftc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 48%, rgba(16,13,24,.18) 0 24%, rgba(16,13,24,.02) 55%, transparent 72%),
    linear-gradient(180deg, rgba(12,11,18,.08), rgba(12,11,18,.23));
}

.kftc-hero-copy {
  width: min(calc(100% - 36px), 940px);
  text-align: center;
  text-shadow: 0 2px 18px rgba(10,8,12,.70);
}

.kftc-hero .eyebrow {
  margin-bottom: 12px;
  color: #d8b56d;
  letter-spacing: .20em;
}

.kftc-hero h1 {
  max-width: 920px;
  margin: 0 auto 12px;
  color: #fff7e8;
  font-size: clamp(2.65rem, 5.4vw, 5.1rem);
  letter-spacing: .035em;
}

.kftc-hero-subline {
  margin: 0;
  color: #b8dbd7;
  font-size: clamp(.92rem, 1.5vw, 1.12rem);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.kftc-hero-divider {
  width: min(310px, 70vw);
  margin: 20px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #d8b56d;
}

.kftc-hero-divider span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(216,181,109,.92));
}

.kftc-hero-divider span:last-child {
  transform: scaleX(-1);
}

.kftc-hero-divider b {
  font-size: .78rem;
  font-weight: 400;
}

.kftc-hero .lede {
  max-width: 780px;
  margin: 0 auto;
  color: #fff6e8;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.72;
}

@media (max-width: 800px) {
  .kftc-hero {
    min-height: 500px;
    padding: 76px 0 68px;
    background-position: center center;
  }

  .kftc-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.55rem);
  }

  .kftc-hero .lede {
    max-width: 620px;
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .kftc-hero {
    min-height: 520px;
    background-position: 54% center;
  }

  .kftc-hero-subline {
    font-size: .78rem;
    letter-spacing: .10em;
  }
}


/* =========================================================
   Version 80 — KFTC character introductions + Bluebloom easter egg
   ========================================================= */
.kftc-character-intros {
  padding: clamp(54px, 7vw, 92px) 0 clamp(96px, 10vw, 138px);
  background:
    radial-gradient(circle at 14% 16%, rgba(79,140,138,.10), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(177,138,80,.12), transparent 30%),
    linear-gradient(180deg, #efe3d0 0%, #eadbc6 100%);
}

.kftc-intros-heading {
  width: min(calc(100% - 36px), 940px);
  margin: 0 auto 34px;
  text-align: center;
}

.kftc-intros-heading h2 {
  margin-bottom: 10px;
  color: #294f5b;
}

.kftc-intros-heading p {
  max-width: 760px;
  margin: 0 auto;
  color: #5a5050;
  line-height: 1.72;
}

.kftc-intro-grid {
  width: min(calc(100% - 36px), 1060px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.5vw, 32px);
}

.kftc-intro-card {
  position: relative;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 24px;
  border: 1px solid rgba(177,138,80,.30);
  background: rgba(255,248,237,.92);
  box-shadow: 0 18px 42px rgba(54,39,20,.10);
  overflow: hidden;
}

.kftc-intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 44%);
}

.kftc-intro-card.gildie-card {
  background:
    radial-gradient(circle at 88% 14%, rgba(216,181,109,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,252,245,.96), rgba(249,240,224,.96));
}

.kftc-intro-card.cera-card {
  background:
    radial-gradient(circle at 88% 14%, rgba(79,140,138,.12), transparent 24%),
    linear-gradient(180deg, rgba(251,252,249,.96), rgba(237,244,242,.96));
}

.kftc-intro-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 999px;
  color: #294f5b;
  background: rgba(216,181,109,.18);
  font-size: 1.05rem;
}

.kftc-intro-card .eyebrow {
  color: #211d20;
}

.kftc-intro-card h3 {
  margin: 6px 0 14px;
  color: #294f5b;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.kftc-intro-card p {
  margin: 0;
  color: #4b4345;
  line-height: 1.76;
}

.kftc-intro-card p + p {
  margin-top: 14px;
}

.kftc-bluebloom {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 52px;
  height: 72px;
  opacity: .9;
}

.kftc-bluebloom::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f0d991 0 16%, transparent 18%),
    radial-gradient(circle at 50% 4px, rgba(94,135,214,.95) 0 8px, transparent 9px),
    radial-gradient(circle at calc(100% - 5px) 13px, rgba(111,155,230,.92) 0 8px, transparent 9px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 6px), rgba(101,148,224,.92) 0 8px, transparent 9px),
    radial-gradient(circle at 10px calc(100% - 6px), rgba(89,133,214,.92) 0 8px, transparent 9px),
    radial-gradient(circle at 5px 13px, rgba(116,165,235,.92) 0 8px, transparent 9px);
  filter: drop-shadow(0 4px 6px rgba(52,76,113,.14));
}

.kftc-bluebloom::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 36px;
  width: 3px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6e9d73, #55795a);
  box-shadow:
    -9px 10px 0 -4px rgba(114,162,117,.95),
    9px 13px 0 -4px rgba(114,162,117,.95);
}

@media (max-width: 760px) {
  .kftc-intro-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Version 81 — Kindness First, Then Claws immersive world backdrop
   ========================================================= */
.kftc-world-shell {
  position: relative;
  overflow: hidden;
  background-color: #0b1013;
  background-image:
    linear-gradient(180deg, rgba(9,12,15,.40) 0%, rgba(9,12,15,.22) 14%, rgba(9,12,15,.38) 42%, rgba(9,12,15,.58) 72%, rgba(9,12,15,.76) 100%),
    url("../images/kftc-page-backdrop.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.kftc-world-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,236,191,.12), transparent 22%),
    linear-gradient(180deg, rgba(8,10,12,.10) 0%, rgba(8,10,12,.18) 16%, rgba(8,10,12,.28) 36%, rgba(8,10,12,.44) 58%, rgba(8,10,12,.62) 100%),
    linear-gradient(90deg, rgba(5,7,9,.26) 0%, rgba(5,7,9,.06) 22%, rgba(5,7,9,.04) 76%, rgba(5,7,9,.24) 100%);
}

.kftc-world-shell > section {
  position: relative;
  z-index: 1;
}

.kftc-about-book,
.kftc-character-intros {
  background: transparent !important;
}

.kftc-about-book {
  padding-top: clamp(82px, 9vw, 126px);
  padding-bottom: clamp(96px, 10vw, 146px);
  border-bottom: 1px solid rgba(216,181,109,.12);
}

.kftc-book-cover img {
  border: 1px solid rgba(216,181,109,.22);
  box-shadow: 0 28px 56px rgba(7,9,11,.40);
}

.kftc-book-copy {
  border: 1px solid rgba(216,181,109,.26);
  background:
    linear-gradient(180deg, rgba(17,22,27,.78), rgba(11,16,20,.74));
  box-shadow: 0 26px 60px rgba(5,8,10,.26);
  backdrop-filter: blur(4px);
}

.kftc-book-copy .eyebrow,
.kftc-intro-card .eyebrow {
  color: #d8b56d;
}

.kftc-book-copy h2,
.kftc-intros-heading h2,
.kftc-intro-card h3 {
  color: #f3ead7;
}

.kftc-book-subline {
  color: #8dc9c3 !important;
}

.kftc-book-copy .divider {
  background: linear-gradient(90deg, transparent, rgba(216,181,109,.86), transparent);
}

.kftc-book-copy > p,
.kftc-intros-heading p,
.kftc-intro-card p {
  color: #e1d8cc;
}

.kftc-summary-closing {
  color: #f0dfbe !important;
}

.kftc-character-intros {
  padding: clamp(56px, 7vw, 96px) 0 clamp(108px, 11vw, 152px);
}

.kftc-intros-heading {
  margin-bottom: 40px;
}

.kftc-intros-heading p {
  max-width: 760px;
}

.kftc-intro-card {
  border: 1px solid rgba(216,181,109,.24);
  box-shadow: 0 22px 48px rgba(6,9,11,.22);
}

.kftc-intro-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 42%);
}

.kftc-intro-card.gildie-card {
  background:
    radial-gradient(circle at 88% 14%, rgba(216,181,109,.10), transparent 24%),
    linear-gradient(180deg, rgba(28,34,30,.84), rgba(18,23,20,.82));
}

.kftc-intro-card.cera-card {
  background:
    radial-gradient(circle at 88% 14%, rgba(121,177,196,.12), transparent 24%),
    linear-gradient(180deg, rgba(18,28,31,.84), rgba(13,19,23,.82));
}

.kftc-intro-mark {
  color: #f3ead7;
  background: rgba(216,181,109,.16);
}

@media (max-width: 760px) {
  .kftc-world-shell {
    background-position: center top;
    background-size: cover;
  }

  .kftc-book-copy {
    backdrop-filter: blur(3px);
  }
}


/* =========================================================
   Version 82 — KFTC character portraits
   ========================================================= */
.kftc-intro-card {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.kftc-character-portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid rgba(216,181,109,.24);
  background: rgba(10,14,17,.55);
}

.kftc-character-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(10,14,17,.20) 78%, rgba(10,14,17,.56) 100%);
}

.kftc-character-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 25%;
}

.gildie-card .kftc-character-portrait img {
  object-position: center 27%;
}

.cera-card .kftc-character-portrait img {
  object-position: center 22%;
}

.kftc-intro-content {
  position: relative;
  flex: 1;
  padding: clamp(26px, 3vw, 34px);
}

.kftc-intro-content .kftc-bluebloom {
  right: 18px;
  bottom: 14px;
}

@media (max-width: 760px) {
  .kftc-character-portrait {
    aspect-ratio: 5 / 4;
  }
}

/* =========================================================
   Version 83 — KFTC Companions & Chaos
   ========================================================= */
.kftc-bluebloom {
  display: none !important;
}

.kftc-companions {
  position: relative;
  padding: clamp(72px, 8vw, 112px) 0 clamp(112px, 12vw, 168px);
  background: transparent;
  border-top: 1px solid rgba(216,181,109,.12);
}

.kftc-companions-wrap {
  position: relative;
  width: min(calc(100% - 36px), 1180px);
}

.kftc-companions-heading {
  width: min(100%, 900px);
  margin: 0 auto 40px;
  text-align: center;
}

.kftc-companions-heading .eyebrow {
  color: #d8b56d;
}

.kftc-companions-heading h2 {
  margin: 8px auto 10px;
  max-width: 820px;
  color: #f3ead7;
}

.kftc-companions-heading p {
  max-width: 790px;
  margin: 0 auto;
  color: #ded5c9;
  line-height: 1.76;
}

.kftc-companions-heading .divider {
  margin: 20px auto 22px;
  background: linear-gradient(90deg, transparent, rgba(216,181,109,.78), transparent);
}

.kftc-companion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.kftc-companion-card {
  overflow: hidden;
  border: 1px solid rgba(216,181,109,.25);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(17,23,27,.88), rgba(10,15,18,.84));
  box-shadow: 0 22px 48px rgba(4,7,9,.26);
  backdrop-filter: blur(3px);
}

.kftc-companion-portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(216,181,109,.22);
  background: rgba(8,12,15,.72);
}

.kftc-companion-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(7,10,13,.12) 72%, rgba(7,10,13,.54) 100%);
}

.kftc-companion-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chesty-companion .kftc-companion-portrait img {
  object-position: center 42%;
}

.triton-companion .kftc-companion-portrait img {
  object-position: center 28%;
}

.sorren-companion .kftc-companion-portrait img {
  object-position: center 24%;
}

.nightmare-companion .kftc-companion-portrait img {
  object-position: center 18%;
}

.kftc-companion-copy {
  padding: 22px 20px 25px;
}

.kftc-companion-copy h3 {
  margin: 0 0 10px;
  color: #f0dfbe;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
}

.kftc-companion-copy p {
  margin: 0;
  color: #ddd4c8;
  font-size: .94rem;
  line-height: 1.68;
}

/* Serafina clue: a tiny checklist with a singed goose feather. */
.kftc-next-adventure-clue {
  position: absolute;
  right: clamp(4px, 1.5vw, 18px);
  bottom: -86px;
  width: 126px;
  height: 104px;
  opacity: .66;
  transform: rotate(4deg);
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.22));
}

.kftc-checklist-paper {
  position: absolute;
  right: 4px;
  bottom: 7px;
  width: 82px;
  height: 68px;
  padding: 12px 10px 8px;
  border-radius: 3px 8px 4px 6px;
  background:
    radial-gradient(circle at 100% 0, rgba(33,20,12,.72) 0 4px, transparent 5px),
    linear-gradient(145deg, rgba(226,202,158,.95), rgba(184,150,99,.92));
  box-shadow: inset 0 0 0 1px rgba(70,45,24,.30);
}

.kftc-checklist-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 76%, rgba(63,35,18,.34) 94%, rgba(22,12,8,.58) 100%);
  mix-blend-mode: multiply;
}

.kftc-checklist-paper span {
  position: relative;
  z-index: 1;
  display: block;
  width: 48px;
  height: 9px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(70,48,28,.62);
}

.kftc-checklist-paper span::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(70,48,28,.72);
  transform: translateX(-6px);
}

.kftc-goose-feather {
  position: absolute;
  left: 1px;
  top: -4px;
  width: 68px;
  height: 112px;
  transform: rotate(-17deg);
  overflow: visible;
}

.kftc-goose-feather .feather-shaft {
  fill: none;
  stroke: rgba(213,201,178,.92);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.kftc-goose-feather .feather-body {
  fill: rgba(221,211,190,.88);
  stroke: rgba(95,82,69,.56);
  stroke-width: 1.5;
}

.kftc-goose-feather .feather-cut {
  fill: none;
  stroke: rgba(105,92,78,.58);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.kftc-goose-feather::after {
  content: "";
}

@media (max-width: 980px) {
  .kftc-companion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .kftc-companions {
    padding-bottom: 126px;
  }

  .kftc-companion-grid {
    grid-template-columns: 1fr;
  }

  .kftc-companion-card {
    width: min(100%, 390px);
    margin: 0 auto;
  }

  .kftc-next-adventure-clue {
    right: 12px;
    bottom: -76px;
    transform: rotate(2deg) scale(.9);
  }
}


/* =========================================================
   Version 84 — KFTC From the Book placeholder + Letters from Reeca
   ========================================================= */
.kftc-from-book {
  padding: clamp(70px, 8vw, 108px) 0 clamp(92px, 10vw, 136px);
  background: transparent;
  border-top: 1px solid rgba(216,181,109,.12);
}

.kftc-from-book-wrap {
  width: min(calc(100% - 36px), 900px);
}

.kftc-from-book-card {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 6vw, 68px) clamp(28px, 6vw, 72px);
  border: 1px solid rgba(216,181,109,.26);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,181,109,.09), transparent 38%),
    linear-gradient(180deg, rgba(17,23,27,.86), rgba(9,14,17,.82));
  box-shadow: 0 26px 62px rgba(4,7,9,.26);
  backdrop-filter: blur(4px);
  text-align: center;
}

.kftc-from-book-card::before,
.kftc-from-book-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,181,109,.48), transparent);
}

.kftc-from-book-card::before {
  top: 24px;
  left: 28px;
}

.kftc-from-book-card::after {
  right: 28px;
  bottom: 24px;
}

.kftc-from-book-card .eyebrow {
  color: #d8b56d;
}

.kftc-from-book-mark {
  height: 48px;
  margin: 6px 0 -8px;
  color: rgba(216,181,109,.52);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.6rem;
  line-height: 1;
}

.kftc-from-book-card h2 {
  margin: 0 auto 12px;
  color: #f3ead7;
}

.kftc-from-book-card .divider {
  width: min(220px, 70%);
  margin: 20px auto 22px;
  background: linear-gradient(90deg, transparent, rgba(216,181,109,.78), transparent);
}

.kftc-from-book-card p {
  max-width: 650px;
  margin: 0 auto;
  color: #ded5c9;
  font-size: 1.02rem;
  line-height: 1.75;
}

.kftc-coming-soon {
  display: inline-block;
  margin-top: 25px;
  padding: 9px 16px;
  border: 1px solid rgba(141,201,195,.38);
  border-radius: 999px;
  background: rgba(79,140,138,.13);
  color: #a9d7d2;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.kftc-letters-section {
  background: #f2ebdf;
}

@media (max-width: 580px) {
  .kftc-from-book-card {
    padding: 38px 22px 44px;
  }

  .kftc-from-book-card::before,
  .kftc-from-book-card::after {
    width: 90px;
  }
}

/* =========================================================
   Version 85 — The First Vow Trilogy series hub
   ========================================================= */
.fvt-world-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f3ebdf;
  background:
    linear-gradient(180deg, rgba(8,8,9,.13), rgba(10,11,13,.34)),
    url("../images/first-vow-page-backdrop.png") center top / cover no-repeat,
    #111113;
}

.fvt-world-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 7%, rgba(205,160,81,.20), transparent 22%),
    radial-gradient(circle at 22% 48%, rgba(177,138,80,.08), transparent 26%),
    radial-gradient(circle at 80% 78%, rgba(170,185,200,.08), transparent 27%),
    linear-gradient(180deg, rgba(5,5,6,.16), rgba(8,9,11,.26) 52%, rgba(11,12,14,.42));
}

.fvt-hero {
  position: relative;
  min-height: 690px;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  padding: clamp(92px, 12vw, 154px) 0 clamp(84px, 10vw, 132px);
  border-bottom: 1px solid rgba(199,160,91,.18);
}

.fvt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,7,8,.48), rgba(8,8,9,.18) 45%, rgba(8,8,9,.58)),
    radial-gradient(ellipse at center, transparent 0 38%, rgba(3,3,4,.32) 74%, rgba(3,3,4,.68) 100%);
}

.fvt-hero::after {
  content: "";
  position: absolute;
  width: min(720px, 82vw);
  height: min(720px, 82vw);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  border: 1px solid rgba(208,169,96,.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 72px rgba(208,169,96,.025),
    0 0 0 144px rgba(208,169,96,.018),
    inset 0 0 90px rgba(208,169,96,.025);
  pointer-events: none;
}

.fvt-hero-glow {
  position: absolute;
  width: 2px;
  height: 72%;
  top: 14%;
  left: 50%;
  background: linear-gradient(180deg, transparent, rgba(228,190,116,.78), rgba(228,190,116,.22), transparent);
  box-shadow: 0 0 22px rgba(228,190,116,.38);
  opacity: .72;
}

.fvt-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 940px;
}

.fvt-hero-mark {
  width: 126px;
  display: block;
  margin: 0 auto 22px;
}

.fvt-hero-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.fvt-hero .eyebrow {
  color: #d8b978;
  margin-bottom: 18px;
}

.fvt-hero h1 {
  max-width: 920px;
  margin: 0 auto 24px;
  color: #f0e6d5;
  font-size: clamp(2.7rem, 6.5vw, 5.8rem);
  letter-spacing: .01em;
  text-shadow: 0 5px 30px rgba(0,0,0,.42);
}

.fvt-hero h1 span {
  color: #dbb974;
}

.fvt-hero-description {
  max-width: 760px;
  margin: 0 auto 32px;
  color: #ddd3c5;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.8;
}

.fvt-hero-btn {
  background: rgba(20,18,18,.70);
  border-color: rgba(209,169,95,.75);
}

.fvt-about {
  position: relative;
  padding-top: clamp(78px, 9vw, 118px);
  padding-bottom: clamp(84px, 10vw, 128px);
  background: linear-gradient(180deg, rgba(12,12,14,.70), rgba(14,15,17,.58));
}

.fvt-reading-width {
  width: min(calc(100% - 36px), 930px);
}

.fvt-about .section-title .eyebrow,
.fvt-books .section-title .eyebrow {
  color: #d5b16f;
}

.fvt-about .section-title h2,
.fvt-books .section-title h2 {
  color: #f1e8dc;
}

.fvt-about .divider,
.fvt-books .divider {
  background: linear-gradient(90deg, transparent, rgba(205,164,91,.86), transparent);
  width: 180px;
}

.fvt-about-copy {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 52px) clamp(24px, 5vw, 54px);
  border: 1px solid rgba(207,168,95,.20);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(194,149,75,.08), transparent 35%),
    rgba(13,13,15,.58);
  box-shadow: 0 28px 70px rgba(0,0,0,.20);
  backdrop-filter: blur(3px);
}

.fvt-about-copy p {
  margin: 0 0 20px;
  color: #ddd4c9;
  font-size: 1.04rem;
  line-height: 1.82;
}

.fvt-about-copy p:last-child { margin-bottom: 0; }

.fvt-about-ending {
  padding-top: 18px;
  margin-top: 28px !important;
  border-top: 1px solid rgba(207,168,95,.22);
  color: #f0e2cd !important;
  font-size: 1.12rem !important;
}

.fvt-books {
  position: relative;
  padding-top: clamp(82px, 9vw, 118px);
  padding-bottom: clamp(100px, 11vw, 148px);
  background:
    linear-gradient(180deg, rgba(15,16,18,.54), rgba(9,10,12,.80)),
    radial-gradient(circle at 50% 18%, rgba(186,147,78,.08), transparent 28%);
  border-top: 1px solid rgba(207,168,95,.13);
}

.fvt-books-heading {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.fvt-books-heading h2 {
  font-size: clamp(2.1rem, 4.5vw, 3.65rem);
}

.fvt-books-intro {
  max-width: 690px;
  margin: 18px auto 0;
  color: #d4cabc;
  font-size: 1.05rem;
}

.fvt-book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 34px);
  align-items: stretch;
}

.fvt-book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 16px 30px;
  overflow: hidden;
  border: 1px solid rgba(204,165,92,.22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(26,25,26,.83), rgba(13,14,16,.88));
  box-shadow: 0 28px 60px rgba(0,0,0,.28);
}

.fvt-book-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 18%, rgba(200,160,88,.08), transparent 31%);
}

.fvt-cover-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(218,182,114,.28);
  background: #151518;
  box-shadow: 0 18px 38px rgba(0,0,0,.34);
  aspect-ratio: 2 / 3;
}

.fvt-cover-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fvt-book-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 12px 0;
}

.fvt-book-copy .mini {
  color: #d7b16d;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fvt-book-copy h3 {
  margin: 10px 0 14px;
  color: #f0e6d7;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
}

.fvt-book-copy p {
  flex: 1;
  margin: 0;
  color: #d4cabe;
  line-height: 1.72;
}

.fvt-book-btn {
  align-self: flex-start;
  margin-top: 24px;
  background: rgba(26,22,20,.78);
  border-color: rgba(209,169,95,.66);
}

.fvt-book-future .fvt-cover-frame {
  filter: saturate(.88);
}

.fvt-book-future .fvt-book-copy h3 {
  color: #dcc39a;
}

@media (max-width: 980px) {
  .fvt-book-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin: 0 auto;
  }

  .fvt-book-card {
    display: grid;
    grid-template-columns: minmax(210px, .78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .fvt-book-copy {
    padding: 20px 22px;
  }
}

@media (max-width: 640px) {
  .fvt-world-shell {
    background-attachment: scroll;
  }

  .fvt-hero {
    min-height: 610px;
  }

  .fvt-hero h1 br {
    display: none;
  }

  .fvt-book-card {
    display: flex;
    padding: 14px 14px 28px;
  }

  .fvt-cover-frame {
    width: min(100%, 390px);
    margin: 0 auto;
  }

  .fvt-book-copy {
    padding: 26px 10px 0;
  }
}


/* =========================================================
   Version 86 — First Vow Trilogy finishing sections
   ========================================================= */
.fvt-expect {
  position: relative;
  padding-top: clamp(80px, 9vw, 116px);
  padding-bottom: clamp(92px, 10vw, 132px);
  border-top: 1px solid rgba(207,168,95,.13);
  background:
    radial-gradient(circle at 50% 18%, rgba(190,149,76,.07), transparent 28%),
    linear-gradient(180deg, rgba(10,11,13,.80), rgba(13,13,15,.70));
}

.fvt-expect-heading {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.fvt-expect .section-title .eyebrow {
  color: #d5b16f;
}

.fvt-expect .section-title h2 {
  color: #f1e8dc;
}

.fvt-expect .divider {
  width: 180px;
  background: linear-gradient(90deg, transparent, rgba(205,164,91,.86), transparent);
}

.fvt-expect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 52px;
}

.fvt-expect-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(207,168,95,.21);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(199,157,84,.08), transparent 34%),
    rgba(16,16,18,.72);
  box-shadow: 0 22px 50px rgba(0,0,0,.20);
}

.fvt-expect-card::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211,174,105,.65), transparent);
}

.fvt-expect-art {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-bottom: 1px solid rgba(207,168,95,.16);
  background: #101114;
}

.fvt-expect-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,6,8,.08), rgba(5,6,8,0) 40%, rgba(9,10,12,.16) 60%, rgba(9,10,12,.62) 100%);
  pointer-events: none;
}

.fvt-expect-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fvt-expect-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 30px;
}

.fvt-expect-symbol {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: -23px auto 16px;
  border: 1px solid rgba(211,174,105,.40);
  border-radius: 50%;
  color: #d8b875;
  background: rgba(13,13,15,.82);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
  font-size: 1rem;
}

.fvt-expect-card h3 {
  margin: 0 0 13px;
  color: #efe3d2;
  font-size: 1.32rem;
}

.fvt-expect-card p {
  margin: 0;
  color: #d1c6b8;
  line-height: 1.7;
}

.fvt-expect-romance .fvt-expect-art img { object-position: center center; }
.fvt-expect-mystery .fvt-expect-art img { object-position: center center; }
.fvt-expect-mercy .fvt-expect-art img { object-position: center center; }
.fvt-expect-story .fvt-expect-art img { object-position: center center; }

.fvt-letters-section {
  background: #f2ebdf;
}

@media (max-width: 980px) {
  .fvt-expect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .fvt-expect-grid {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }

  .fvt-expect-card {
    min-height: 0;
  }

  .fvt-expect-body {
    padding: 0 22px 28px;
  }
}


/* =========================================================
   Version 90 — Four TBTR stories in development
   ========================================================= */
.tbtr-development-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: min(100%, 980px) !important;
}

@media (max-width: 820px) {
  .tbtr-development-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 620px) !important;
  }
}

@media (max-width: 500px) {
  .tbtr-development-grid {
    grid-template-columns: 1fr !important;
    width: min(100%, 300px) !important;
  }
}


/* =========================================================
   Version 92 — Compact mobile layout pass
   Preserve the desktop visual language while reducing the
   poster-like scale of heroes, artwork, cards, and spacing.
   ========================================================= */
@media (max-width: 680px) {
  :root {
    --mobile-pad: 14px;
  }

  .wrap,
  .homepage-hero .wrap,
  .wv-hero-inner,
  .tbtr-series-hero-copy,
  .kftc-hero-copy,
  .kftc-intros-heading {
    width: min(calc(100% - 28px), var(--max-width));
  }

  body {
    font-size: 15px;
  }

  .site-header .header-inner {
    min-height: 58px;
  }

  .brand {
    font-size: .98rem;
    letter-spacing: .12em;
  }

  .nav-toggle {
    padding: 8px 12px;
    font-size: .82rem;
  }

  .section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .section-title {
    margin-bottom: 28px;
  }

  .section-title h2,
  .about-origin-copy h2,
  .outside-story-copy h2,
  .books-series-copy h2,
  .more-worlds-wrap h2,
  .tbtr-side-quest-copy h2,
  .kftc-book-copy h2,
  .contact-copy h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.05rem);
    line-height: 1.12;
  }

  .hero {
    padding: 44px 0 42px;
  }

  .hero h1,
  .books-hero h1,
  .btb-hero h1,
  .contact-page-hero h1,
  .tbtr-series-hero h1,
  .kftc-hero h1,
  .fvt-hero h1,
  .wv-hero-copy h1,
  .about-page-hero-copy h1 {
    font-size: clamp(2rem, 9vw, 2.55rem);
    line-height: 1.02;
  }

  .hero .lede,
  .btb-hero .lede,
  .contact-page-hero .lede,
  .tbtr-series-hero .lede,
  .kftc-hero .lede,
  .fvt-hero-description {
    font-size: .93rem;
    line-height: 1.58;
  }

  /* Home */
  .homepage-hero {
    min-height: 390px;
    align-items: center;
    text-align: left;
    background-image:
      linear-gradient(90deg, rgba(244,239,230,.96) 0%, rgba(244,239,230,.90) 44%, rgba(244,239,230,.56) 67%, rgba(244,239,230,.15) 100%),
      url("../images/homepage-hero.webp");
    background-position: center, 66% center;
    background-size: cover, cover;
  }

  .homepage-hero .wrap {
    text-align: left;
  }

  .homepage-hero .wrap > * {
    max-width: 72%;
    margin-left: 0;
    margin-right: 0;
  }

  .homepage-hero .tagline::after {
    left: 0;
    transform: none;
  }

  .homepage-hero .tagline {
    font-size: 1rem;
    margin-bottom: 13px;
  }

  .homepage-hero .lede {
    font-size: .91rem;
    line-height: 1.52;
    margin-bottom: 18px;
  }

  .featured-worlds .scene-art {
    height: 150px;
    min-height: 150px;
  }

  .world-copy {
    padding: 22px 20px 24px;
  }

  .world-copy h3 {
    font-size: 1.45rem;
  }

  .about-preview-grid {
    gap: 28px;
  }

  .author-photo-frame img {
    height: 265px;
  }

  /* Books */
  .books-hero {
    min-height: 290px;
    display: grid;
    place-items: center;
  }

  .books-series-card {
    gap: 22px;
  }

  .books-series-visual {
    min-height: 220px;
  }

  .books-cover,
  .books-tbtr-cover {
    width: min(46%, 165px);
  }

  .books-series-copy {
    padding: 0;
  }

  .books-current-book {
    padding: 17px;
  }

  .more-worlds-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  /* About */
  .about-page-hero {
    padding: 48px 0;
  }

  .about-page-hero-grid {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 22px;
    text-align: left;
  }

  .about-page-photo-wrap {
    width: 120px;
    margin: 0;
  }

  .about-page-photo img {
    height: 175px;
    object-position: center 25%;
  }

  .about-page-photo {
    border-radius: 48% 48% 16px 16px;
    box-shadow: 0 0 0 5px rgba(244,239,230,.86), 0 0 0 6px rgba(177,138,80,.18), 0 16px 30px rgba(33,29,32,.14);
  }

  .about-page-orbit,
  .about-page-star {
    display: none;
  }

  .about-page-hero-copy {
    margin: 0;
    text-align: left;
  }

  .about-page-hero-copy h1 {
    margin-bottom: 12px;
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .about-page-intro {
    font-size: .9rem;
    line-height: 1.5;
  }

  .about-page-divider {
    width: 115px;
    margin: 15px 0 12px;
  }

  .about-page-brandline {
    font-size: .88rem;
  }

  .about-origin-section,
  .outside-story-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  /* Behind the Books + Contact */
  .btb-hero,
  .contact-page-hero {
    min-height: 330px;
    padding: 58px 0 54px;
    display: grid;
    place-items: center;
  }

  .btb-hero-subtitle {
    font-size: 1.05rem;
  }

  .btb-hero-divider,
  .contact-divider {
    margin-top: 14px;
    margin-bottom: 16px;
  }

  .btb-desk-section,
  .contact-main-section {
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .btb-project-grid {
    gap: 20px;
  }

  .btb-project-cover {
    min-height: 150px;
  }

  /* TBTR */
  .tbtr-series-hero {
    min-height: 380px;
    padding: 48px 0 44px;
    align-items: center;
    background:
      linear-gradient(90deg, rgba(16,24,28,.76) 0%, rgba(16,24,28,.52) 45%, rgba(16,24,28,.22) 75%, rgba(16,24,28,.20) 100%),
      linear-gradient(180deg, rgba(10,15,20,.08) 0%, rgba(10,15,20,.18) 100%),
      url("../images/tbtr-series-hero.png") center center / cover no-repeat,
      #111722;
    text-align: left;
  }

  .tbtr-series-hero-copy > * {
    max-width: 72%;
  }

  .tbtr-series-hero h1 {
    margin-bottom: 0;
  }

  .tbtr-hero-divider {
    width: 125px;
    margin: 14px 0 15px;
  }

  .tbtr-about-series,
  .tbtr-choose-adventure,
  .tbtr-beyond-roll,
  .tbtr-side-quest,
  .tbtr-coming-adventures {
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .tbtr-series-emblem {
    width: min(46%, 155px);
    margin-bottom: 22px;
  }

  .tbtr-featured-adventure {
    width: 100%;
    padding: 16px;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    border-radius: 20px;
  }

  .tbtr-featured-copy {
    padding-top: 0;
  }

  .tbtr-featured-copy h3 {
    font-size: 1.5rem;
  }

  .tbtr-featured-summary {
    grid-column: 1 / -1;
  }

  .tbtr-featured-cta {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .tbtr-coming-grid {
    gap: 18px;
  }

  .tbtr-adventure-card {
    width: 100%;
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    align-items: start;
  }

  .tbtr-adventure-cover {
    height: 158px;
    object-fit: cover;
    object-position: top center;
  }

  .tbtr-adventure-card-copy {
    padding: 16px 16px 18px;
  }

  .tbtr-adventure-card h3 {
    font-size: 1.25rem;
  }

  .tbtr-adventure-card p {
    font-size: .9rem;
    line-height: 1.5;
  }

  .tbtr-development-block {
    margin-top: 48px;
  }

  .tbtr-development-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .tbtr-development-card {
    padding: 10px;
  }

  .tbtr-development-card h4 {
    margin-top: 10px;
    font-size: 1rem;
  }

  /* KFTC */
  .kftc-hero {
    min-height: 400px;
    padding: 52px 0 48px;
    background-position: 52% center;
  }

  .kftc-hero-subline {
    font-size: .72rem;
  }

  .kftc-hero-divider {
    width: 190px;
    margin: 14px auto;
  }

  .kftc-about-book,
  .kftc-character-intros,
  .kftc-companions,
  .kftc-excerpt-coming,
  .kftc-letters-section {
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .kftc-book-cover img {
    width: min(55%, 175px);
    margin-inline: auto;
  }

  .kftc-character-grid,
  .kftc-companion-grid {
    gap: 18px;
  }

  .kftc-character-card img,
  .kftc-companion-card img {
    max-height: 220px;
    object-fit: cover;
  }

  /* First Vow Book One */
  .wv-hero {
    min-height: 390px;
  }

  .wv-hero-inner {
    grid-template-columns: minmax(0, 1fr) 105px;
    text-align: left;
    gap: 18px;
    padding: 46px 0 54px;
  }

  .wv-hero-copy {
    margin: 0;
  }

  .wv-hero-cover img {
    width: 100%;
    max-width: 105px;
  }

  .wv-hero-copy .tagline {
    font-size: 1rem;
  }

  .wv-about-book,
  .wv-characters,
  .wv-world,
  .wv-inside,
  .wv-black-book {
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .wv-character-grid,
  .wv-world-grid,
  .wv-feature-grid {
    gap: 18px;
  }

  .wv-character-card img,
  .wv-world-card img,
  .wv-feature-card img {
    max-height: 220px;
    object-fit: cover;
  }

  /* First Vow Trilogy */
  .fvt-hero {
    min-height: 430px;
    padding: 64px 0 58px;
  }

  .fvt-hero-mark {
    width: 92px;
    margin-bottom: 14px;
  }

  .fvt-hero .eyebrow {
    margin-bottom: 12px;
  }

  .fvt-hero-description {
    margin-bottom: 20px;
  }

  .fvt-about,
  .fvt-books,
  .fvt-expect {
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .fvt-book-grid {
    gap: 18px;
  }

  .fvt-book-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 14px;
  }

  .fvt-cover-frame {
    width: 108px;
    margin: 0;
  }

  .fvt-book-copy {
    padding: 4px 0 0;
  }

  .fvt-book-copy h3 {
    font-size: 1.3rem;
  }

  .fvt-book-copy p {
    font-size: .9rem;
    line-height: 1.5;
  }

  .fvt-expect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
  }

  .fvt-expect-art {
    aspect-ratio: 1 / 1;
  }

  .fvt-expect-body {
    padding: 0 12px 18px;
  }

  .fvt-expect-symbol {
    width: 36px;
    height: 36px;
    margin: -18px auto 10px;
  }

  .fvt-expect-card h3 {
    font-size: 1.02rem;
    margin-bottom: 8px;
  }

  .fvt-expect-card p {
    font-size: .82rem;
    line-height: 1.45;
  }

  /* Newsletter/footer */
  .letters-section,
  .fvt-letters-section,
  .books-letters-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .letters-card {
    gap: 20px;
  }

  .letters-illustration-image {
    max-height: 205px;
    object-fit: cover;
  }

  .site-footer {
    padding-top: 38px;
    padding-bottom: 30px;
  }
}


/* =========================================================
   Version 93 — Mobile testing fixes
   Improve Books hero readability and restore stable image
   framing for WTVSB characters and KFTC companions.
   ========================================================= */
@media (max-width: 680px) {
  /* Books hero: keep the artwork visible while giving the copy
     enough parchment contrast to remain clearly readable. */
  .books-hero::before {
    background:
      radial-gradient(ellipse at center,
        rgba(248,243,233,.96) 0%,
        rgba(248,243,233,.91) 28%,
        rgba(248,243,233,.78) 48%,
        rgba(248,243,233,.48) 68%,
        rgba(248,243,233,.22) 100%),
      linear-gradient(180deg, rgba(12,10,12,.05) 0%, rgba(12,10,12,.12) 100%);
  }

  .books-hero h1 {
    color: #211d20;
    text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 14px rgba(244,239,230,.72);
  }

  .books-hero .lede {
    color: #342d2b;
    text-shadow: 0 1px 9px rgba(244,239,230,.85);
  }

  .books-hero .eyebrow {
    color: #3f6664;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
  }

  /* WTVSB character portraits: the compact pass capped the actual
     image height inside a taller art box, which caused bad crops.
     Give the portrait its own controlled mobile aspect ratio. */
  .wv-character-art,
  .nightstalker-card .wv-character-art {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .wv-character-card img,
  .wv-character-portrait {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .athleen-card .wv-character-portrait,
  .nightstalker-card .wv-character-portrait {
    object-position: center top;
  }

  /* WTVSB What You'll Find Inside: keep each artwork panel filled
     at the card's intended aspect ratio instead of capping the image
     height and shifting it within the frame on phones. */
  .wv-feature-thumb img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* KFTC Companions & Chaos: preserve the square portrait framing
     and each character's tuned object-position on small screens. */
  .kftc-companion-portrait {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .kftc-companion-card img,
  .kftc-companion-portrait img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
}

/* v95 release schedule updates */
.world-release {
  margin: 16px 0 20px !important;
  font-size: .92rem;
  line-height: 1.5 !important;
  letter-spacing: .01em;
}
.vow-world .world-release { color: #e7cfaa !important; }
.roll-world .world-release { color: #37645f !important; }
.world-release strong { font-weight: 700; }

.release-line,
.book-release-line {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.book-release-line {
  color: var(--teal);
  font-size: .78rem;
  margin: 8px 0 14px;
}
.muted-release { opacity: .72; }
.wv-release-line {
  display: inline-block;
  margin: 2px 0 18px;
  padding: 7px 12px;
  border: 1px solid rgba(213,182,124,.52);
  border-radius: 999px;
  color: #e2c58d;
  background: rgba(8,15,18,.32);
  font-size: .76rem;
}
.kftc-release-line {
  margin: 10px 0 0;
  color: #f4dfad;
  font-size: .8rem;
}

.books-coming-next {
  padding-top: 64px;
  padding-bottom: 64px;
}
.books-coming-next-wrap { max-width: 980px; }
.books-coming-next-heading { text-align: center; margin-bottom: 30px; }
.books-release-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}
.books-release-item {
  position: relative;
  padding: 28px 30px 30px;
  border: 1px solid rgba(34,91,87,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 34px rgba(48,40,34,.07);
}
.books-release-item::before {
  content: '✦';
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(178,139,72,.65);
}
.books-release-month {
  color: var(--teal);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.books-release-item h3 { margin: 8px 28px 7px 0; font-size: 1.65rem; }
.books-release-item p { margin: 0 0 16px; color: #5b5350; }
.books-release-link,
.books-current-link {
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(34,91,87,.34);
}
.books-release-link:hover,
.books-current-link:hover { border-bottom-color: currentColor; }
.books-current-link { display: inline-block; margin-top: 15px; }
.books-vow-card .books-current-link { color: #e2c58d; border-bottom-color: rgba(226,197,141,.4); }
.books-vow-card .book-release-line { color: #e2c58d; }

.tbtr-release-line { margin-top: 8px; }

@media (max-width: 720px) {
  .books-release-grid { grid-template-columns: 1fr; }
  .books-coming-next { padding-top: 48px; padding-bottom: 48px; }
  .books-release-item { padding: 24px; }
  .world-release { margin-bottom: 18px !important; }
}