/* HOW WORLD WORK — anime-inspired novel landing page */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --ink: #171321;
  --paper: #f8f3ee;
  --red: #a986e8;
  --pink: #f5cf75;
  --violet: #7973db;
  --gold: #f5cf75;
  --muted: #85808b;
  --display: 'Barlow Condensed', Impact, sans-serif;
  --body: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Top navigation and scroll position */
.scroll-progress { position: fixed; z-index: 20; inset: 0 0 auto; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--pink); }
.site-header { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; height: 76px; align-items: center; justify-content: space-between; padding: 0 5.4vw; }
.brand { font: 900 21px var(--display); letter-spacing: .04em; }
.brand span { margin-left: 6px; font: 600 9px var(--body); letter-spacing: .15em; }
.site-nav { display: flex; gap: 34px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.site-nav a, .site-footer a { transition: color .2s ease; }
.site-nav a:hover, .site-footer a:hover { color: var(--pink); }
.menu-toggle { display: none; }

/* Shared text styles */
.eyebrow { margin: 0 0 20px; font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.display-title { margin: 0; font: 800 clamp(55px, 8vw, 112px)/.82 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.display-title em { color: var(--red); font-style: normal; }
.section { position: relative; overflow: hidden; padding: 115px 10vw 130px; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--night { background: #1c1925; color: var(--paper); }
.section-index { margin: 0 0 65px; font: 800 13px var(--display); letter-spacing: .1em; }
.section-index span { margin-left: 9px; color: var(--muted); font: 600 9px var(--body); letter-spacing: .2em; }
.text-link { display: inline-flex; align-items: center; gap: 22px; margin-top: 14px; padding: 13px 0 9px; border-bottom: 1px solid currentColor; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.text-link span { color: var(--red); font-size: 17px; }

/* Opening visual */
.hero { position: relative; display: flex; min-height: 740px; height: min(100vh, 950px); align-items: center; overflow: hidden; padding: 115px 9vw 90px; background: radial-gradient(ellipse at 73% 34%, #655292 0, transparent 39%), radial-gradient(circle at 15% 18%, #ffffff1c 0 1px, transparent 2px), radial-gradient(circle at 38% 72%, #ffffff20 0 1px, transparent 2px), radial-gradient(circle at 84% 79%, #ffffff1a 0 2px, transparent 3px), var(--ink); }
.hero::after { position: absolute; right: -12vw; bottom: 105px; width: 80vw; height: 170px; transform: rotate(-13deg); background: linear-gradient(90deg, var(--violet), var(--red)); content: ''; }
.hero-copy { position: relative; z-index: 2; width: 49%; }
.hero h1 { position: relative; margin: 0; font: 900 clamp(86px, 13vw, 190px)/.72 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.hero h1 em { display: inline-block; transform: skew(-9deg); color: var(--paper); font-style: normal; }
.hero h1 span { color: var(--pink); }
.hero-caption { margin: 32px 0; font-size: 13px; line-height: 1.8; }
.circle-link { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #827b8c; border-radius: 50%; font-size: 22px; transition: .25s; }
.circle-link:hover { transform: translateY(4px); border-color: var(--pink); background: var(--pink); color: var(--ink); }
.hero-art { position: absolute; z-index: 1; top: 12%; right: 7%; width: 42%; height: 70%; }
.image-frame { position: relative; overflow: hidden; isolation: isolate; }
.image-frame img { position: absolute; z-index: 2; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; }
.image-frame.has-image img { display: block; }
.image-frame--hero { clip-path: polygon(19% 0, 100% 13%, 80% 100%, 0 78%); background: linear-gradient(145deg, #9b83d5, #c2a6ec 45%, #3b3155 46%, #20202b); }
.image-frame--hero::before { position: absolute; z-index: 1; inset: 0; background: repeating-linear-gradient(130deg, transparent 0 44px, #1713214a 45px 48px); content: ''; }
.hero-sun { position: absolute; top: 16%; right: 12%; width: 230px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); opacity: .8; filter: blur(1px); }
.anime-silhouette { position: absolute; z-index: 1; top: 22%; left: 35%; width: 150px; height: 350px; transform: rotate(15deg); }
.anime-silhouette i { position: absolute; top: 0; left: 50px; width: 67px; height: 77px; border-radius: 46% 48% 43% 42%; background: #f5d6c1; box-shadow: 14px -7px 0 #48384c; }
.anime-silhouette b { position: absolute; top: 70px; left: 42px; width: 85px; height: 160px; background: #584d72; clip-path: polygon(25% 0, 85% 6%, 100% 100%, 0 88%); }
.anime-silhouette span { position: absolute; top: 160px; left: 12px; width: 140px; height: 185px; background: #282435; clip-path: polygon(55% 0, 100% 12%, 83% 100%, 0 80%, 25% 32%); }
.vertical-caption { position: absolute; z-index: 3; top: 28%; right: 11%; writing-mode: vertical-rl; font-size: 10px; letter-spacing: .3em; }
.art-stamp { position: absolute; z-index: 3; bottom: 18%; left: 19%; transform: rotate(-12deg); font-size: 11px; letter-spacing: .18em; }
.art-stamp b { color: var(--pink); font: 800 52px var(--display); }
.hero-orbit { position: absolute; left: 49%; top: 18%; width: 430px; aspect-ratio: 1; border: 1px solid #877b98; border-radius: 50%; opacity: .45; }
.hero-orbit--two { top: 9%; left: 45%; width: 550px; }
.hero-footer { position: absolute; z-index: 3; right: 5.4vw; bottom: 28px; left: 5.4vw; display: flex; justify-content: space-between; color: #aaa3b1; font-size: 8px; letter-spacing: .22em; }

/* Intro */
.intro { min-height: 690px; margin-top: -25px; padding-top: 135px; clip-path: polygon(0 5%, 100% 0, 100% 94%, 0 100%); }
.intro-layout { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 8vw; }
.intro-copy { max-width: 370px; font-size: 13px; line-height: 1.9; }
.intro-copy .eyebrow { font-size: 9px; }
.background-note { position: absolute; right: 5%; bottom: 20px; transform: rotate(-10deg); color: #1713210e; font: 900 52px/.75 var(--display); }

/* Story card */
.story { min-height: 900px; padding-top: 145px; background: linear-gradient(160deg, #1c1925 65%, #29243a 65%); }
.story-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.story-lead { max-width: 260px; margin-bottom: 7px; color: #c4becb; font-size: 12px; line-height: 1.9; }
.chapter-card { position: relative; z-index: 1; display: grid; width: min(850px, 100%); grid-template-columns: 1fr 1fr; margin: 95px auto 0; transform: rotate(-2deg); background: #eee5e0; color: var(--ink); box-shadow: 0 25px 60px #0006; }
.image-frame--chapter { min-height: 310px; padding: 28px; background: radial-gradient(circle at 64% 35%, var(--gold) 0 12%, transparent 12.5%), linear-gradient(135deg, #b796d4, #443c55 60%, #e7838d); color: white; }
.image-frame--chapter::after { position: absolute; z-index: 1; top: -10%; left: 45%; width: 70%; height: 125%; transform: rotate(35deg); background: #17132180; content: ''; }
.art-label { position: relative; z-index: 2; font-size: 11px; letter-spacing: .2em; }
.art-question { position: absolute; z-index: 1; right: 14px; bottom: -40px; color: #ede7d7; font: 900 240px/.8 var(--display); opacity: .75; }
.sparkle { position: absolute; z-index: 2; top: 30%; right: 24%; color: var(--red); font-size: 52px; }
.chapter-copy { align-self: center; padding: 44px 42px; }
.chapter-copy .eyebrow { color: #7e786d; }
.chapter-copy h3 { margin: 0 0 16px; font: 700 32px/.95 var(--display); text-transform: uppercase; }
.chapter-copy > p:not(.eyebrow) { color: #5e5a53; font-size: 11px; line-height: 1.9; }
.story-slash { position: absolute; bottom: 30px; left: -12vw; width: 120vw; height: 100px; transform: rotate(-12deg); background: linear-gradient(90deg, var(--violet), var(--red)); opacity: .9; }

/* Character cards inspired by anime character posters */
.cast { min-height: 850px; padding-top: 135px; clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 96%); }
.cast-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.cast-heading > p { max-width: 230px; color: #706a72; font-size: 12px; line-height: 1.8; }
.character-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 70px; }
.character-card { min-width: 0; }
.portrait { position: relative; display: block; aspect-ratio: 4 / 5; }
.portrait::before { position: absolute; inset: 10% 8% 0; background: #fff; content: ''; }
.portrait--one { background: linear-gradient(150deg, #f6e8f5, #fff 65%); }
.portrait--two { background: linear-gradient(150deg, #e9e2fb, #fff 65%); }
.portrait--three { background: linear-gradient(150deg, #fde7e9, #fff 65%); }
.portrait-number { position: absolute; z-index: 3; top: 12px; left: 14px; color: var(--ink); font: 700 12px var(--display); }
.portrait-word { position: absolute; z-index: 1; top: 34%; left: 50%; width: 130%; transform: translate(-50%, -50%) rotate(-7deg); color: #ad8ab7; font: 900 clamp(36px, 5vw, 72px)/.8 var(--display); letter-spacing: -.04em; text-align: center; overflow-wrap: anywhere; }
.portrait img { z-index: 2; display: none; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.portrait.has-image img { display: block; }
.character-card h3 { margin: 18px 0 3px; font: 700 21px var(--display); text-transform: uppercase; }
.character-card > p, .helper-note { color: #777168; font-size: 10px; }
.helper-note { margin-top: 32px; letter-spacing: .05em; }

/* World section and reading link */
.world { min-height: 700px; padding-top: 145px; background: radial-gradient(ellipse at 70% 35%, #514464 0, transparent 40%), radial-gradient(circle at 15% 25%, #ffffff18 0 1px, transparent 2px), linear-gradient(115deg, #282338, #171621 60%, #2d2838); }
.world-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; }
.world-copy { position: relative; align-self: end; max-width: 370px; padding-bottom: 20px; color: #c7c1cc; font-size: 12px; line-height: 1.9; }
.world-symbol { margin-bottom: 20px; color: var(--gold); font-size: 100px; line-height: 1; opacity: .8; }
.world-ribbon { position: absolute; bottom: 62px; left: -5%; width: 110%; margin: 0; padding: 16px 0; transform: rotate(-4deg); background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-align: center; white-space: nowrap; }
.read { min-height: 630px; padding-top: 120px; }
.read-layout { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 9vw; }
.read-card { min-height: 250px; padding: 36px 34px; border: 1px solid #c6c0b6; }
.read-mark { color: var(--red); font: 900 30px var(--display); letter-spacing: -.05em; }
.read-card h3 { margin: 22px 0 5px; font: 700 21px var(--display); text-transform: uppercase; }
.read-card > p { max-width: 250px; color: #777168; font-size: 10px; line-height: 1.6; }
.button-link { display: inline-flex; align-items: center; gap: 30px; margin-top: 25px; padding: 14px 18px; background: var(--ink); color: var(--paper); font-size: 9px; font-weight: 700; letter-spacing: .15em; transition: .2s; }
.button-link:hover { background: var(--red); color: var(--ink); }
.button-link span { color: var(--pink); font-size: 15px; }
.end-note { display: flex; justify-content: space-between; margin: 105px 0 0; padding-top: 20px; border-top: 1px solid #c6c0b6; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.end-note span { color: var(--red); font: 700 25px var(--display); }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 28px 5.4vw; color: #aaa3b1; font-size: 8px; letter-spacing: .15em; }
.site-footer .brand { color: var(--paper); }
.site-footer p { margin: 0; }

/* Scroll reveal motion */
.reveal { transform: translateY(28px); opacity: 0; transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-visible { transform: translateY(0); opacity: 1; }

@media (max-width: 700px) {
  html { scroll-padding-top: 64px; }
  .site-header { height: 64px; padding: 0 6vw; }
  .menu-toggle { z-index: 12; display: grid; gap: 5px; padding: 10px; border: 0; background: transparent; }
  .menu-toggle span { display: block; width: 23px; height: 1px; background: var(--paper); }
  .site-nav { position: absolute; top: 0; right: 0; left: 0; display: flex; flex-direction: column; gap: 22px; padding: 82px 8vw 30px; transform: translateY(-120%); background: var(--ink); transition: transform .3s ease; }
  .site-nav.is-open { transform: translateY(0); }
  .hero { height: 790px; min-height: 0; align-items: flex-start; padding: 150px 8vw 80px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(83px, 23vw, 145px); }
  .hero-caption { margin: 22px 0; font-size: 11px; }
  .hero-art { top: 48%; right: 0; width: 83%; height: 43%; opacity: .9; }
  .hero::after { right: -35vw; bottom: 70px; width: 130vw; height: 95px; }
  .hero-orbit { top: 43%; left: 32%; width: 350px; }
  .hero-orbit--two { top: 38%; left: 25%; width: 440px; }
  .hero-footer { bottom: 20px; font-size: 7px; }
  .section { padding: 85px 8vw 95px; }
  .section-index { margin-bottom: 48px; }
  .intro { min-height: 770px; padding-top: 110px; }
  .intro-layout, .world-layout, .read-layout { grid-template-columns: 1fr; gap: 40px; }
  .display-title { font-size: clamp(58px, 16vw, 90px); }
  .intro-copy { max-width: 100%; font-size: 12px; }
  .background-note { font-size: 38px; }
  .story { min-height: 950px; }
  .story-heading { display: block; }
  .story-lead { margin: 28px 0 0; }
  .chapter-card { grid-template-columns: 1fr; margin-top: 60px; transform: rotate(-1deg); }
  .image-frame--chapter { min-height: 200px; }
  .chapter-copy { padding: 30px 25px; }
  .chapter-copy h3 { font-size: 29px; }
  .cast { min-height: 970px; }
  .cast-heading { display: block; }
  .cast-heading > p { margin-top: 25px; }
  .character-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
  .portrait { aspect-ratio: 4 / 5; }
  .portrait-word { font-size: clamp(48px, 15vw, 82px); }
  .world { min-height: 800px; }
  .world-symbol { font-size: 75px; }
  .world-ribbon { bottom: 40px; font-size: 9px; }
  .read { min-height: 730px; }
  .read-card { padding: 28px; }
  .end-note { margin-top: 70px; }
  .site-footer { flex-wrap: wrap; gap: 14px; padding: 24px 7vw; }
  .site-footer p { order: 3; width: 100%; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { transform: none; opacity: 1; }
}



/* Fantasy atmosphere and floating music control */
.music-toggle {
  position: fixed;
  z-index: 30;
  right: 24px;
  bottom: 24px;
  display: flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid #f5cf75a6;
  border-radius: 50%;
  background: #211b35eF;
  color: var(--gold);
  box-shadow: 0 0 24px #a986e855, inset 0 0 14px #a986e822;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .2s ease, background .2s ease;
}
.music-toggle:hover { transform: scale(1.08); background: #382c55; }
.music-icon { font-size: 23px; line-height: 1; }
.music-bars { display: flex; height: 16px; align-items: center; gap: 2px; }
.music-bars i { display: block; width: 2px; height: 5px; border-radius: 2px; background: var(--gold); }
.music-toggle.is-playing .music-bars i { animation: music-wave .7s ease-in-out infinite alternate; }
.music-toggle.is-playing .music-bars i:nth-child(2) { animation-delay: .2s; }
.music-toggle.is-playing .music-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes music-wave { to { height: 14px; } }
.world-backdrop { position: absolute; z-index: 0; inset: 0; opacity: .2; pointer-events: none; }
.world-backdrop img { display: none; width: 100%; height: 100%; object-fit: cover; }
.world-backdrop.has-image img { display: block; }
.world > .section-index, .world > .world-layout { position: relative; z-index: 1; }
.world-ribbon { z-index: 2; }

@media (max-width: 700px) {
  .music-toggle { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-bars i { animation: none; height: 8px; }
}

/* Novel catalog on the home page */
.books { min-height: 760px; padding-top: 135px; }
.books-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.books-heading > p { max-width: 245px; color: #706a72; font-size: 12px; line-height: 1.8; }
.book-card { display: grid; grid-template-columns: minmax(230px, 340px) 1fr; align-items: center; gap: clamp(38px, 8vw, 105px); width: min(900px, 100%); margin: 70px auto 0; }
.book-cover { display: grid; aspect-ratio: 4 / 5; place-items: center; overflow: hidden; background: radial-gradient(circle at 70% 22%, #f5cf75 0 8%, transparent 8.5%), linear-gradient(145deg, #9b83d5, #493b67 55%, #211b35); box-shadow: 15px 18px 0 #d5c9da; transition: transform .3s ease, box-shadow .3s ease; }
.book-cover:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 18px 23px 0 #d5c9da; }
.book-cover::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, #17132114, #17132199); content: ''; }
.book-cover img { z-index: 1; display: none; width: 100%; height: 100%; object-fit: cover; }
.book-cover.has-image img { display: block; }
.book-cover-glow { position: absolute; z-index: 1; width: 70%; aspect-ratio: 1; border: 1px solid #ffffff55; border-radius: 50%; box-shadow: 0 0 70px #f5cf7555; }
.book-cover-title { position: absolute; z-index: 3; color: white; font: 900 clamp(48px, 7vw, 82px)/.78 var(--display); letter-spacing: -.04em; text-align: center; text-shadow: 0 3px 18px #17132180; }
.book-cover-title em { color: var(--gold); font-style: normal; }
.book-info { max-width: 410px; }
.book-info .eyebrow { color: #817493; }
.book-info h3 { margin: 0 0 15px; font: 800 clamp(36px, 5vw, 58px)/.95 var(--display); text-transform: uppercase; }
.book-info > p:not(.eyebrow) { color: #68616f; font-size: 13px; line-height: 1.9; }
.book-info .button-link { margin-top: 20px; }
.books .helper-note { margin-top: 55px; }

/* Character introduction page */
.character-hero { position: relative; display: flex; min-height: 570px; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 140px 10vw 90px; background: radial-gradient(ellipse at 78% 35%, #655292 0, transparent 40%), radial-gradient(circle at 80% 20%, #ffffff24 0 1px, transparent 2px), var(--ink); }
.character-hero .display-title { position: relative; z-index: 1; font-size: clamp(82px, 13vw, 160px); }
.character-hero-copy { position: relative; z-index: 1; max-width: 350px; color: #d0c8dc; font-size: 13px; line-height: 1.8; }
.character-hero .circle-link { position: relative; z-index: 1; margin-top: 15px; color: var(--paper); }
.character-hero-sigil { position: absolute; top: 5%; right: 12%; color: #f5cf75aa; font-size: clamp(200px, 38vw, 480px); line-height: 1; animation: sigil-turn 50s linear infinite; }
@keyframes sigil-turn { to { transform: rotate(360deg); } }
.novel-character-group { padding-top: 110px; }
.novel-character-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 8vw; }
.novel-character-heading > p { max-width: 360px; color: #6e6873; font-size: 13px; line-height: 1.9; }
.novel-character-heading > p em { color: var(--ink); }
.character-profile-grid { display: grid; gap: 40px; margin-top: 75px; }
.character-profile { display: grid; grid-template-columns: minmax(230px, .8fr) 1fr; align-items: center; gap: clamp(35px, 8vw, 100px); max-width: 1000px; margin: 0 auto; }
.character-profile--reverse .profile-art { grid-column: 2; grid-row: 1; }
.character-profile--reverse .profile-copy { grid-column: 1; grid-row: 1; }
.profile-art { width: 100%; aspect-ratio: 4 / 5; }
.profile-copy { max-width: 420px; }
.profile-copy .eyebrow { margin-bottom: 12px; color: #827493; }
.profile-copy h3 { margin: 0 0 15px; font: 800 clamp(34px, 5vw, 56px)/.9 var(--display); text-transform: uppercase; }
.profile-intro { color: #69636d; font-size: 13px; line-height: 1.9; }
.profile-copy details { margin-top: 22px; border-top: 1px solid #d5cfd5; border-bottom: 1px solid #d5cfd5; }
.profile-copy summary { padding: 14px 0; cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .14em; list-style-position: inside; text-transform: uppercase; }
.profile-copy dl { display: grid; grid-template-columns: 100px 1fr; gap: 10px 18px; margin: 0; padding: 0 0 18px; font-size: 11px; line-height: 1.7; }
.profile-copy dt { color: #7b7186; font-weight: 700; }
.profile-copy dd { margin: 0; color: #69636d; }
.back-to-books { margin-top: 70px; }

@media (max-width: 700px) {
  .books { min-height: 0; }
  .books-heading { display: block; }
  .books-heading > p { margin: 25px 0 0; }
  .book-card { grid-template-columns: 1fr; gap: 42px; max-width: 390px; margin-top: 50px; }
  .book-cover { width: min(100%, 310px); justify-self: center; }
  .book-info { max-width: 100%; }
  .character-hero { min-height: 510px; padding: 125px 8vw 75px; }
  .character-hero .display-title { font-size: clamp(78px, 20vw, 125px); }
  .character-hero-sigil { top: 18%; right: -12%; font-size: 270px; }
  .novel-character-group { padding-top: 85px; }
  .novel-character-heading { grid-template-columns: 1fr; gap: 25px; }
  .novel-character-heading .display-title { font-size: clamp(70px, 19vw, 110px); }
  .character-profile-grid { gap: 55px; margin-top: 45px; }
  .character-profile { grid-template-columns: 1fr; gap: 25px; max-width: 420px; }
  .character-profile--reverse .profile-art, .character-profile--reverse .profile-copy { grid-column: auto; grid-row: auto; }
  .profile-art { width: min(100%, 330px); justify-self: center; }
  .profile-copy h3 { font-size: 42px; }
  .back-to-books { margin-top: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .character-hero-sigil { animation: none; }
}

/* Fantasy-first homepage and novel library */
.home-page { background: var(--ink); }
.home-header { position: absolute; }
.fantasy-home-hero { position: relative; display: flex; min-height: min(900px, 100vh); align-items: center; overflow: hidden; padding: 140px 9vw 100px; background: radial-gradient(ellipse at 75% 43%, #685494 0, transparent 40%), radial-gradient(circle at 20% 15%, #fff9 0 1px, transparent 2px), radial-gradient(circle at 49% 28%, #fff9 0 1px, transparent 2px), radial-gradient(circle at 87% 20%, #fff9 0 1px, transparent 2px), linear-gradient(130deg, #1b1729, #171323 70%); }
.home-stars { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(#f5cf75 1px, transparent 1.5px), radial-gradient(#e9dcff 1px, transparent 1.5px); background-position: 20px 40px, 80px 130px; background-size: 130px 150px, 180px 210px; mask-image: linear-gradient(90deg, #000, transparent 85%); }
.home-hero-copy { position: relative; z-index: 3; width: 48%; max-width: 590px; }
.home-hero-copy .eyebrow { color: #d3c2e4; }
.home-hero-copy h1 { margin: 0; font: 900 clamp(78px, 12vw, 156px)/.76 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.home-hero-copy h1 em { color: var(--gold); font-style: normal; }
.home-hero-copy > p:not(.eyebrow) { max-width: 370px; margin: 30px 0; color: #d1c9dc; font-size: 13px; line-height: 1.9; }
.home-cta { display: inline-flex; align-items: center; gap: 28px; padding: 14px 18px; border: 1px solid #e2c878aa; color: #fff7e8; font-size: 9px; font-weight: 700; letter-spacing: .16em; transition: background .2s, color .2s, transform .2s; }
.home-cta span { color: var(--gold); font-size: 16px; }
.home-cta:hover { transform: translateY(-3px); background: var(--gold); color: var(--ink); }
.home-hero-art { position: absolute; top: 8%; right: 6%; width: 48%; height: 83%; overflow: hidden; background: linear-gradient(160deg, #5a4b79 0, #252338 55%, #12131c); clip-path: polygon(20% 0, 100% 8%, 82% 100%, 0 83%); }
.home-hero-art::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(0deg, #171323aa, transparent 60%); content: ''; }
.home-hero-art img { z-index: 1; display: none; width: 100%; height: 100%; object-fit: cover; }
.home-hero-art.has-image img { display: block; }
.home-moon { position: absolute; z-index: 0; top: 14%; right: 18%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #f3d68c; box-shadow: 0 0 70px #f3d68c55; }
.home-mountain { position: absolute; z-index: 1; right: -5%; bottom: 0; width: 115%; height: 55%; clip-path: polygon(0 100%, 25% 30%, 36% 60%, 57% 9%, 75% 55%, 89% 25%, 100% 100%); }
.home-mountain--back { background: #39344f; }
.home-mountain--front { right: 5%; width: 115%; height: 39%; background: #1d2030; clip-path: polygon(0 100%, 22% 25%, 39% 68%, 64% 8%, 80% 56%, 100% 19%, 100% 100%); }
.home-castle { position: absolute; z-index: 1; right: 31%; bottom: 28%; width: 130px; height: 160px; background: #171722; clip-path: polygon(0 100%,0 30%,15% 30%,15% 9%,25% 9%,25% 30%,38% 30%,38% 0,49% 0,49% 30%,64% 30%,64% 14%,75% 14%,75% 30%,100% 30%,100% 100%); filter: drop-shadow(0 0 18px #e0bb7050); }
.home-castle i { position: absolute; bottom: 20%; width: 14px; height: 25px; background: #efc96d; }
.home-castle i:first-child { left: 25%; }.home-castle i:nth-child(2) { right: 25%; }
.home-castle b { position: absolute; bottom: 0; left: 44%; width: 18px; height: 45px; background: #efc96d; }
.home-art-caption { position: absolute; z-index: 3; right: 13%; bottom: 13%; color: #fff3d2; font-size: 8px; letter-spacing: .25em; }
.home-side-note { position: absolute; z-index: 3; top: 40%; right: 3.5%; writing-mode: vertical-rl; color: #d7cae5; font-size: 8px; letter-spacing: .24em; }
.home-footer-note { position: absolute; z-index: 3; right: 5.4vw; bottom: 25px; left: 5.4vw; display: flex; justify-content: space-between; color: #b6abc8; font-size: 8px; letter-spacing: .2em; }
.home-intro { min-height: 460px; padding-top: 95px; }
.home-intro-grid, .origin-layout { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 8vw; }
.home-intro-copy { max-width: 380px; color: #625b66; font-size: 13px; line-height: 1.9; }
.home-intro-copy .eyebrow { color: #85788d; }
.novel-library { padding-top: 115px; background: radial-gradient(ellipse at 80% 15%, #453454 0, transparent 35%), #1c1925; }
.library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }
.library-heading .display-title em { color: var(--gold); }
.library-heading > p { max-width: 230px; color: #c4baca; font-size: 12px; line-height: 1.8; }
.novel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(22px, 4vw, 55px); margin-top: 70px; }
.novel-card { min-width: 0; }
.novel-cover { position: relative; display: grid; aspect-ratio: 3 / 4; place-items: center; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, #3f345a, #241a31 55%, #11121b); box-shadow: 0 16px 45px #08070d88; transition: transform .35s ease, box-shadow .35s ease; }
.novel-card--featured .novel-cover:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 24px 50px #a52a4640; }
.novel-cover::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, #100d1a22, #120c19bb); content: ''; }
.novel-cover img { z-index: 0; display: none; width: 100%; height: 100%; object-fit: cover; }
.novel-cover.has-image img { display: block; }
.novel-cover-title { position: absolute; z-index: 3; top: 21%; left: 8%; color: #f7eee2; font: 900 clamp(31px, 4.5vw, 61px)/.83 var(--display); letter-spacing: -.02em; text-shadow: 0 3px 18px #000; }
.novel-cover-title em { color: #e85b68; font-style: normal; }
.cover-moon { position: absolute; z-index: 1; top: 11%; right: 13%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #e6d397; box-shadow: 0 0 45px #e6d39770; }
.cover-silhouette { position: absolute; z-index: 2; right: 21%; bottom: 0; width: 38%; height: 47%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #423442, #0f1018); clip-path: polygon(40% 0, 61% 0, 72% 17%, 89% 25%, 100% 100%, 0 100%, 12% 28%, 31% 17%); }
.cover-edition { position: absolute; z-index: 3; bottom: 7%; left: 8%; color: #e5d6c7; font-size: 7px; letter-spacing: .2em; }
.novel-genre { margin: 16px 0 12px; color: #e6c779; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.novel-genre i { color: #8f7da8; font-style: normal; }
.novel-meta { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid #ffffff35; color: #a99daf; font-size: 8px; letter-spacing: .13em; }
.novel-card h3 { margin: 8px 0 10px; color: #f5eee8; font: 700 clamp(24px, 3vw, 34px)/.95 var(--display); text-transform: uppercase; }
.novel-description { min-height: 62px; margin: 0; color: #c1b7c6; font-size: 11px; line-height: 1.8; }
.novel-card .text-link { color: #f1e7df; }
.novel-cover--coming { border: 1px solid #d6c48655; background: radial-gradient(ellipse at 50% 40%, #69547e, #292238 67%, #181621); }
.novel-cover--coming::before { background: linear-gradient(150deg, #211a3255, #15121dbb); }
.coming-sigil { color: #e9cc83; font-size: clamp(70px, 10vw, 130px); text-shadow: 0 0 50px #e9cc8355; }
.coming-title { position: absolute; z-index: 3; top: 30%; color: #f3e8cc; font: 900 clamp(36px, 5vw, 66px)/.8 var(--display); letter-spacing: -.03em; text-align: center; }
.coming-title em { color: #baa4d8; font-style: normal; }
.coming-label { position: absolute; z-index: 3; bottom: 8%; color: #d1c1e3; font-size: 8px; letter-spacing: .2em; }
.novel-card--coming { opacity: .82; }
.novel-card--coming .novel-genre { color: #c0aede; }
.novel-card--coming h3 { color: #e1d8e8; }
.novel-card--coming .novel-description { color: #aaa0b2; }
.novel-cover--third { background: radial-gradient(ellipse at 50% 35%, #69533e, #342b38 65%, #17151d); }
.novel-cover--third .coming-sigil { color: #e0b77a; }
.novel-cover--third .coming-title em { color: #dfb877; }
.coming-soon { display: inline-block; margin-top: 17px; color: #bdacd0; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.library-note { margin-top: 58px; color: #a69aaf; font-size: 10px; }
.home-origin { position: relative; min-height: 420px; overflow: hidden; }
.origin-sigil { position: absolute; right: 8%; bottom: -25%; color: #a986e81a; font-size: 340px; }
.origin-layout { position: relative; z-index: 1; }
.origin-copy { max-width: 360px; color: #625b66; font-size: 13px; line-height: 1.9; }
.home-cta--dark { margin-top: 15px; border-color: #514360; background: #211b2d; }
.home-cta--dark:hover { color: #211b2d; }

/* Personal origin page */
.origin-hero { position: relative; display: flex; min-height: 590px; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 140px 10vw 85px; background: radial-gradient(ellipse at 77% 36%, #59466b, transparent 42%), linear-gradient(135deg, #211a2c, #171323); }
.origin-hero .display-title { position: relative; z-index: 1; font-size: clamp(74px, 11vw, 136px); }
.origin-hero .display-title em { color: var(--gold); }
.origin-subtitle { position: relative; z-index: 1; max-width: 400px; color: #d0c6d9; font-size: 13px; line-height: 1.8; }
.origin-orb { position: absolute; right: 15%; width: 180px; aspect-ratio: 1; border: 1px solid #e4ca8b66; border-radius: 50%; box-shadow: 0 0 80px #ad8dce33; }
.origin-orb--one { top: 22%; }.origin-orb--two { top: 29%; right: 10%; width: 260px; }
.origin-reading { padding-top: 100px; }
.origin-reading-heading { max-width: 850px; margin: 0 auto 60px; }
.origin-reading-heading .eyebrow { color: #81718d; }
.origin-reading-heading .display-title { font-size: clamp(42px, 7vw, 84px); }
.origin-prose { max-width: 760px; margin: 0 auto; }
.origin-prose p { margin: 0 0 27px; color: #514a56; font-size: 14px; line-height: 2; }
.origin-prose strong { color: #34243e; }
.origin-back { margin-top: 35px; }

@media (max-width: 850px) {
  .novel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .novel-card--third { display: none; }
  .home-hero-art { right: 2%; width: 50%; }
}
@media (max-width: 700px) {
  .fantasy-home-hero { min-height: 800px; align-items: flex-start; padding: 145px 8vw 90px; }
  .home-hero-copy { width: 100%; }
  .home-hero-copy h1 { font-size: clamp(78px, 21vw, 130px); }
  .home-hero-copy > p:not(.eyebrow) { max-width: 300px; margin: 24px 0; font-size: 12px; }
  .home-hero-art { top: 43%; right: -3%; width: 88%; height: 48%; opacity: .85; }
  .home-side-note { right: 2%; top: 53%; }
  .home-footer-note { bottom: 20px; font-size: 7px; }
  .home-intro-grid, .origin-layout { grid-template-columns: 1fr; gap: 35px; }
  .home-intro { min-height: 0; }
  .novel-library { padding-top: 85px; }
  .library-heading { display: block; }
  .library-heading > p { margin-top: 23px; }
  .novel-grid { grid-template-columns: 1fr; gap: 48px; max-width: 390px; margin: 45px auto 0; }
  .novel-card--third { display: block; }
  .novel-cover { max-height: 470px; }
  .novel-cover-title { font-size: clamp(53px, 16vw, 70px); }
  .novel-card h3 { font-size: 33px; }
  .novel-description { min-height: 0; }
  .library-note { margin-top: 42px; }
  .home-origin { min-height: 0; }
  .origin-sigil { right: -20%; bottom: -16%; font-size: 250px; }
  .origin-hero { min-height: 520px; padding: 125px 8vw 70px; }
  .origin-hero .display-title { font-size: clamp(70px, 18vw, 110px); }
  .origin-orb { right: 2%; width: 140px; }.origin-orb--two { right: -4%; width: 205px; }
  .origin-reading { padding-top: 80px; }
  .origin-reading-heading { margin-bottom: 40px; }
  .origin-reading-heading .display-title { font-size: clamp(39px, 11vw, 65px); }
  .origin-prose p { font-size: 13px; line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) {
  .synopsis-page .blood-hero::before, .synopsis-page .blood-hero::after, .synopsis-page .blood-hero-mark, .synopsis-page .battle-interlude::after { animation: none; }
  .novel-cover, .blood-portrait { transition: none; }
}

/* Hover animation for The Boy Cursed by Blood book cover */
.novel-cover .novel-hover-preview { position: absolute; z-index: 4; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.novel-cover.has-image .novel-hover-preview { display: block; }
.novel-card--featured .novel-cover:hover .novel-hover-preview,
.novel-card--featured .novel-cover:focus-visible .novel-hover-preview,
.novel-card--featured .novel-cover:focus-within .novel-hover-preview { opacity: 1; }
.novel-card--featured .novel-cover:hover .novel-cover-title,
.novel-card--featured .novel-cover:hover .cover-edition,
.novel-card--featured .novel-cover:focus-visible .novel-cover-title,
.novel-card--featured .novel-cover:focus-within .novel-cover-title { opacity: 0; }
.novel-card--featured .novel-cover-title, .novel-card--featured .cover-edition { transition: opacity .25s ease; }

/* Brighter, colorful fantasy palette for the landing page */
.home-page { background: #f4efff; color: #30244f; }
.home-page .home-header { color: #30244f; }
.home-page .home-header .menu-toggle span { background: #30244f; }
.home-page .site-nav a:hover { color: #a03b9b; }
.home-page .fantasy-home-hero { background: radial-gradient(ellipse at 73% 34%, #e8c7ff 0, transparent 42%), radial-gradient(ellipse at 33% 86%, #a9f1ed 0, transparent 45%), radial-gradient(circle at 17% 19%, #bf91e7 0 2px, transparent 3px), radial-gradient(circle at 49% 28%, #d8a84d 0 2px, transparent 3px), radial-gradient(circle at 87% 20%, #a176d3 0 2px, transparent 3px), linear-gradient(130deg, #fff0df, #e9e3ff 52%, #d9f7f2); }
.home-page .home-stars { opacity: .34; background-image: radial-gradient(#9e73c9 1px, transparent 1.5px), radial-gradient(#d79b39 1px, transparent 1.5px); }
.home-page .home-hero-copy .eyebrow { color: #725c8d; }
.home-page .home-hero-copy h1 { color: #332554; text-shadow: 0 5px 24px #fff9; }
.home-page .home-hero-copy h1 em { color: #8556c2; }
.home-page .home-hero-copy > p:not(.eyebrow) { color: #594d68; }
.home-page .home-cta { border-color: #75609a; color: #34264f; background: #fff9; }
.home-page .home-cta span { color: #ab6d25; }
.home-page .home-cta:hover { background: #7e5cb7; color: white; }
.home-page .home-hero-art { background: linear-gradient(160deg, #f5c5e5 0, #aaa4e8 37%, #84c9c4 67%, #ecb67d); box-shadow: 0 24px 75px #68538c38; }
.home-page .home-hero-art::after { background: linear-gradient(0deg, #34264f55, transparent 58%); }
.home-page .home-moon { background: #fff0aa; box-shadow: 0 0 70px #fff0aa99; }
.home-page .home-mountain--back { background: linear-gradient(150deg, #a89bd7, #786fae); }
.home-page .home-mountain--front { background: linear-gradient(150deg, #638d91, #365d72); }
.home-page .home-castle { background-color: #443b68; filter: drop-shadow(0 0 18px #f6d485); }
.home-page .home-castle i, .home-page .home-castle b { background: #ffdf83; }
.home-page .home-art-caption { color: #fff7df; text-shadow: 0 2px 12px #2d234d; }
.home-page .home-side-note { color: #5a4b70; }
.home-page .home-footer-note { color: #574a70; }
.home-page .home-intro { background: linear-gradient(130deg, #fff9ed, #f5edff 58%, #e6f8f4); }
.home-page .novel-library { background: radial-gradient(ellipse at 3% 12%, #ffe3c8 0, transparent 30%), radial-gradient(ellipse at 95% 75%, #d6f7ef 0, transparent 35%), #eee8ff; color: #30244f; }
.home-page .novel-library .section-index span { color: #746a83; }
.home-page .library-heading .display-title { color: #30244f; }
.home-page .library-heading .display-title em { color: #845cb9; }
.home-page .library-heading > p { color: #625875; }
.home-page .novel-card h3 { color: #30244f; }
.home-page .novel-description { color: #665e71; }
.home-page .novel-genre { color: #79559b; }
.home-page .novel-genre i { color: #c48951; }
.home-page .novel-meta { border-color: #9d8caf66; color: #726481; }
.home-page .novel-card .text-link { color: #30244f; }
.home-page .novel-card--coming { opacity: 1; }
.home-page .novel-card--coming .novel-genre { color: #76599e; }
.home-page .novel-card--coming h3 { color: #30244f; }
.home-page .novel-card--coming .novel-description { color: #665e71; }
.home-page .novel-cover--coming { border: 1px solid #fff9; background: radial-gradient(circle at 70% 18%, #fff2ac 0 9%, transparent 9.5%), linear-gradient(145deg, #d4b8ed, #a8dcd9 55%, #f3c3aa); box-shadow: 0 16px 45px #5946762c; }
.home-page .novel-cover--coming::before { background: linear-gradient(150deg, #53416b22, #372b5455); }
.home-page .coming-sigil { color: #fff1b4; text-shadow: 0 0 38px #fff4bd; }
.home-page .coming-title { color: #fffaf2; text-shadow: 0 3px 20px #392a50a6; }
.home-page .coming-title em { color: #fff0a7; }
.home-page .coming-label { color: #fff8e9; }
.home-page .coming-soon { color: #79599c; }
.home-page .library-note { color: #716683; }
.home-page .site-footer { color: #716683; }
.home-page .site-footer .brand { color: #30244f; }

@media (prefers-reduced-motion: reduce) {
  .novel-cover .novel-hover-preview { transition: none; }
}

/* Cover art for the isekai fantasy novel */
.home-page .novel-cover--choice { border: 1px solid #fff9; background: linear-gradient(155deg, #62517e, #272238 68%, #171621); box-shadow: 0 16px 45px #5946762c; }
.home-page .novel-cover--choice::before { background: linear-gradient(180deg, #241a3433 0%, #241a3408 42%, #19121e99 100%); }
.home-page .novel-cover--choice img { object-fit: cover; }
.home-page .choice-cover-kicker { position: absolute; z-index: 3; top: 8%; color: #fff4df; font-size: 8px; font-weight: 700; letter-spacing: .2em; text-shadow: 0 2px 12px #281b38; }
.home-page .choice-cover-title { top: 15%; width: 94%; color: #fffaf2; font-size: clamp(30px, 4vw, 48px); line-height: .83; letter-spacing: -.045em; text-shadow: 0 3px 18px #24172fbb, 0 0 24px #fff5; }
.home-page .choice-cover-title em { color: #ffe29c; }
.home-page .choice-cover-label { color: #fff2dc; font-size: 7px; letter-spacing: .16em; text-shadow: 0 2px 10px #21162f; }
@media (max-width: 700px) {
  .home-page .choice-cover-title { top: 16%; font-size: clamp(36px, 10vw, 46px); }
  .home-page .choice-cover-kicker { font-size: 7px; }
}

/* Reveal the VILLAIND OR NOT hover preview cleanly */
.home-page .novel-card--featured .novel-cover--choice:hover .choice-cover-kicker,
.home-page .novel-card--featured .novel-cover--choice:hover .choice-cover-title,
.home-page .novel-card--featured .novel-cover--choice:hover .choice-cover-label,
.home-page .novel-card--featured .novel-cover--choice:focus-visible .choice-cover-kicker,
.home-page .novel-card--featured .novel-cover--choice:focus-visible .choice-cover-title,
.home-page .novel-card--featured .novel-cover--choice:focus-visible .choice-cover-label,
.home-page .novel-card--featured .novel-cover--choice:focus-within .choice-cover-kicker,
.home-page .novel-card--featured .novel-cover--choice:focus-within .choice-cover-title,
.home-page .novel-card--featured .novel-cover--choice:focus-within .choice-cover-label { opacity: 0; }
.home-page .novel-cover--choice .choice-cover-kicker,
.home-page .novel-cover--choice .choice-cover-title,
.home-page .novel-cover--choice .choice-cover-label { transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .home-page .novel-card--featured .novel-cover--choice .novel-hover-preview { display: none !important; }
}

/* Genre catalogue on the homepage */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.genre-catalog { position: relative; z-index: 2; padding: 102px 5.4vw 30px; overflow: hidden; background: linear-gradient(115deg, #fff8eb, #f2ebff 58%, #e4f7f3); color: #30244f; }
.genre-catalog::after { position: absolute; right: -70px; bottom: -140px; width: 300px; height: 300px; border: 1px solid #9674b833; border-radius: 50%; box-shadow: 0 0 0 24px #9674b80b, 0 0 0 48px #9674b809; content: ''; pointer-events: none; }
.genre-catalog-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; }
.genre-catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.genre-catalog-kicker { margin: 0 0 8px; color: #78678d; font-size: 8px; font-weight: 700; letter-spacing: .2em; }
.genre-catalog-kicker span { color: #b27b9d; }
.genre-catalog-heading h2 { margin: 0; color: #34264f; font: 800 clamp(25px, 3.1vw, 38px)/.9 var(--display); letter-spacing: -.025em; }
.genre-catalog-heading h2 em { color: #8556c2; font-style: normal; }
.genre-search { display: flex; width: min(390px, 46%); min-height: 46px; border: 1px solid #a895bd99; border-radius: 3px; background: #fff9; }
.genre-search input { min-width: 0; flex: 1; padding: 0 15px; border: 0; outline: 0; background: transparent; color: #34264f; font: 500 11px var(--body); }
.genre-search input::placeholder { color: #897e96; }
.genre-search:focus-within { border-color: #815db1; box-shadow: 0 0 0 3px #9f83c522; }
.genre-search button { display: flex; align-items: center; gap: 14px; padding: 0 15px; border: 0; background: #5e467f; color: #fffaf2; font-size: 8px; font-weight: 700; letter-spacing: .15em; cursor: pointer; transition: background .2s; }
.genre-search button:hover { background: #8a5ba9; }
.genre-search button span { color: #ffe49b; font-size: 15px; }
.genre-chip-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.genre-chip { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid #9f8cb444; border-radius: 3px; background: #fff8; color: #574a70; font-size: 9px; font-weight: 600; letter-spacing: .035em; transition: transform .2s, border-color .2s, background .2s, color .2s; }
.genre-chip span { color: #9a6ba9; font-size: 13px; }
.genre-chip:hover, .genre-chip:focus-visible { transform: translateY(-2px); border-color: #9b69b5; background: #fff; color: #563a7a; }
.genre-chip:focus-visible { outline: 2px solid #8556c2; outline-offset: 2px; }

/* Searchable genre index page */
.genre-index-page { min-height: 100vh; background: #f4efff; color: #30244f; }
.genre-index-page .genre-header { color: #fff8ef; }
.genre-index-page .genre-header .menu-toggle span { background: #fff8ef; }
.genre-index-page .site-nav a:hover { color: #f4c4dc; }
.genre-page-hero { position: relative; display: grid; min-height: 530px; grid-template-columns: minmax(0, 1fr) minmax(240px, .56fr); align-items: end; gap: 8vw; overflow: hidden; padding: 155px 10vw 85px; background: radial-gradient(ellipse at 78% 38%, #d396c3 0, transparent 35%), radial-gradient(ellipse at 14% 84%, #5b789a 0, transparent 42%), linear-gradient(130deg, #29233f, #513759 56%, #342641); color: #fff8ef; }
.genre-page-hero::before { position: absolute; right: -13%; bottom: 10%; width: 74%; height: 19%; transform: rotate(-12deg); background: linear-gradient(90deg, transparent, #f0b6d455, #d0a2ed66, transparent); clip-path: polygon(0 40%, 100% 0, 87% 60%, 20% 100%); content: ''; }
.genre-page-glow { position: absolute; top: 8%; right: 13%; width: min(35vw, 430px); aspect-ratio: 1; border: 1px solid #ffefcf4a; border-radius: 50%; box-shadow: 0 0 0 20px #ffefcf0b, 0 0 0 44px #ffefcf08, inset 0 0 100px #f5b6d41c; }
.genre-page-copy { position: relative; z-index: 1; }
.genre-back-link { display: inline-block; margin-bottom: 40px; color: #f1d6e5; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.genre-back-link:hover { color: #ffe3a3; }
.genre-page-copy .eyebrow { color: #efd6e6; }
.genre-page-copy .eyebrow span { color: #ffe3a3; }
.genre-page-copy .display-title { color: #fff8ef; font-size: clamp(72px, 12vw, 142px); }
.genre-page-copy .display-title em { color: #f4c875; }
.genre-page-description { max-width: 460px; margin: 25px 0 0; color: #e0d1e2; font-size: 12px; line-height: 1.9; }
.genre-page-search { position: relative; z-index: 2; width: 100%; max-width: 390px; justify-self: end; margin-bottom: 8px; }
.genre-page-search > label { display: block; margin-bottom: 9px; color: #e8d7e7; font-size: 8px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.genre-search-control { display: flex; min-height: 48px; border: 1px solid #f4dcb077; background: #17132355; }
.genre-search-control:focus-within { border-color: #ffe3a3; box-shadow: 0 0 0 3px #ffe3a322; }
.genre-search-control input { min-width: 0; flex: 1; padding: 0 14px; border: 0; outline: 0; background: transparent; color: #fff8ef; font: 500 11px var(--body); }
.genre-search-control input::placeholder { color: #c9b9cb; }
.genre-search-control button { width: 48px; border: 0; background: #d7a8d0; color: #30244f; font-size: 20px; cursor: pointer; transition: background .2s; }
.genre-search-control button:hover { background: #ffe3a3; }
.genre-page-index { position: absolute; right: 5.4vw; bottom: 25px; color: #d4c2d4; font-size: 8px; letter-spacing: .2em; }
.genre-results { min-height: 580px; background: radial-gradient(ellipse at 8% 20%, #fff0d8, transparent 35%), linear-gradient(130deg, #fffaf2, #f1eafa 58%, #e8f5f2); color: #30244f; }
.genre-results .section-index span { color: #756980; }
.genre-results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 52px; }
.genre-results-heading .eyebrow { color: #78678d; }
.genre-results-heading .display-title { color: #34264f; font-size: clamp(52px, 7vw, 86px); }
.genre-results-heading .display-title em { color: #8556c2; }
.genre-result-count { margin: 0 0 8px; color: #826b91; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.genre-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 250px)); justify-content: start; align-items: start; gap: clamp(22px, 3vw, 38px); }
.genre-results-grid > [hidden] { display: none !important; }
.genre-book-card { min-width: 0; animation: genre-card-enter .5s ease both; }
.genre-book-cover { position: relative; display: grid; aspect-ratio: 3 / 4; place-items: center; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, #3f345a, #241a31 55%, #11121b); box-shadow: 0 16px 45px #08070d88; transition: transform .35s ease, box-shadow .35s ease; }
.genre-book-cover::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, #100d1a22, #120c19bb); content: ''; pointer-events: none; }
.genre-book-cover::after { position: absolute; z-index: 5; inset: 0; border: 1px solid #fff8; content: ''; pointer-events: none; }
.genre-book-cover-art { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.genre-book-cover:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 24px 50px #a52a4640; }
.genre-book-cover:hover .genre-book-cover-art { transform: scale(1.035); }
.genre-book-card--blood .genre-book-cover { background: radial-gradient(ellipse at 50% 42%, #80445b, #241a2c 70%); }
.genre-book-card--blood .genre-book-cover .cover-silhouette { bottom: 0; }
.genre-book-card--choice .genre-book-cover { background: linear-gradient(160deg, #d6b8e7, #ad8bae 52%, #403451); }
.genre-book-genres { margin: 17px 0 10px; color: #8b64a4; font-size: 8px; font-weight: 700; letter-spacing: .1em; line-height: 1.8; }
.genre-book-card h3 { margin: 0 0 10px; color: #34264f; font: 700 clamp(26px, 3vw, 36px)/.95 var(--display); text-transform: uppercase; }
.genre-book-summary { min-height: 60px; margin: 0; color: #665e71; font-size: 11px; line-height: 1.85; }
.genre-book-link, .genre-bottom-link, .genre-empty-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid #8d76a4; color: #493663; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.genre-book-link:hover, .genre-bottom-link:hover, .genre-empty-link:hover { color: #a04d91; }
.genre-empty-state[hidden] { display: none !important; }
.genre-empty-state { display: grid; min-height: 390px; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 5vw; padding: clamp(24px, 5vw, 60px); background: linear-gradient(125deg, #fff 0%, #f7efff 56%, #e7f7f3 100%); box-shadow: 0 20px 55px #514b7416; }
.genre-empty-art { position: relative; display: grid; min-height: 300px; place-items: center; isolation: isolate; }
.genre-empty-orbit { position: absolute; z-index: 0; width: min(80%, 300px); aspect-ratio: 1; border: 1px solid #9f83c555; border-radius: 50%; background: radial-gradient(circle, #f5d7e899, #d8cefa55 52%, transparent 72%); box-shadow: 0 0 0 20px #9f83c510, 0 0 0 42px #9f83c509; }
.genre-empty-art img { position: relative; z-index: 1; display: block; width: min(100%, 330px); max-height: 340px; object-fit: contain; filter: drop-shadow(0 20px 25px #514b7440); }
.genre-empty-copy .eyebrow { color: #9074a6; }
.genre-empty-copy h2 { margin: 0; color: #35274f; font: 800 clamp(36px, 5vw, 64px)/.88 var(--display); letter-spacing: -.025em; }
.genre-empty-copy h2 em { color: #a65e9d; font-style: normal; }
.genre-empty-copy > p:not(.eyebrow) { max-width: 390px; color: #665e71; font-size: 12px; line-height: 1.9; }
.genre-empty-link { margin-top: 8px; }
.genre-bottom-link { margin-top: 55px; }
.genre-coming-card { min-width: 0; animation: genre-card-enter .5s ease both; }
.genre-coming-art { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(145deg, #2b2451, #815ca5 52%, #dfa8cf); box-shadow: 0 18px 45px #5946762c; }
.genre-coming-art::after { position: absolute; inset: 0; border: 1px solid #fff8; background: linear-gradient(0deg, #20152a66, transparent 42%); content: ''; pointer-events: none; }
.genre-coming-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.genre-coming-card:hover .genre-coming-art img { transform: scale(1.035); }
.genre-coming-card .genre-book-genres { color: #a477b2; }
.genre-coming-card .genre-book-genres span { padding: 0 4px; color: #c48951; }
.genre-coming-card h3 { margin: 0 0 10px; color: #34264f; font: 700 clamp(25px, 2.6vw, 32px)/.93 var(--display); }
.genre-coming-card h3 em { color: #a65e9d; font-style: normal; }
.genre-coming-copy { margin: 0; color: #665e71; font-size: 10px; line-height: 1.8; }
.genre-footer { background: #28213a; color: #cfc3d6; }
.genre-footer .brand { color: #fff8ef; }
@keyframes genre-card-enter { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 900px) {
  .genre-chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .genre-catalog-head { align-items: flex-start; flex-direction: column; }
  .genre-search { width: min(100%, 520px); }
}
@media (max-width: 700px) {
  .genre-catalog { padding: 90px 6vw 25px; }
  .genre-chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .genre-chip { min-height: 34px; padding: 0 9px; font-size: 8px; }
  .genre-page-hero { min-height: 600px; grid-template-columns: 1fr; align-content: end; gap: 30px; padding: 120px 8vw 78px; }
  .genre-page-glow { top: 13%; right: -9%; width: 65vw; }
  .genre-back-link { margin-bottom: 28px; }
  .genre-page-copy .display-title { font-size: clamp(68px, 18vw, 112px); }
  .genre-page-description { max-width: 350px; }
  .genre-page-search { max-width: 100%; justify-self: stretch; margin: 0; }
  .genre-page-index { right: 8vw; bottom: 20px; }
  .genre-results { padding-top: 85px; }
  .genre-results-heading { align-items: flex-start; flex-direction: column; margin-bottom: 38px; }
  .genre-results-heading .display-title { font-size: clamp(48px, 13vw, 70px); }
  .genre-results-grid { grid-template-columns: minmax(0, 1fr); max-width: 390px; margin: 0 auto; }
  .genre-empty-state { grid-template-columns: 1fr; gap: 10px; padding: 24px; }
  .genre-empty-art { min-height: 230px; }
  .genre-empty-art img { max-height: 250px; }
  .genre-empty-copy h2 { font-size: clamp(38px, 11vw, 58px); }
  .genre-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .genre-chip, .genre-book-cover img { transition: none; }
  .genre-book-card { animation: none; }
}

/* Keep genre-result covers and hover previews identical to the home cards */
.genre-book-card--blood .genre-book-cover { background: linear-gradient(155deg, #3f345a, #241a31 55%, #11121b); }
.genre-book-card--choice .genre-book-cover { border: 1px solid #fff9; background: linear-gradient(155deg, #62517e, #272238 68%, #171621); }
.genre-book-card--choice .genre-book-cover::before { background: linear-gradient(180deg, #241a3433 0%, #241a3408 42%, #19121e99 100%); }
.genre-book-cover .genre-book-hover-preview { position: absolute; z-index: 4; inset: 0; display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.genre-book-cover:hover .genre-book-hover-preview,
.genre-book-cover:focus-visible .genre-book-hover-preview,
.genre-book-cover:focus-within .genre-book-hover-preview { opacity: 1; }
.genre-book-cover--blood .novel-cover-title,
.genre-book-cover--blood .cover-edition,
.genre-book-cover--choice .choice-cover-kicker,
.genre-book-cover--choice .choice-cover-title,
.genre-book-cover--choice .choice-cover-label { transition: opacity .25s ease; }
.genre-book-cover--blood:hover .novel-cover-title,
.genre-book-cover--blood:hover .cover-edition,
.genre-book-cover--blood:focus-visible .novel-cover-title,
.genre-book-cover--blood:focus-visible .cover-edition,
.genre-book-cover--blood:focus-within .novel-cover-title,
.genre-book-cover--blood:focus-within .cover-edition,
.genre-book-cover--choice:hover .choice-cover-kicker,
.genre-book-cover--choice:hover .choice-cover-title,
.genre-book-cover--choice:hover .choice-cover-label,
.genre-book-cover--choice:focus-visible .choice-cover-kicker,
.genre-book-cover--choice:focus-visible .choice-cover-title,
.genre-book-cover--choice:focus-visible .choice-cover-label,
.genre-book-cover--choice:focus-within .choice-cover-kicker,
.genre-book-cover--choice:focus-within .choice-cover-title,
.genre-book-cover--choice:focus-within .choice-cover-label { opacity: 0; }
.genre-book-cover--choice .choice-cover-kicker { position: absolute; z-index: 3; top: 8%; color: #fff4df; font-size: 8px; font-weight: 700; letter-spacing: .2em; text-shadow: 0 2px 12px #281b38; }
.genre-book-cover--choice .choice-cover-title { top: 15%; width: 94%; color: #fffaf2; font-size: clamp(30px, 4vw, 48px); line-height: .83; letter-spacing: -.045em; text-shadow: 0 3px 18px #24172fbb, 0 0 24px #fff5; }
.genre-book-cover--choice .choice-cover-title em { color: #ffe29c; }
.genre-book-cover--choice .choice-cover-label { color: #fff2dc; font-size: 7px; letter-spacing: .16em; text-shadow: 0 2px 10px #21162f; }
@media (max-width: 700px) {
  .genre-book-cover--choice .choice-cover-title { top: 16%; font-size: clamp(36px, 10vw, 46px); }
  .genre-book-cover--choice .choice-cover-kicker { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .genre-book-cover { transition: none; }
  .genre-book-cover .genre-book-hover-preview { transition: none; }
}




/* Select genres first and search only after confirmation */
.genre-picker { margin: 0; }
.genre-picker-label { margin: 0 0 10px; color: #78678d; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.genre-picker-label span { padding: 0 5px; color: #a477b2; }
.genre-chip { position: relative; cursor: pointer; }
.genre-chip .genre-chip-label { color: #574a70; font-size: 9px; }
.genre-chip .genre-chip-arrow { color: #9a6ba9; font-size: 13px; }
.genre-chip input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.genre-chip:has(input:checked) { transform: translateY(-2px); border-color: #815db1; background: #5e467f; color: #fffaf2; box-shadow: 0 5px 14px #5e467f26; }
.genre-chip:has(input:checked) .genre-chip-label { color: #fffaf2; }
.genre-chip:has(input:checked) .genre-chip-arrow { color: #ffe49b; }
.genre-chip:focus-within { outline: 2px solid #8556c2; outline-offset: 2px; }
.genre-picker-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.genre-selection-status { margin: 0; color: #78678d; font-size: 9px; }
.genre-picker-actions button { display: inline-flex; min-height: 38px; align-items: center; gap: 18px; padding: 0 15px; border: 0; border-radius: 2px; background: #5e467f; color: #fffaf2; font-size: 8px; font-weight: 700; letter-spacing: .12em; cursor: pointer; transition: background .2s, transform .2s; }
.genre-picker-actions button:hover { transform: translateY(-2px); background: #8a5ba9; }
.genre-picker-actions button:disabled { transform: none; background: #b8aec3; color: #f8f3ee; cursor: not-allowed; box-shadow: none; }
.genre-picker-actions button span { color: #ffe49b; font-size: 15px; }
.book-search { display: block; height: auto; border: 0; background: transparent; }
.book-search-field { position: relative; display: flex; width: 100%; min-height: 46px; border: 1px solid #a895bd99; border-radius: 3px; background: #fff9; }
.book-search-field:focus-within { border-color: #815db1; box-shadow: 0 0 0 3px #9f83c522; }
.book-search .book-search-field input { min-width: 0; flex: 1; padding: 0 15px; border: 0; outline: 0; background: transparent; color: #34264f; font: 500 11px var(--body); }
.book-search .book-search-field input::placeholder { color: #897e96; }
.book-search .book-search-field button { display: flex; align-items: center; gap: 14px; padding: 0 15px; border: 0; background: #5e467f; color: #fffaf2; font-size: 8px; font-weight: 700; letter-spacing: .15em; cursor: pointer; transition: background .2s; }
.book-search .book-search-field button:hover { background: #8a5ba9; }
.book-search .book-search-field button span { color: #ffe49b; font-size: 15px; }
.book-suggestions { position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; left: 0; max-height: 250px; margin: 0; padding: 5px; overflow-y: auto; border: 1px solid #a895bd88; border-radius: 3px; background: #fffaf5; box-shadow: 0 16px 35px #30244f24; list-style: none; }
.book-suggestions[hidden] { display: none; }
.book-suggestion-option { display: flex; width: 100%; flex-direction: column; gap: 4px; padding: 11px 12px; border: 0; background: transparent; color: #34264f; text-align: left; cursor: pointer; }
.book-suggestion-option:hover, .book-suggestion-option:focus-visible { outline: 0; background: #f0e7f8; }
.book-suggestion-title { font-size: 11px; font-weight: 700; }
.book-suggestion-meta { color: #897e96; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.book-suggestion-empty { padding: 12px; color: #897e96; font-size: 10px; }
@media (max-width: 700px) {
  .genre-picker-label { line-height: 1.8; }
  .genre-picker-actions { align-items: flex-start; flex-direction: column; }
  .genre-picker-actions button { align-self: flex-end; }
}

/* Compact author photo in the home header */
.home-brand-group { display:flex; align-items:center; gap:15px; }
.home-header .home-author-avatar { position:relative; display:block; box-sizing:border-box; flex:0 0 42px; width:42px; min-width:42px; max-width:42px; height:42px; min-height:42px; max-height:42px; overflow:hidden; border:1px solid #d8c28b; border-radius:50%; background:#dcd2ea; box-shadow:0 0 0 3px #ffffff72,0 5px 18px #34244a22; transition:transform .2s ease,box-shadow .2s ease; }
.home-author-avatar:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 0 0 4px #ffffffa6,0 8px 22px #34244a30; }
.home-header .home-author-avatar img { position:absolute; inset:0; display:block; width:100%; min-width:0; max-width:100%; height:100%; min-height:0; max-height:100%; object-fit:cover; object-position:center 20%; }
@media(max-width:900px) {
  .home-brand-group { gap:11px; }
  .home-header .home-author-avatar { flex-basis:36px; width:36px; min-width:36px; max-width:36px; height:36px; min-height:36px; max-height:36px; }
}
@media(max-width:420px) {
  .home-brand-group { gap:8px; }
  .home-header .brand { font-size:18px; }
  .home-header .brand span { margin-left:3px; font-size:7px; }
  .home-header .home-author-avatar { flex-basis:32px; width:32px; min-width:32px; max-width:32px; height:32px; min-height:32px; max-height:32px; }
}