*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#090709;color:#e8ded7;font-family:Georgia,serif}
a{color:inherit}
.skip-link{position:absolute;top:-80px;left:12px;z-index:100;background:white;color:black;padding:12px}
.skip-link:focus{top:12px}
.site-header{height:74px;padding:0 clamp(18px,4vw,65px);display:flex;align-items:center;justify-content:space-between;background:rgba(8,6,9,.96);border-bottom:1px solid #472026;position:relative;z-index:20}
.brand{text-decoration:none;letter-spacing:3px;font-weight:bold;font-size:clamp(14px,1.6vw,20px)}
.brand span{color:#c12a39}
nav{display:flex;gap:30px}
nav a{text-decoration:none;text-transform:uppercase;font:12px Arial,sans-serif;letter-spacing:2px}
nav a:hover{color:#ff5967}
.menu-toggle{display:none}
.hero{position:relative;background:#080607}
.cover-stage{position:relative;width:100%;max-width:1600px;margin:auto;overflow:hidden;isolation:isolate;background:#080607}
.cover-art{display:block;width:100%;height:auto;position:relative;z-index:0}
.cover-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.02) 45%,rgba(0,0,0,.05) 75%,rgba(0,0,0,.6) 100%)}
.eye-light{position:absolute;z-index:1;width:3.2%;aspect-ratio:1;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,55,38,.23),rgba(190,8,15,.11) 30%,transparent 72%);mix-blend-mode:screen;filter:blur(6px);animation:eye-breathe 9s ease-in-out infinite alternate}
.eye-left{left:42%;top:35%}
.eye-right{left:57%;top:35%;animation-delay:-4s}
@keyframes eye-breathe{0%,100%{opacity:.25;transform:scale(.85)}48%{opacity:.55;transform:scale(1.1)}73%{opacity:.35;transform:scale(.95)}}
.lantern-field{position:absolute;inset:0;z-index:3;pointer-events:none}
.lantern-field span{position:absolute;left:var(--x);top:var(--y);width:4px;height:5px;border-radius:2px;background:#ffbb69;box-shadow:0 0 4px 1px rgba(255,155,50,.3),0 0 9px 2px rgba(255,90,10,.12);animation:lantern var(--duration) ease-in-out var(--delay) infinite alternate}
@keyframes lantern{0%{opacity:.18}22%{opacity:.44}43%{opacity:.28}69%{opacity:.67}84%{opacity:.35}100%{opacity:.5}}
#embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.ember{position:absolute;bottom:-20px;left:var(--x);width:var(--size);height:var(--size);border-radius:50%;background:radial-gradient(circle,#fff5b6 0%,#ffc342 32%,#ff6210 70%,#a91106 100%);box-shadow:0 0 7px 2px rgba(255,168,45,.8),0 0 17px 5px rgba(255,65,8,.38);opacity:var(--opacity);animation:ember-rise var(--duration) linear var(--delay) infinite}
@keyframes ember-rise{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}12%{opacity:var(--opacity)}85%{opacity:var(--opacity)}100%{transform:translate3d(var(--drift),-85vw,0) scale(.35);opacity:0}}
.fog{position:absolute;left:-25%;width:150%;height:20%;bottom:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(160,165,170,.13),transparent 68%);filter:blur(24px);animation:fog-drift 28s ease-in-out infinite alternate}
.fog-two{bottom:13%;opacity:.45;animation-duration:37s;animation-delay:-12s}
@keyframes fog-drift{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
.hero-bottom{text-align:center;padding:32px 16px 60px;background:linear-gradient(#12090b,#080607)}
.eyebrow{color:#d84a52;font:12px Arial,sans-serif;letter-spacing:4px}
.hero-subtitle{font-size:clamp(20px,3vw,34px);margin:15px 0 30px}
.primary-button{display:inline-block;padding:16px 28px;background:#7b1020;border:1px solid #d13b49;text-decoration:none;letter-spacing:2px;font:12px Arial,sans-serif}
.primary-button:hover{background:#a71c2e}
.content-section{padding:85px max(7%,20px);max-width:1250px;margin:auto;scroll-margin-top:30px}
.content-section h2{font-size:clamp(32px,4vw,55px);margin:12px 0 20px}
.content-section p{line-height:1.8;color:#c8bab5}
.alternate{max-width:none;background:#150d10}
.alternate>*{max-width:1075px;margin-left:auto;margin-right:auto}
.book-feature{display:flex;align-items:center;gap:45px;margin-top:35px}
.book-feature img{width:min(35%,270px);height:auto;border:1px solid #54202a;box-shadow:0 12px 45px #000}
.book-feature h3{font-size:30px}
.availability{font-style:italic;color:#b59c9b!important}
footer{display:flex;justify-content:space-between;gap:20px;padding:30px 7%;border-top:1px solid #472026;font:11px Arial,sans-serif;letter-spacing:2px;color:#a99a96}
@media(max-width:700px){
.site-header{height:65px}
.menu-toggle{display:block;background:none;color:white;border:1px solid #71404a;padding:9px;font-size:12px}
nav{display:none;position:absolute;top:65px;left:0;right:0;background:#100a0d;padding:22px;flex-direction:column}
nav.open{display:flex}
.cover-stage{width:100%}
.eye-light{filter:blur(3px)}
.lantern-field span{width:2px;height:3px}
.book-feature{flex-direction:column;align-items:flex-start}
.book-feature img{width:60%;max-width:250px}
footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.ember,.fog,.eye-light,.lantern-field span{animation:none!important}
.ember{display:none}
}

/* HOLLOWMOUTH RED EMBERS V11 */

.ember {
    background: radial-gradient(
        circle,
        #fff1c9 0%,
        #ff5637 18%,
        #ff1608 43%,
        #d90000 70%,
        #640000 100%
    ) !important;

    box-shadow:
        0 0 5px 2px rgba(255, 40, 15, .95),
        0 0 13px 4px rgba(255, 0, 0, .7),
        0 0 25px 7px rgba(190, 0, 0, .35) !important;

    filter: saturate(1.5);
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .ember {
        display: none !important;
    }
}

/* HOLLOWMOUTH WIDESCREEN IMAGE */
.cover-stage {
    max-width: none;
    width: 100%;
    aspect-ratio: 1617 / 973;
}

.cover-art {
    display: block;
    width: 100%;
    height: auto;
}

.eye-light {
    display: none;
}


/* HOLLOWMOUTH LIVING BLOOD V12 */

.living-blood {
    position: absolute;
    left: 3%;
    top: 12%;
    width: 45%;
    height: 30%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    opacity: .5;
    mix-blend-mode: screen;
}

/* Thin glossy light moving down the existing title */
.blood-sheen {
    position: absolute;
    inset: -100% 0 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 42%,
        rgba(140, 0, 0, 0) 46%,
        rgba(255, 18, 9, .12) 49%,
        rgba(255, 67, 34, .45) 50%,
        rgba(255, 10, 5, .16) 51%,
        transparent 56%
    );
    animation: blood-flow 13s ease-in-out infinite;
}

/* Gentle irregular blood-red breathing */
.blood-pulse {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 52%,
        rgba(160, 0, 0, .12),
        transparent 70%
    );
    animation: blood-heartbeat 9s ease-in-out infinite;
}

@keyframes blood-flow {
    0%, 12% {
        transform: translateY(-30%);
        opacity: 0;
    }
    28% {
        opacity: .6;
    }
    65% {
        opacity: .9;
    }
    88%, 100% {
        transform: translateY(85%);
        opacity: 0;
    }
}

@keyframes blood-heartbeat {
    0%, 100% { opacity: .2; }
    36% { opacity: .45; }
    43% { opacity: .25; }
    48% { opacity: .6; }
    53% { opacity: .3; }
    78% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .blood-sheen,
    .blood-pulse {
        animation: none !important;
        opacity: 0 !important;
    }
}


/* HOLLOWMOUTH SIGNUP V13 */

.hollowmouth-signup {
    padding: 90px 20px;
    text-align: center;
    background:
        radial-gradient(ellipse at top, #421017 0%, transparent 65%),
        linear-gradient(180deg, #100709, #080608);
    border-top: 1px solid #6e1824;
    border-bottom: 1px solid #6e1824;
}

.signup-inner {
    max-width: 720px;
    margin: 0 auto;
}

.signup-eyebrow {
    color: #e44b4b;
    font: 12px Arial, sans-serif;
    letter-spacing: 4px;
}

.hollowmouth-signup h2 {
    font-size: clamp(34px, 5vw, 58px);
    letter-spacing: 3px;
    color: #f0ded8;
    text-shadow: 0 3px 18px rgba(180, 0, 0, .45);
}

.hollowmouth-signup p {
    color: #c9b8b6;
    line-height: 1.8;
}

.signup-form {
    margin-top: 35px;
}

.signup-form label {
    display: block;
    margin-bottom: 14px;
    font: 12px Arial, sans-serif;
    letter-spacing: 3px;
    color: #e5c8c4;
}

.signup-controls {
    display: flex;
    gap: 10px;
}

.signup-controls input {
    flex: 1;
    min-width: 0;
    padding: 18px;
    border: 1px solid #79303a;
    background: #130d0f;
    color: #fff;
    font-size: 16px;
}

.signup-controls button {
    padding: 16px 22px;
    border: 1px solid #c13b45;
    background: #701622;
    color: #f4d9d9;
    letter-spacing: 1px;
    font-weight: bold;
}

.signup-controls input:disabled,
.signup-controls button:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.signup-note {
    font-size: 12px;
}

.signup-contact {
    margin-top: 25px;
    font-size: 13px;
}

.signup-contact a {
    color: #e97070;
}

@media (max-width: 600px) {
    .signup-controls {
        flex-direction: column;
    }
}

/* Prevent browser image dragging without changing artwork or effects */
.cover-art {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}


/* HOLLOWMOUTH ARTWORK NAVIGATION V14 */

/* Desktop: the artwork already contains its own visual header. */
@media (min-width: 701px) {
  .site-header {
    display: none;
  }

  .artwork-nav {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
  }

  .artwork-nav a {
    position: absolute;
    display: block;
    top: 1.5%;
    height: 5%;
    pointer-events: auto;
    border-radius: 3px;
  }

  .artwork-home  { left: 73.2%; width: 4.8%; }
  .artwork-books { left: 78.8%; width: 6.5%; }
  .artwork-music { left: 85.7%; width: 5.2%; }
  .artwork-about { left: 91.2%; width: 5.5%; }

  .artwork-nav a:hover {
    background: rgba(190, 15, 30, .12);
  }

  .artwork-nav a:focus-visible {
    outline: 2px solid #ff5967;
    outline-offset: 2px;
    background: rgba(0, 0, 0, .55);
  }
}

/* Mobile: retain the real, accessible menu. */
@media (max-width: 700px) {
  .artwork-nav {
    display: none;
  }
}