/* Rae's palette: purple, dark mauve, champagne, gold and maroon. */
:root {
  --bg: #1b1023;
  --panel: #2d1c32;
  --cream: #f5e9d7;
  --muted: #d4c0cf;
  --gold: #e2c182;
  --line: #e2c18250;
  --rose: #c997ac;
  --accent: #e2c182;
}

body {
  background:
    radial-gradient(ellipse at 95% 8%, #67325332, transparent 45%),
    radial-gradient(ellipse at 0% 55%, #54276124, transparent 45%),
    var(--bg);
}
.masthead nav { color: var(--cream); }
.brand .brand-mark { width: 48px; height: 58px; padding: 0; border: 0; border-radius: 0; flex-shrink: 0; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand { min-width: 0; white-space: normal; }
.brand > span:last-child { min-width: 0; }
.brand small { white-space: normal; }
.auth-wide { width: 100%; }
.identity-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-divider { display: flex; align-items: center; gap: 16px; margin: 32px 0 24px; color: var(--gold); font-size: 12px; letter-spacing: .08em; text-align: center; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
dialog .auth-note { font-size: 15px; line-height: 1.7; }
.passkey-list { list-style: none; margin: 24px 0; padding: 0; }
.passkey-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.passkey-list li span { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 480px) { .identity-buttons { grid-template-columns: 1fr; } }
.button.primary { background: var(--gold); color: #2b132c; }
.button:hover:not(:disabled) { background: #f0d9aa; color: #2b132c; }
::selection { background: #9b5277; color: #fff5e7; }
.hero-footnote strong { color: var(--cream); }
.manifesto-strip { color: #e2c9d7; background: #2c182d88; }

.arch {
  background: radial-gradient(ellipse at 50% 30%, #75556c 0, #422847 42%, #231326 80%);
  border-color: #c3a269;
  box-shadow: 0 15px 80px #10071399;
}
.arch-trim { border-color: #d5b78570; }
.moon-disc {
  background: radial-gradient(circle at 35% 40%, #fff0d2, #dbc18c 65%, #ab8665);
  box-shadow: 0 0 75px #e6c49144;
}
.window-bars {
  background:
    linear-gradient(90deg, transparent 49.5%, #211126 49.5%, #211126 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 44%, #211126 44%, #211126 45%, transparent 45%);
}
.mountain-back { background: #46253f; }
.mountain-front { background: #32172e; }
.branches {
  background: repeating-conic-gradient(from 25deg at 0% 100%, transparent 0deg 17deg, #1d0d25 18deg 20deg, transparent 21deg 36deg);
}
.scene-haze { background: linear-gradient(0deg, #241022e8, transparent 70%); }
.art-seal { background: #38213d; border-color: var(--gold); outline-color: #e2c18255; }
.art-caption { color: #e0c4ce; }
.still-life { border-bottom-color: #493042; }
.stack-one { background-color: #4d325b; border-color: #bd9b6c; border-left-color: #38223f; }
.stack-two { background-color: #622637; border-color: #bd9b6c; border-left-color: #401927; }
.stack-three { background-color: #50374f; border-color: #bd9b6c; border-left-color: #352035; }
.book-stack span { color: #eddbb6; }
.rose { color: #a54865; }
.glass { border-color: #e2c18290; background: linear-gradient(0deg, #842947aa, #d5ab7522); }

.book-cover {
  background: radial-gradient(ellipse at 50% 30%, #97719b88, transparent 65%), linear-gradient(150deg, #54315f, #291632);
  border-color: #d8b77b80;
}
.book-card:nth-child(4n+2) .book-cover {
  background: radial-gradient(ellipse at 50% 35%, #a05d7788, transparent 75%), #492239;
}
.book-card:nth-child(4n+3) .book-cover {
  background: radial-gradient(ellipse at 50% 35%, #9e4d6488, transparent 75%), #481c30;
}
.book-card:nth-child(4n+4) .book-cover {
  background: radial-gradient(ellipse at 50% 35%, #8b65aa88, transparent 75%), #301a45;
}
.book-cover .cover-title { color: var(--cream); }
.book-cover .cover-motif, .cover-author, .cover-imprint { color: #efd6a6; }
.invitation { background: radial-gradient(ellipse at 50% 100%, #78456855, transparent 75%), #2b192e; }
.feature { background: #241629; }
.shop-card { background: #2b1b31; }
.shop-object { background: radial-gradient(ellipse, #81527455, transparent 75%); }
.room-banner { background: radial-gradient(ellipse at 90% 0, #9a668355, transparent 75%), #2b1932; }
.room-banner.moon { background: radial-gradient(circle at 90% 15%, #bd597255, transparent 55%), #411c32; }
.room-banner.forest { background: radial-gradient(circle at 90% 15%, #9567ba55, transparent 55%), #2a183b; }
.shelf-surface {
  background: linear-gradient(0deg, #754757 0 10px, #32182d 10px 17px, #a9826155 17px 18px, transparent 18px);
}
.record-player { background: linear-gradient(140deg, #87566d, #3c213b); border-color: #cca56f; }
.record-player.boombox { background: #4a2d50; border-color: #b995aa; }
.record-player.boombox .tonearm { border-color: #b995aa; }
.record-player:before { background: repeating-radial-gradient(circle, #1a1020 0 2px, #39243f 3px 4px); border-color: #806782; }
.record-player:after { color: #3c2036; background: #e2c182; }
.record-player.boombox:after { background: repeating-radial-gradient(circle, #1a1020 0 2px, #39243f 3px 4px); border-color: #b995aa; }
.record-player.boombox:before { border-color: #b995aa; }

dialog { background: #2c1b33; }
input, textarea, select, .mono { background: #201126; border-color: #d8b77b66; }
.admin-list button { background: #35203c; }
.quiz-choice:has(input:checked) { background: #a4608540; }
.footer-bottom { color: #ccbac6; }
.footer-bottom button { color: var(--muted); }
#toast { background: #f0dfc0; color: #351b36; border-left-color: #a56c86; }
#audio-dock { background: #34203c; }

.chalice {
  position: absolute;
  right: 4px;
  bottom: -12px;
  width: 56px;
  height: 98px;
  z-index: 6;
  overflow: visible;
  filter: drop-shadow(3px 6px 5px #14091caa);
}

/* A pointed, stone-built castle window, keeping the moonlit reading alcove. */
.hero-art > .arch {
  inset: 12px 24px 42px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 100%, 0 35%, 3% 26%, 11% 17%, 25% 8%, 50% 0, 75% 8%, 89% 17%, 97% 26%, 100% 35%, 100% 100%);
}
.castle-frame {
  position: absolute;
  inset: 0 12px 35px;
  width: calc(100% - 24px);
  height: calc(100% - 35px);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px #10071677);
}
.arch > .constellation {
  inset: 0 0 auto;
  width: 100%;
  height: 70%;
  z-index: 1;
  overflow: visible;
}
.arch > .window-bars {
  background:
    linear-gradient(90deg, transparent 24.4%, #302035 24.4%, #302035 25.6%, transparent 25.6%, transparent 74.4%, #302035 74.4%, #302035 75.6%, transparent 75.6%),
    linear-gradient(0deg, transparent 44%, #302035 44%, #302035 45%, transparent 45%);
}
.dragon-flight {
  position: absolute;
  left: 50%;
  top: 110px;
  width: 106px;
  height: 70px;
  z-index: 1;
  pointer-events: none;
  animation: dragon-crossing 16s linear -8s infinite;
}
.moon-dragon { display: block; width: 100%; height: 100%; object-fit: contain; }
.art-seal {
  width: 112px;
  height: 112px;
  top: 210px;
  padding: 12px 10px;
  gap: 6px;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  transform: none;
}
.art-seal > span:first-child { max-width: 80px; font-size: 14px; text-transform: none; }
.art-seal em { font-size: 20px; line-height: 1.2; white-space: nowrap; }
.art-seal > span:last-child { font-size: 13px; line-height: 1; }
.shelf-dagger {
  position: absolute;
  left: 24px;
  bottom: -24px;
  width: 190px;
  height: 30px;
  z-index: 7;
  filter: drop-shadow(1px 3px 2px #100716aa);
}
.still-life {
  border-bottom-width: 22px;
  --stack-width: min(235px, calc(100% - 170px));
}
.hero-art .book-stack { transform: none; }
.hero-art .stack-one { left: 20px; bottom: 0; width: var(--stack-width); }
.hero-art .stack-two { left: 28px; bottom: 32px; width: calc(var(--stack-width) - 16px); }
.hero-art .stack-three { left: 38px; bottom: 64px; width: calc(var(--stack-width) - 36px); }
.book-stack span { letter-spacing: .08em; white-space: nowrap; }
.stack-three span { font-size: 10px; letter-spacing: .04em; }

/* Shared edges, predictable rhythm, and bottom-aligned card actions. */
.section, .feature-grid, .invitation {
  width: min(88%, 1088px);
  max-width: 1088px;
  margin-left: auto;
  margin-right: auto;
}
.section { padding-left: 0; padding-right: 0; }
.intro { gap: 48px; }
.intro p:not(.eyebrow) { margin-bottom: 0; }
.feature-icon { line-height: 1; height: 32px; }
.shop-card { display: flex; flex-direction: column; }
.shop-card .purchase-line { margin-top: auto; padding-top: 16px; }
.book-card { display: flex; flex-direction: column; }
.book-meta { display: flex; flex-direction: column; flex: 1; }
.book-meta .button { margin-top: auto; }
.button:hover:not(:disabled) { transform: none; }
.book-card:hover .book-cover { transform: translateY(-3px); }
.hero-art .candle-holder { right: 78px; }
@media (max-width: 720px) {
  .masthead { justify-content: center; }
  .masthead > .brand { width: 100%; justify-content: center; }
  .masthead nav { gap: 8px 20px; }
  .manifesto-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: center; }
  .manifesto-strip i { display: none; }
  .manifesto-strip span:last-child { grid-column: 1 / -1; }
  .intro { gap: 24px; }
  .art-seal { left: -4px; }
  .shelf-dagger { left: 16px; width: 155px; }
}
.candle-holder::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 145px;
  left: -36px;
  top: -53px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffd79855, #e7ac4220 40%, transparent 70%);
  pointer-events: none;
  animation: candle-glow 2.7s ease-in-out infinite;
}
.flame {
  transform-origin: 50% 100%;
  animation: candle-flicker 2.7s ease-in-out infinite;
  background: linear-gradient(25deg, #c87531, #f8be61 40%, #fff3cc 90%);
  box-shadow: 0 0 12px #ffdc9599, 0 0 32px #efa74766;
}
.flame::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 2px;
  width: 7px;
  height: 16px;
  border-radius: 80% 20% 70% 30%;
  background: #fff7db;
}
@keyframes dragon-crossing {
  0% { transform: translate(calc(-50% - 205px), 15px) rotate(-5deg) scale(.8); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(-50%, -17px) rotate(-4deg) scale(1); opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translate(calc(-50% + 205px), -42px) rotate(-5deg) scale(.8); opacity: 0; }
}
@keyframes candle-flicker {
  0%, 100% { transform: rotate(-16deg) scale(.94, 1); opacity: .96; }
  18% { transform: rotate(-7deg) scale(.82, 1.12); opacity: 1; }
  37% { transform: rotate(-22deg) scale(1.04, .88); opacity: .88; }
  58% { transform: rotate(-10deg) scale(.87, 1.16); opacity: 1; }
  79% { transform: rotate(-19deg) scale(1.02, .94); opacity: .93; }
}
@keyframes candle-glow {
  0%, 100% { opacity: .75; transform: scale(.96); }
  25%, 60% { opacity: 1; transform: scale(1.08); }
  42%, 82% { opacity: .65; transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .dragon-flight { animation: none; transform: translate(-50%, -17px); }
  .flame, .candle-holder::before { animation: none; }
}