/* Font Face Declarations */
@font-face {
    font-family: 'BrandonText';
    src: url('assets/HVD Fonts - BrandonText-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('assets/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('assets/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('assets/Lato-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('assets/Lato-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Typography — an editorial three-family system.
       --font-display  Fraunces, a high-contrast old-style serif with an optical
                       size axis; used for titles, where it reads like a book
                       jacket rather than a template.
       --font-prose    Source Serif 4, drawn for long-form reading; the memoir
                       text itself.
       --font-ui       Archivo, a tight grotesque; navigation, buttons, labels,
                       and other chrome that should stay quiet.
       The old self-hosted BrandonText/Lato files stay in each stack as the
       offline fallback. Swap any of the three here and the whole site follows. */
    --font-display: 'Fraunces', 'BrandonText', Georgia, 'Times New Roman', serif;
    --font-prose: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-ui: 'Archivo', 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Ivory & Crimson with Candlelight Gold — drawn from The Silent Wife cover art.
       --accent is the dominant accent (crimson); --gilt is the metallic secondary.
       --accent-rgb exists so translucent accents can follow the theme: every
       rgba() accent in this file is written rgba(var(--accent-rgb), <alpha>),
       and the dark-mode block below re-points it at the rose variant. */
    --accent: #8B1A1A;
    --accent-deep: #6B1013;
    --accent-rgb: 139, 26, 26;
    --accent-soft: #F3E4E0;

    --gilt: #C9962E;
    --gilt-deep: #A87B22;

    --white: #FFFFFF;
    --text-dark: #2A2426;
    --text-primary: #2A2426;
    --text-medium: #574D4B;
    --text-light: #6B615F;

    --bg-white: #FFFFFF;
    --bg-light: #F6F1EA;
    --surface-warm: #FBF7F2;
    --surface-warm-rgb: 251, 247, 242;
    --bg-tan: #F3EDE4;
    --bg-warm-tint: #FBF7F2;

    --border-light: #E6DCD0;
    --border-medium: #D6C8B8;
    --border-tan: #E6DCD0;
}

/* Brave/Chromium: clip prevents horizontal scroll; fallback to hidden for older browsers */
@supports (overflow-x: clip) {
    html, body, .elegant-background {
        overflow-x: clip;
    }
}

html {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

body {
    font-family: var(--font-prose);
    line-height: 1.6;
    color: var(--text-dark);
    background-attachment: fixed;
    font-size: 16px;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    background-color: var(--surface-warm); /* Fallback background color */
    max-width: 100vw;
    width: 100%;
}

/* Elegant static background inspired by the ivory/crimson theme */
.elegant-background {
    background: var(--surface-warm);
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

.elegant-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: var(--surface-warm);
    background-attachment: fixed;
    pointer-events: none;
}

.elegant-background::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--surface-warm);
    background-attachment: fixed;
    pointer-events: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header Styles */
.site-header {
    width: 100%;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: top 0.3s ease;
}

/* The book banner is position:fixed (60px tall) and reserves no space in the
   document flow. This padding reserves that space so the header and hero clear it,
   fixing the hero title tucking under the header on mobile. The header stays at
   top:0 in the flow directly below the banner. */
body.has-book-banner {
    padding-top: 60px;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    min-height: 180px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: 3rem;
}

.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    background: #000;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
    overflow: hidden;
}

.logo-link:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
    border-color: var(--accent-deep);
}

.logo-image {
    /* 74% keeps all text (including tagline) inside the circle without clipping */
    width: 74%;
    height: 74%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.logo-icon {
    width: 40px;
    height: 40px;
    color: var(--accent);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.logo-icon:hover {
    transform: scale(1.1);
}

.logo-icon svg {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.logo-pulse {
    animation: logoPulse 0.3s ease;
}

.logo-spin {
    animation: logoSpin 0.6s ease;
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

@keyframes logoSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-display);
}

.header-nav {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-item {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s ease;
    position: relative;
}

.nav-item:hover {
    color: var(--accent);
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.nav-item:hover::after {
    width: 100%;
}

/* Book Navigation Item */
.nav-item-book {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    font-weight: 600;
}

.nav-item-book .book-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: bookIconPulse 2s ease-in-out infinite;
}

.nav-item-book .book-nav-icon svg {
    display: block;
}

.nav-item-book:hover {
    color: var(--accent-deep);
}

.nav-item-book:hover .book-nav-icon {
    animation: bookIconBounce 0.5s ease;
}

@keyframes bookIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes bookIconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.15); }
}

/* Book Icon Animation */
book-icon {
    display: inline-block;
    vertical-align: middle;
}

book-icon svg {
    display: block;
    transition: all 0.3s ease;
}

.book-icon-animated {
    animation: bookIconFloat 3s ease-in-out infinite;
}

@keyframes bookIconFloat {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-4px) rotate(2deg); 
    }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.search-box {
    width: 200px;
    height: 40px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-box:hover {
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.search-box svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: var(--accent);
    flex-shrink: 0;
    z-index: 10;
}

.dark-mode-toggle:hover {
    border-color: var(--accent-deep);
    color: var(--accent-deep);
    transform: rotate(15deg);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}

.dark-mode-toggle .moon-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.dark-mode-toggle .sun-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

body.dark-mode .dark-mode-toggle {
    border-color: var(--accent);
    color: var(--accent);
}

body.dark-mode .dark-mode-toggle .moon-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

body.dark-mode .dark-mode-toggle .sun-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 10002;
    flex-shrink: 0;
    position: relative;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Dark Mode Styles */
body.dark-mode {
    /* Ember-black counterpart to the ivory theme. The accent shifts from deep
       crimson to a lighter rose — #8B1A1A has far too little contrast against a
       near-black background to serve as link/heading colour. */
    --accent: #E4736A;
    --accent-deep: #F09A8F;
    --accent-rgb: 228, 115, 106;
    --accent-soft: #33211F;

    --gilt: #E0B457;
    --gilt-deep: #C9962E;

    --bg-white: #16110F;
    --bg-light: #221A17;
    --text-dark: #F2E9E1;
    --text-primary: #F2E9E1;
    --text-medium: #B9ABA4;
    --text-light: #B9ABA4;
    --border-light: #3A2E2A;
    --border-medium: #4A3B36;
    --bg-tan: #221A17;
    --bg-warm-tint: #16110F;
    --surface-warm: #16110F;
    --surface-warm-rgb: 22, 17, 15;
    background-color: #16110F !important;
    color: var(--text-dark);
}

body.dark-mode .elegant-background {
    background: #16110F !important;
}

body.dark-mode .elegant-background::before {
    background: #16110F !important;
}

body.dark-mode .elegant-background::after {
    background: #16110F !important;
}

body.dark-mode .site-header {
    background: rgba(22, 17, 15, 0.95) !important;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .header-container {
    background: rgba(22, 17, 15, 0.95) !important;
}

body.dark-mode .header-nav {
    background: rgba(22, 17, 15, 0.98) !important;
}

body.dark-mode .header-nav::before {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .header-left,
body.dark-mode .header-right {
    background: transparent !important;
}

body.dark-mode .logo-link {
    background: #000 !important;
    border-color: var(--accent) !important;
}

body.dark-mode .nav-item {
    color: #F2E9E1 !important;
}

body.dark-mode .nav-item:hover {
    color: var(--accent) !important;
}

body.dark-mode .hero-content-box,
body.dark-mode .content-left {
    background: rgba(34, 26, 23, 0.9);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

body.dark-mode .footer-column {
    background: rgba(34, 26, 23, 0.5);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

body.dark-mode .site-footer {
    background: rgba(22, 17, 15, 0.95);
    border-top: 1px solid var(--border-light);
}

body.dark-mode .mobile-menu-toggle span {
    background: var(--text-dark);
}

body.dark-mode .book-banner {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
}

body.dark-mode .search-box {
    border-color: var(--accent);
    background: rgba(34, 26, 23, 0.5);
}

body.dark-mode .search-box svg {
    color: var(--accent);
}

body.dark-mode .content-section {
    background-color: var(--bg-white) !important;
}

body.dark-mode .hero-section {
    background: #16110F !important;
    background-color: #16110F !important;
}

body.dark-mode .hero-content-box {
    background: rgba(34, 26, 23, 0.95) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
    color: #F2E9E1 !important;
}

body.dark-mode .hero-title,
body.dark-mode .hero-content-box .hero-title,
body.dark-mode section.hero-section .hero-title {
    color: #F2E9E1 !important;
}

body.dark-mode .hero-description,
body.dark-mode .hero-content-box .hero-description,
body.dark-mode section.hero-section .hero-description {
    color: #B9ABA4 !important;
}

body.dark-mode .hero-value-statement,
body.dark-mode .hero-content-box .hero-value-statement,
body.dark-mode section.hero-section .hero-value-statement {
    color: #B9ABA4 !important;
}

body.dark-mode .hero-positioning {
    color: var(--accent) !important;
}

body.dark-mode .hero-newsletter-label {
    color: #F2E9E1 !important;
}

body.dark-mode .hero-newsletter-message--success {
    color: #6bcf6b !important;
}

body.dark-mode .hero-newsletter-message--error {
    color: #f08080 !important;
}

body.dark-mode .hero-newsletter-input {
    background: rgba(34, 26, 23, 0.8);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: #F2E9E1;
}

body.dark-mode .hero-newsletter {
    border-top-color: rgba(var(--accent-rgb), 0.3);
}

body.dark-mode .content-left {
    background: transparent !important;
}

body.dark-mode .content-title {
    color: var(--text-dark) !important;
}

body.dark-mode .content-text {
    color: var(--text-light) !important;
}

body.dark-mode .affiliations-section {
    background: rgba(22, 17, 15, 0.5) !important;
}

body.dark-mode .headshot-img {
    border-color: rgba(var(--accent-rgb), 0.4) !important;
}

body.dark-mode .affiliations-logos .affiliation-logo {
    opacity: 0.95;
}

body.dark-mode .content-list li {
    color: var(--text-light) !important;
}

body.dark-mode .content-image-wrapper {
    background: rgba(34, 26, 23, 0.8) !important;
}

body.dark-mode .contact-form-wrapper {
    background: rgba(34, 26, 23, 0.95) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
}

body.dark-mode .contact-form-title {
    color: var(--text-dark) !important;
}

body.dark-mode .form-label {
    color: var(--text-dark) !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: rgba(22, 17, 15, 0.8) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-dark) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--accent) !important;
    background: rgba(22, 17, 15, 0.9) !important;
}

body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .form-select {
    background: rgba(22, 17, 15, 0.8) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-dark) !important;
}

body.dark-mode .form-input:focus,
body.dark-mode .form-textarea:focus,
body.dark-mode .form-select:focus {
    border-color: var(--accent) !important;
    background: rgba(22, 17, 15, 0.9) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-dark) !important;
}

body.dark-mode p {
    color: var(--text-light) !important;
}

body.dark-mode .footer-title h2 {
    color: var(--text-dark) !important;
}

body.dark-mode .footer-text {
    color: var(--text-light) !important;
}

body.dark-mode .book-banner-text {
    color: var(--white) !important;
}

body.dark-mode .ornament-bar-separator {
    background: #16110F !important;
    background-color: #16110F !important;
    color: #F2E9E1 !important;
}

body.dark-mode .ornament-bar-separator * {
    color: inherit;
}

body.dark-mode .ornament-bar-content {
    color: #F2E9E1 !important;
}

body.dark-mode .ornament-bar-content * {
    color: #F2E9E1 !important;
}

body.dark-mode .ornament-bar-title,
body.dark-mode h2.ornament-bar-title,
body.dark-mode .ornament-bar-separator .ornament-bar-title,
body.dark-mode .ornament-bar-separator h2.ornament-bar-title,
body.dark-mode .ornament-bar-content .ornament-bar-title,
body.dark-mode .ornament-bar-content h2.ornament-bar-title,
body.dark-mode div.ornament-bar-separator h2.ornament-bar-title,
body.dark-mode div.ornament-bar-separator .ornament-bar-content h2.ornament-bar-title {
    color: #F2E9E1 !important;
    text-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.5) !important;
}

body.dark-mode .ornament-bar-decorations {
    color: var(--accent) !important;
}

body.dark-mode .ornament-bar-line {
    color: var(--accent) !important;
}

body.dark-mode .ornament-bar-decoration {
    color: var(--accent) !important;
}

body.dark-mode .hero-section::before {
    background: 
        radial-gradient(ellipse at top right, rgba(var(--accent-rgb), 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%) !important;
}

body.dark-mode .hero-section::after {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, transparent 100%) !important;
}

body.dark-mode section.hero-section {
    background: #16110F !important;
    background-color: #16110F !important;
}

body.dark-mode section.hero-section * {
    color: inherit;
}

body.dark-mode .geometric-pattern {
    opacity: 0.1 !important;
}

body.dark-mode .geometric-pattern-top-right {
    background: 
        radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(var(--accent-rgb), 0.15) 0%, transparent 50%) !important;
}

body.dark-mode .geometric-pattern-bottom-left {
    background: 
        radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%) !important;
}

body.dark-mode .feature-title {
    color: var(--text-dark) !important;
}

body.dark-mode .feature-text {
    color: var(--text-light) !important;
}

body.dark-mode .question-card {
    background: rgba(34, 26, 23, 0.9) !important;
    border: 1px solid var(--border-light) !important;
}

body.dark-mode .question-card .feature-text {
    color: var(--text-light) !important;
}

body.dark-mode .author-image {
    border: 3px solid rgba(var(--accent-rgb), 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .hero-shine-effect {
    opacity: 0.2 !important;
}

body.dark-mode .hero-shine-1 {
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.25) 0%, transparent 70%) !important;
}

body.dark-mode .hero-shine-2 {
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2) 0%, transparent 70%) !important;
}

body.dark-mode .hero-shine-3 {
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2) 0%, transparent 70%) !important;
}

body.dark-mode .book-hero-section {
    background: #16110F !important;
    background-color: #16110F !important;
}

body.dark-mode .book-hero-content {
    color: #F2E9E1 !important;
}

body.dark-mode .book-hero-content * {
    color: inherit;
}

body.dark-mode .book-title,
body.dark-mode section.book-hero-section .book-title,
body.dark-mode .book-hero-content .book-title {
    color: #F2E9E1 !important;
}

body.dark-mode .book-subtitle,
body.dark-mode section.book-hero-section .book-subtitle,
body.dark-mode .book-hero-content .book-subtitle {
    color: #B9ABA4 !important;
}

body.dark-mode .book-description,
body.dark-mode section.book-hero-section .book-description,
body.dark-mode .book-hero-content .book-description {
    color: #B9ABA4 !important;
}

body.dark-mode .book-description em {
    color: var(--accent) !important;
}

body.dark-mode .book-badge {
    background: var(--accent) !important;
    color: var(--white) !important;
}

body.dark-mode .book-features-section {
    background: var(--bg-white) !important;
}

body.dark-mode .book-features-section + .book-features-section {
    border-top: 1px solid var(--border-light) !important;
}

body.dark-mode .section-title {
    color: var(--text-dark) !important;
}

body.dark-mode .book-feature-card {
    background: rgba(34, 26, 23, 0.9) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

body.dark-mode .book-feature-card h3 {
    color: var(--text-dark) !important;
}

body.dark-mode .book-feature-card p {
    color: var(--text-light) !important;
}

body.dark-mode .book-author-section,
body.dark-mode .book-purchase-section {
    background: var(--bg-white) !important;
}

body.dark-mode .purchase-option {
    background: rgba(34, 26, 23, 0.95) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

body.dark-mode .purchase-option h3 {
    color: var(--text-dark) !important;
}

body.dark-mode .purchase-option p {
    color: var(--text-light) !important;
}

body.dark-mode .purchase-option.featured {
    border-color: var(--accent) !important;
}

/* The blanket `.purchase-option p` dark rule would flatten both of these. */
body.dark-mode .scarcity-bar {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .scarcity-count {
    color: var(--accent) !important;
}

body.dark-mode .author-info {
    background: transparent !important;
}

body.dark-mode .author-info h3 {
    color: var(--text-dark) !important;
}

body.dark-mode .author-info p {
    color: var(--text-light) !important;
}

body.dark-mode .site-footer {
    background: var(--bg-white) !important;
}

body.dark-mode .footer-column {
    background: rgba(34, 26, 23, 0.5) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
}

body.dark-mode .footer-column-title {
    color: var(--text-dark) !important;
}

body.dark-mode .footer-text {
    color: var(--text-light) !important;
}

body.dark-mode .footer-link {
    color: var(--text-light) !important;
}

body.dark-mode .footer-link:hover {
    color: var(--accent) !important;
}

body.dark-mode .footer-container {
    background: rgba(34, 26, 23, 0.9) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
}

body.dark-mode .footer-skyscrapers {
    opacity: 0.2 !important;
    filter: brightness(0.5) !important;
}

body.dark-mode .footer-icon {
    color: var(--accent) !important;
}

body.dark-mode .content-image-wrapper {
    background: rgba(34, 26, 23, 0.8) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .book-features-section:first-of-type::before {
    background: var(--accent) !important;
}

body.dark-mode .book-features-section + .book-features-section {
    border-top: 1px solid var(--border-light) !important;
}

.btn-get-started {
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 0.75rem 2rem;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-get-started:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

/* Book Header Button */
.btn-book-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    padding: 0.6rem 1.2rem;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-book-header book-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.btn-book-header book-icon svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(var(--accent-rgb), 0.3));
}

.btn-book-header:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

.btn-book-header:hover book-icon {
    transform: rotate(-5deg) scale(1.1);
}

.btn-book-header:hover book-icon svg {
    filter: drop-shadow(0 3px 6px rgba(255, 255, 255, 0.3));
}

.btn-book-header span {
    font-size: 12px;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2rem;
    overflow: hidden;
    background: transparent;
    z-index: 1;
}

/* Elegant Hero Shine Effects */
.hero-shine-effect {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: shineFloat 8s ease-in-out infinite;
}

.hero-shine-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.4) 0%, transparent 70%);
    top: -100px;
    right: 10%;
    animation-delay: 0s;
}

.hero-shine-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--surface-warm-rgb), 0.5) 0%, transparent 70%);
    bottom: -50px;
    left: 15%;
    animation-delay: 2s;
}

.hero-shine-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3) 0%, transparent 70%);
    top: 30%;
    left: 5%;
    animation-delay: 4s;
}

@keyframes shineFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
        opacity: 0.4;
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
        opacity: 0.25;
    }
}

/* Additional Elegant Accents */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at top right, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(var(--surface-warm-rgb), 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 5%;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, transparent 100%);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: gentlePulse 6s ease-in-out infinite;
}

@keyframes gentlePulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
}

.hero-content-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-family: var(--font-display);
    transition: opacity 0.5s ease, transform 0.5s ease;
    min-height: 60px;
}

.hero-description {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    transition: opacity 0.5s ease, transform 0.5s ease;
    font-weight: 500;
}

.hero-value-statement {
    font-size: 16px;
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    font-style: italic;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn-hero-primary {
    background: var(--accent);
    color: var(--white);
}

.btn-hero-secondary {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
}

.btn-hero-secondary:hover {
    background: var(--accent);
    color: var(--white);
}


.btn-hero {
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 1rem 3rem;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-hero:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

a.btn-hero {
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

/* Homepage hero - book-focused (audit) */
.hero-section-book .hero-content-book {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-book-cover-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-new-book-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
    /* Anchored at left:50% with shrink-to-fit width, so only half the container
       width is available to it. Without nowrap it broke onto two lines on
       phones (57px tall instead of 28px) and sat across the cover artwork. */
    white-space: nowrap;
}

.hero-book-cover {
    max-width: 100%;
    width: 280px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.hero-content-box-book {
    text-align: left;
    max-width: none;
}

.hero-content-box-book .hero-title {
    font-size: 38px;
    margin-bottom: 0.75rem;
}

.hero-positioning {
    font-size: 20px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.hero-content-box-book .hero-description {
    margin-bottom: 1.5rem;
}

.hero-content-box-book .hero-cta-buttons {
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.hero-newsletter {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--accent-rgb), 0.3);
}

.hero-newsletter-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.hero-newsletter-message {
    font-size: 14px;
    margin-top: 0.75rem;
    min-height: 1.25em;
}

.hero-newsletter-message--success {
    color: #0d6b0d;
}

.hero-newsletter-message--error {
    color: #c00;
}

.hero-newsletter-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hero-newsletter-input {
    flex: 1;
    min-width: 180px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-light);
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
}

.hero-newsletter-input:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-hero-newsletter {
    padding: 0.75rem 1.5rem;
    font-size: 14px;
}

@media (max-width: 768px) {
    .hero-section-book .hero-content-book {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    .hero-content-box-book {
        text-align: center;
    }
    .hero-content-box-book .hero-cta-buttons {
        justify-content: center;
    }
    .hero-book-cover {
        width: 220px;
    }
    /* The banner is position:fixed with a hard 60px height, and body padding-top
       reserves exactly 60px to match. On phones the text wraps to two lines and
       overflowed that box, painting over the header and hero. Shrink it to fit
       one or two compact lines and let the height grow; script.js measures the
       real height and syncs body padding so nothing is ever hidden beneath it. */
    .book-banner {
        height: auto;
        min-height: 56px;
        padding: 0.55rem 2.75rem 0.55rem 1rem;
    }
    .book-banner-content {
        gap: 0.5rem;
    }
    .book-banner-text {
        font-size: 12.5px;
        line-height: 1.3;
    }
    .book-banner-icon svg {
        width: 20px;
        height: 20px;
    }
    .hero-new-book-badge {
        font-size: 11px;
        padding: 0.28rem 0.7rem;
        letter-spacing: 0.5px;
        top: -12px;
    }
    .hero-newsletter-form {
        flex-direction: column;
    }
    .hero-newsletter-input {
        min-width: 100%;
    }
}

/* Ripple Effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Floating Animation */
@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Smooth Transitions */
.content-image-wrapper,
.hero-content-box,
.footer-column {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-image-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

/* Professional Hover Effects */
.nav-item,
.footer-column {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.footer-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.2);
}

/* Image Loading Animation */
.content-image {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.content-image:hover {
    transform: scale(1.02);
}

/* About page: content image slideshow */
.content-image-wrapper.content-slideshow-wrapper {
    border-radius: 12px;
    width: 440px;
    height: 560px;
    padding: 0;
}

.content-slideshow-wrapper {
    overflow: hidden;
    position: relative;
}

.content-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.content-slideshow-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
}

.content-slideshow .content-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    /* Override the circular .content-image radius: the carousel is a rounded
       rectangle (clipped by the wrapper), not an ellipse. */
    border-radius: 0;
}

.content-slideshow-wrapper .content-slideshow-track .content-slide {
    min-height: 100%;
    height: 100%;
}

.slideshow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.9);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, opacity 0.3s ease;
    padding: 0;
    line-height: 1;
}

.slideshow-btn:hover {
    background: var(--accent-deep);
}

.slideshow-prev {
    left: 8px;
}

.slideshow-next {
    right: 8px;
}

.slideshow-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    position: relative;
    z-index: 2;
}

.slideshow-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
}

.slideshow-dots .dot.active {
    background: var(--accent);
}

/* Headshot thumbnails (About) – clickable to change slideshow */
.headshot-thumb {
    display: inline-block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    background: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.headshot-thumb:hover,
.headshot-thumb.active {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

.headshot-thumb .headshot-img {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    pointer-events: none;
}

/* About: Tagline, Headshots, Affiliations (AuditChanges assets) */
.content-container-narrow {
    max-width: 700px;
    text-align: center;
}

.content-section-tagline {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.tagline-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.headshots-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.headshot-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.headshot-img:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(var(--accent-rgb), 0.2);
}

.affiliations-section {
    background: rgba(255, 255, 255, 0.5);
}

/* Logo-strip sections stack heading -> intro -> logos in one column
   (override the default 2-col .content-container grid so the intro sits
   directly under the title, not beside it). */
.affiliations-section .content-container {
    display: block;
    text-align: center;
}

.content-title-center {
    text-align: center;
    margin-bottom: 0.5rem;
}

.affiliations-home {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.affiliations-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

/* Constrain logo size for all browsers (Brave/Chromium can show intrinsic size otherwise) */
.affiliations-logos .affiliation-logo {
    display: block;
    width: 140px;
    height: 56px;
    max-width: 140px;
    max-height: 56px;
    min-width: 0;
    -webkit-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
    filter: grayscale(0.2);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.affiliations-logos .affiliation-logo:hover {
    opacity: 1;
}

.press-hits-logos .press-hit-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    border: 1px solid var(--accent-deep);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.press-hits-logos .press-hit-item:hover {
    background: rgba(var(--accent-rgb), 0.1);
}
.press-hits-logos .press-hit-image {
    display: block;
    max-width: 200px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}
.press-hit-label { font-weight: 600; }
.press-hit-date { font-size: 0.9rem; color: var(--text-light); margin-top: 0.25rem; }

/* Recent publications: uniform "as featured in" logo wall (each links to its article) */
.publication-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto 2.5rem;
}
.publication-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    padding: 1rem;
    border: 1px solid var(--accent-deep);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.publication-item:hover {
    background: rgba(var(--accent-rgb), 0.1);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* White plate keeps dark/transparent brand marks legible in both light and dark mode */
.publication-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    padding: 0.5rem;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.publication-logo {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.publication-name {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
}

/* Book: Sample chapter section (Untitled design + docx download) */
.book-sample-section {
    text-align: center;
}

.book-sample-visual {
    max-width: 280px;
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
}

.btn-download-sample {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.book-sample-form-wrap {
    max-width: 480px;
    margin: 0 auto 0;
}

.book-sample-newsletter-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.book-sample-newsletter-form .form-input.book-sample-email {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}

.book-sample-message {
    margin-top: 0.75rem;
    font-size: 14px;
    min-height: 1.25em;
}

.book-sample-message--success {
    color: var(--accent-deep);
}

.book-sample-message--error {
    color: #c0392b;
}

.book-sample-success-wrap {
    margin-top: 0.5rem;
}

/* Media page: Press kit form */
.press-kit-form-wrap {
    margin-top: 1rem;
}

.press-kit-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.press-kit-form .form-input.press-kit-email {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}

.press-kit-message {
    margin-top: 0.75rem;
    font-size: 14px;
    min-height: 1.25em;
}

.press-kit-message--error {
    color: #c0392b;
}

.content-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.content-link:hover {
    text-decoration: underline;
}

/* Media page: Media inquiry form */
.media-inquiry-form {
    max-width: 560px;
    margin: 0 auto;
}

.media-inquiry-message {
    margin-top: 1rem;
    font-size: 14px;
    min-height: 1.25em;
}

.media-inquiry-message--success {
    color: var(--accent-deep);
    font-weight: 600;
}

.media-inquiry-message--error {
    color: #c0392b;
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Professional Card Effects */
.hero-content-box {
    transition: all 0.3s ease;
}

.hero-content-box:hover {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

/* Navbar Glass Effect */
.site-header {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
}

/* Button Hover Enhancements */
.btn-hero,
.btn-content,
.btn-get-started {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-hero:hover,
.btn-content:hover,
.btn-get-started:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.4);
}

/* Footer Icon Animations */
.footer-icon {
    transition: all 0.3s ease;
}

.footer-icon:hover {
    transform: scale(1.1) rotate(5deg);
    color: var(--accent);
}

/* Content Text Animations */
.content-text {
    transition: opacity 0.3s ease;
}

.content-text:hover {
    opacity: 0.9;
}

/* Book Banner */
.book-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--white);
    padding: 1rem 2rem;
    z-index: 10000;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
    animation: slideDown 0.5s ease-out;
    transition: transform 0.3s ease;
    height: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.book-banner:hover {
    transform: translateY(2px);
    box-shadow: 0 6px 25px rgba(var(--accent-rgb), 0.5);
}

.book-banner-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

.book-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: bounce 2s infinite;
}

.book-banner-icon svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(var(--accent-rgb), 0.3));
}

.book-banner-text {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.book-banner-text strong {
    font-weight: 700;
    text-decoration: underline;
}

.book-banner-close {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem;
    transition: transform 0.2s ease;
}

.book-banner-close:hover {
    transform: scale(1.2);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Book Page Styles */
.book-hero-section {
    padding: 1.5rem 2rem;
    min-height: 0;
    display: flex;
    align-items: center;
    transition: background 0.1s ease;
    position: relative;
    background: transparent;
    overflow: hidden;
}

.book-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.book-hero-content {
    text-align: left;
    position: relative;
    z-index: 2;
}

.book-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.book-title {
    font-size: 56px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.2;
    font-family: var(--font-display);
}

.book-subtitle {
    font-size: 24px;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-family: var(--font-ui);
}

.book-description {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    max-width: 100%;
}

.book-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 2rem;
}

.book-actions-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent);
    margin: 0 0 0.5rem;
}

.book-actions-also {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-light);
    margin: 0.75rem 0 0.25rem;
}

.book-actions-other {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.btn-book-sm {
    padding: 0.55rem 1.1rem !important;
    font-size: 13px !important;
}

.btn-book-primary,
.btn-book-secondary {
    padding: 1rem 2.5rem;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-ui);
}

.btn-book-primary {
    background: var(--accent);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.btn-book-primary:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

.btn-book-secondary {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    position: relative;
    overflow: hidden;
}

.btn-book-secondary:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

.book-cover-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.book-cover {
    position: relative;
    perspective: 1000px;
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.book-cover-image {
    width: auto;
    max-width: 350px !important;
    max-height: 500px !important;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    display: block;
    margin: 0 auto;
}

.book-cover:hover .book-cover-image {
    transform: rotateY(-5deg) scale(1.02);
}

.book-cover-glow {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3) 0%, transparent 70%);
    border-radius: 8px;
    z-index: -1;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

.book-features-section {
    padding: 5rem 2rem;
    background: var(--surface-warm);
    position: relative;
}

.book-features-section:first-of-type {
    padding-top: 6rem;
}

.book-features-section + .book-features-section {
    border-top: 1px solid var(--border-light);
    padding-top: 6rem;
    margin-top: 0;
}

.book-features-section:first-of-type::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: #4A3B36;
    margin: 0 auto 4rem;
    position: relative;
    top: 0;
}

.book-author-section,
.book-purchase-section {
    padding: 6rem 2rem;
    transition: background 0.1s ease;
}

.book-features-container,
.book-author-container,
.book-purchase-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    color: #16110F;
    text-align: center;
    margin-bottom: 4rem;
    font-family: var(--font-ui);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.book-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .book-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .book-features-grid {
        grid-template-columns: 1fr;
    }
    .book-sample-newsletter-form {
        flex-direction: column;
    }
    .book-sample-newsletter-form .form-input.book-sample-email {
        max-width: 100%;
    }
    .press-kit-form {
        flex-direction: column;
    }
    .press-kit-form .form-input.press-kit-email {
        max-width: 100%;
    }
}

.book-feature-card {
    background: #FFFFFF;
    padding: 2.5rem 2rem;
    border-radius: 4px;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
}

.book-feature-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: #D8CCC4;
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 20px;
    font-weight: 600;
    color: #16110F;
    margin-bottom: 0.75rem;
    font-family: var(--font-ui);
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.feature-text {
    font-size: 15px;
    color: #666666;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--font-ui);
    margin: 0;
}

/* Question cards without titles */
.question-card {
    padding: 2rem;
    justify-content: center;
    text-align: center;
}

.question-card .feature-text {
    font-size: 16px;
    color: #4A3B36;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.book-author-container {
    max-width: 1000px;
}

.author-info {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    align-items: center;
}

.author-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--accent);
    box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.3);
}

.author-name {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
}

.author-title {
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.author-bio {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.8;
}

.purchase-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.purchase-option {
    background: rgba(255, 255, 255, 0.95);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.purchase-option.featured {
    border-color: var(--accent);
    transform: scale(1.05);
}

.purchase-option:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(var(--accent-rgb), 0.3);
}

.purchase-option.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

/* The same bundle tile, sitting in the hero beside the buy button. It keeps
   the tile's look but drops the grid sizing: the hero column is narrow and a
   full-size card would push the cover off the fold. */
.book-actions-bundle {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: left;
    margin-top: 1.5rem;
    transform: none;
}

.book-actions-bundle:hover,
.book-actions-bundle.featured:hover {
    transform: translateY(-4px);
}

.book-actions-bundle .featured-badge {
    position: static;
    display: inline-block;
    transform: none;
    margin-bottom: 0.75rem;
    padding: 0.35rem 1rem;
    font-size: 11px;
}

.book-actions-bundle .option-title {
    font-size: 20px;
    margin-bottom: 0.5rem;
}

.book-actions-bundle .feature-text {
    font-size: 14px;
    margin-bottom: 1rem;
}

.book-actions-bundle .btn-purchase {
    padding: 0.8rem 1.5rem;
    font-size: 14px;
}

.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== Signed-edition scarcity =====
   The count is the reason this tile converts, so it is set as a figure rather
   than buried in a sentence, with a bar underneath showing how much of the run
   is already claimed. Restrained on purpose: this is a memoir about a death,
   and a flashing countdown would cheapen it. */
.scarcity-line {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--text-dark);
    margin: 0 0 0.6rem;
    line-height: 1.4;
}

.scarcity-count {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-right: 0.15rem;
}

/* Down to the last few: the number deepens rather than shouts. */
.scarcity-line.is-scarce .scarcity-count {
    color: var(--accent-deep);
}

.scarcity-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-light);
    overflow: hidden;
    margin: 0 0 0.6rem;
}

.scarcity-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.6s ease;
}

.scarcity-fine {
    font-family: var(--font-ui);
    font-size: 12px;
    font-style: italic;
    color: var(--text-light);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* In the hero the tile is tighter, so the figure steps down to sit level with
   the copy around it. */
.book-actions-bundle .scarcity-count {
    font-size: 24px;
}

.book-actions-bundle .scarcity-fine {
    margin-bottom: 1rem;
}

.option-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-family: var(--font-display);
}

.option-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-family: var(--font-display);
}

.option-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    text-align: left;
}

.option-features li {
    padding: 0.75rem 0;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-light);
}

.option-features li:last-child {
    border-bottom: none;
}

.option-features li:before {
    content: '✓';
    color: var(--accent);
    font-weight: bold;
    margin-right: 0.5rem;
}

.btn-purchase {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-ui);
    position: relative;
    overflow: hidden;
}

.btn-purchase:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

/* Responsive Book Page */
@media (max-width: 768px) {
    .book-hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .book-title {
        font-size: 36px;
    }
    
    .book-subtitle {
        font-size: 20px;
    }
    
    .book-actions {
        align-items: stretch;
        width: 100%;
    }

    .book-actions-other {
        flex-direction: column;
    }

    .btn-book-primary,
    .btn-book-secondary {
        width: 100%;
    }
    
    .book-cover-image {
        max-width: 280px;
        max-height: 400px;
    }
    
    .author-info {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .purchase-options {
        grid-template-columns: 1fr;
    }
    
    .purchase-option.featured {
        transform: scale(1);
    }

    .book-actions-bundle {
        max-width: 100%;
    }
}

/* Content Section */
.content-section {
    padding: 2rem 2rem;
    background: transparent;
    position: relative;
    z-index: 1;
}

.content-section:first-of-type {
    padding-top: 0.75rem;
}

.content-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.content-left {
    padding: 1.5rem 2rem 1.5rem 1.5rem;
}

.content-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-family: var(--font-display);
}


.content-text {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.content-list {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.content-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.8;
}

.content-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
    font-size: 18px;
}

.btn-content {
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 1rem 2.5rem;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    margin-left: 1.5rem;
}

.btn-content:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

.content-right {
    position: relative;
}

.content-image-wrapper {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 450px;
    height: 450px;
    margin: 0 auto;
    background: #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
}

.contact-form-wrapper {
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: 500px;
    padding: 2.5rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: visible !important; /* Override content-image-wrapper overflow */
}

/* Override content-image-wrapper styles when used for contact form */
.content-image-wrapper.contact-form-wrapper {
    border-radius: 12px !important; /* Override circular border-radius */
    overflow: visible !important; /* Allow content to be visible */
    height: auto !important; /* Override fixed height */
    width: 100% !important; /* Override fixed width */
    max-width: 500px !important;
    padding: 2.5rem !important;
}

.contact-form-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2rem;
    font-family: var(--font-ui);
    text-align: center;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    font-family: var(--font-ui);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    font-size: 15px;
    font-family: var(--font-ui);
    color: var(--text-dark);
    background: #FFFFFF;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

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

.btn-form-submit {
    padding: 1rem 2rem;
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

.btn-form-submit:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

.btn-form-submit:active {
    transform: translateY(0);
}

.form-note {
    font-size: 13px;
    font-style: italic;
    color: var(--text-light);
    text-align: center;
    margin-top: 1rem;
    font-family: var(--font-ui);
}

.form-success-message {
    background: #4CAF50;
    color: #FFFFFF;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-ui);
    animation: slideIn 0.3s ease;
}

.form-error-message {
    background: #f44336;
    color: #FFFFFF;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-ui);
    animation: slideIn 0.3s ease;
}

.form-error {
    color: #f44336;
    font-size: 13px;
    margin-top: 0.5rem;
    font-family: var(--font-ui);
}

.btn-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

altcha-widget {
    margin: 1rem 0;
    display: block;
}

altcha-widget::part(container) {
    border-radius: 6px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}

/* Portrait photos inside the circular content frame:
   fill the circle (cover) instead of letterboxing (contain). */
.content-image.is-portrait {
    object-fit: cover;
    object-position: center 25%;
}

.image-badge {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: var(--accent);
    color: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.4);
}

.badge-text {
    display: block;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--font-display);
}

.badge-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

/* Ornament Bar Separator */
.ornament-bar-separator {
    width: 100%;
    padding: 2rem 2rem;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.ornament-bar-decorations {
    width: 100%;
    position: relative;
    height: 60px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
}

.ornament-bar-line {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    color: var(--accent);
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.6));
    z-index: 1;
}

/* Ornament Bar Decorative Elements */
.ornament-bar-decoration {
    position: absolute;
    width: 50px;
    height: 50px;
    color: var(--accent);
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.8)) drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.5));
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
}

.ornament-bar-left {
    left: 0;
}

.ornament-bar-center {
    left: 50%;
    transform: translate(-50%, -50%);
}

.ornament-bar-right {
    right: 0;
}

.ornament-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.ornament-bar-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-display);
    text-shadow: 
        0 2px 10px rgba(var(--accent-rgb), 0.2);
    letter-spacing: 3px;
    margin: 0;
}

/* Geometric Patterns */
.geometric-pattern {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
}

.geometric-pattern-hero {
    display: none; /* Replaced with elegant shine effects */
}

.geometric-pattern-top-right {
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: 
        radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 50%),
        linear-gradient(135deg, var(--accent) 0%, transparent 100%);
    clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 0);
    transform: rotate(45deg);
}

.geometric-pattern-bottom-left {
    display: none; /* Removed checkered pattern, replaced with skyscrapers */
}

/* Footer */
.site-footer {
    padding: 5rem 2rem 2rem;
    position: relative;
    overflow: visible;
    background: transparent;
}

/* Footer Skyscrapers Background */
.footer-skyscrapers {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--bg-white);
    border-radius: 20px;
    padding: 4rem 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.footer-title {
    text-align: center;
    margin-bottom: 3rem;
    display: none; /* Hidden since we moved title to the ornament bar */
}

.footer-title h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-display);
}

.footer-columns {
    display: grid;
    /* Four footer columns: The Memoir, The Companion Journal, Brandy's Story,
       Invite Terica. Keep this in step with the number of .footer-column blocks
       in the markup — a mismatch leaves an empty cell and the footer reads as
       shifted rather than centred. */
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.footer-column {
    text-align: center;
}

.footer-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-icon svg {
    width: 100%;
    height: 100%;
}

.footer-column-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-family: var(--font-display);
}

.footer-text {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.footer-schedule-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: inherit;
}

.footer-schedule-link:hover,
.footer-schedule-link:focus {
    color: inherit;
    text-decoration: none;
}

.footer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-tan);
    width: 100%;
}

@media (max-width: 768px) {
    .footer-contact {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .footer-contact .contact-avatar {
        margin-bottom: 0.25rem;
    }

    .footer-contact .contact-info,
    .footer-contact .social-link {
        display: flex;
        align-items: center;
    }

    .footer-contact .contact-separator {
        display: none;
    }
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-link:hover {
    transform: scale(1.15);
    opacity: 0.8;
}

.social-link svg {
    transition: fill 0.3s ease;
}

.social-link:hover svg {
    fill: var(--gilt);
}

.contact-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    /* The source is a full-length 2:3 portrait, so a square crop discards a third
       of the height. Pull the window near the top, where the face sits at roughly
       25% down; centring it would frame the dress. */
    object-position: center 12%;
    border: 2px solid var(--accent);
}

.contact-info {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 600;
}

.contact-separator {
    color: var(--accent);
    font-size: 18px;
    font-weight: 300;
}

.footer-badge {
    margin-top: 1rem;
}

.badge-icon {
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(var(--accent-rgb), 0.3);
    position: relative;
    z-index: 2;
}

.footer-bottom p {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
}

.footer-bottom a {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.3s ease;
    font-weight: 600;
}

.footer-bottom a:hover {
    color: var(--accent-deep);
}

/* Footer Book Link */
.footer-book-link {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
}

.book-link-footer {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--accent);
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(var(--accent-rgb), 0.05);
}

.book-link-footer:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

.book-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.book-link-icon svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(var(--accent-rgb), 0.2));
}

.book-link-footer:hover .book-link-icon {
    transform: rotate(-10deg) scale(1.15);
}

.book-link-footer:hover .book-link-icon svg {
    filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), 0.4));
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-images {
        padding: 0 2rem;
    }
    
    .hero-image-left,
    .hero-image-right {
        width: 25%;
    }
    
    .content-container {
        gap: 3rem;
    }
    
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
        position: relative;
    }
    
    .header-left {
        margin-right: 0;
        margin-bottom: 0;
        flex: 1;
    }
    
    .logo-link {
        width: 110px;
        height: 110px;
        padding: 8px;
        border-width: 2px;
        border-radius: 50%;
        box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.35);
    }
    
    .header-container {
        min-height: 0;
        padding: 0.75rem 1rem;
    }
    
    .mobile-menu-toggle {
        display: flex;
        order: 3;
    }
    
    .dark-mode-toggle {
        width: 35px;
        height: 35px;
        order: 1;
        margin-left: auto;
        margin-right: 0.5rem;
    }
    
    .dark-mode-toggle svg {
        width: 18px;
        height: 18px;
    }
    
    .header-right {
        order: 2;
        gap: 0.75rem;
    }
    
    .search-box {
        display: none;
    }
    
    .btn-get-started {
        padding: 0.6rem 1.2rem;
        font-size: 12px;
        order: 2;
    }
    
    /* Mobile Menu Overlay - only covers the left side, not the menu area */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease, width 0s 0.3s;
        z-index: 1000;
        pointer-events: none;
    }
    
    .mobile-menu-overlay.active {
        width: calc(100% - 300px);
        max-width: calc(100% - 240px); /* 80% of screen = menu width */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease, visibility 0.3s ease, width 0s 0s;
    }
    
    @media (max-width: 375px) {
        .mobile-menu-overlay.active {
            width: calc(100% - 240px);
        }
    }
    
    /* Keep ::before for backward compatibility but don't use pointer-events */
    .header-nav::before {
        display: none;
    }
    
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        max-height: 100vh;
        background: #ffffff !important;
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem 4rem;
        padding-bottom: 4rem;
        gap: 1.5rem;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease, visibility 0.3s ease;
        z-index: 10001;
        overflow-y: auto;
        overflow-x: hidden;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        visibility: hidden;
        pointer-events: auto;
    }
    
    .header-nav.active {
        right: 0;
        visibility: visible;
    }
    
    /* Ensure menu appears above book banner */
    body.has-book-banner .header-nav {
        top: 0;
        height: 100vh;
        z-index: 10001;
    }
    
    /* Dark mode mobile menu styles */
    body.dark-mode .header-nav {
        background: #16110F !important;
    }
    
    body.dark-mode .header-nav .nav-item {
        color: #F2E9E1 !important;
        border-bottom-color: rgba(var(--accent-rgb), 0.3) !important;
    }
    
    body.dark-mode .header-nav .nav-item:hover {
        color: var(--accent) !important;
    }
    
    .nav-item {
        font-size: 18px;
        width: 100%;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
        display: block;
        flex-shrink: 0;
        white-space: nowrap;
        pointer-events: auto !important;
        cursor: pointer;
        position: relative;
        z-index: 10002;
        color: #212529;
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(var(--accent-rgb), 0.2);
    }
    
    .nav-item:hover,
    .nav-item:active {
        color: var(--accent);
    }
    
    /* Ensure last nav item has proper spacing */
    .header-nav .nav-item:last-child {
        margin-bottom: 2rem;
        border-bottom: none;
    }
    
    /* Ensure nav items are clickable */
    .header-nav.active .nav-item {
        pointer-events: auto !important;
    }
    
    /* Ensure the entire nav container is clickable */
    .header-nav.active {
        pointer-events: auto !important;
    }
    
    .nav-item-book {
        font-size: 13px;
    }
    
    .nav-item-book .book-nav-icon {
        display: inline-flex;
    }
    
    .nav-item-book .book-nav-icon book-icon {
        width: 16px;
        height: 16px;
    }
    
    .btn-book-header {
        padding: 0.5rem 1rem;
        font-size: 11px;
    }
    
    .btn-book-header book-icon {
        width: 16px;
        height: 16px;
    }
    
    .btn-book-header span {
        display: none;
    }
    
    .search-box {
        width: 150px;
    }
    
    .book-link-footer {
        font-size: 13px;
        padding: 0.6rem 1.2rem;
    }
    
    .book-link-icon {
        display: inline-flex;
    }
    
    .book-link-icon book-icon {
        width: 18px;
        height: 18px;
    }
    
    /* Ornament Bar Responsive */
    .ornament-bar-separator {
        padding: 3rem 1rem;
    }
    
    .ornament-bar-decorations {
        height: 50px;
        margin-bottom: 1.5rem;
    }
    
    .ornament-bar-decoration {
        width: 35px;
        height: 35px;
    }
    
    .ornament-bar-left {
        left: 5%;
    }
    
    .ornament-bar-right {
        right: 5%;
    }
    
    .ornament-bar-title {
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    /* Geometric Patterns Responsive */
    .geometric-pattern-hero {
        width: 200px;
        height: 200px;
    }
    
    .geometric-pattern-top-right {
        width: 120px;
        height: 120px;
        top: -30px;
        right: 0;
    }
    
    .geometric-pattern-bottom-left {
        width: 120px;
        height: 120px;
        bottom: -30px;
        left: 0;
    }
    
    .hero-section {
        min-height: 0;
        padding: 1rem 1rem;
    }
    
    .hero-images {
        display: none;
    }
    
    .hero-content-box {
        padding: 1.5rem 1.25rem;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .content-section {
        padding: 1.5rem 1rem;
    }
    
    .content-section:first-of-type {
        padding-top: 0.5rem;
    }
    
    .content-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
    
    .content-left {
        padding: 1.5rem 1rem 1.5rem 1rem;
        min-width: 0;
    }
    
    .btn-content {
        margin-left: 1rem;
    }
    
    .content-section {
        overflow-x: hidden;
        position: relative;
    }
    
    /* No z-index: keep normal flow so image and affiliations both visible and non-overlapping */
    .content-section.affiliations-section {
        position: relative;
    }
    
    /* Clear gap between sections so content image never overlaps affiliations */
    .content-section.affiliations-section + .content-section {
        margin-top: 0;
        padding-top: 1.5rem;
    }
    
    .content-right {
        order: -1;
        margin-bottom: 2rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
    
    .content-left {
        order: 1;
        width: 100%;
    }
    
    /* Force image wrapper to stay within viewport (Brave/Chromium) */
    .content-image-wrapper {
        width: 100% !important;
        max-width: min(260px, 85vw) !important;
        height: auto !important;
        aspect-ratio: 1;
        padding: 15px;
        margin: 0 auto;
        box-sizing: border-box;
        min-width: 0;
    }
    
    .content-image-wrapper.content-slideshow-wrapper {
        max-width: min(320px, 85vw) !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 440 / 560;
    }
    
    .content-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        max-width: 100%;
    }

    .content-image.is-portrait {
        object-fit: cover;
    }

    .contact-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
        min-height: auto !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    /* Ensure contact form wrapper overrides content-image-wrapper on mobile */
    .content-image-wrapper.contact-form-wrapper {
        border-radius: 12px !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
        margin: 0 auto;
    }
    
    .contact-form-title {
        font-size: 20px;
        margin-bottom: 1.5rem;
    }
    
    .form-group {
        gap: 0.4rem;
    }
    
    .form-input,
    .form-textarea {
        padding: 0.65rem 0.85rem;
        font-size: 14px;
    }
    
    .btn-form-submit {
        padding: 0.85rem 1.5rem;
        font-size: 14px;
    }
    
    .content-title {
        font-size: 36px;
    }
    
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-title h2 {
        font-size: 32px;
    }
}

/* ---------------------------------------------------------------------------
   Memory Gallery — the photo grid on story.html and the cover strip on
   media.html. Cards keep a fixed portrait aspect so a mixed set of phone
   photos still lays out on a clean baseline.
   --------------------------------------------------------------------------- */
.memory-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Three covers, one row: the book, the companion journal, and Brandy's portrait.
   auto-fill produced four columns at the default max-width, leaving a gap
   hanging off the end. Keep this matched to the number of cards in the markup. */
.memory-gallery-covers {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
}

.memory-card {
    margin: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.memory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.35);
}

.memory-card img {
    display: block;
    width: 100%;
    /* Was 3/4, which made every box 1.33x as tall as it was wide and produced a
       very long gallery. These photos run from 0.535 to 0.892 in ratio, so no
       single box fits them all; a square is the shortest frame that still crops
       the majority (0.75) gently. Bias the crop upward so faces survive it. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 25%;
    background: var(--bg-light);
}

/* Cover art is artwork, not a photograph — show the whole thing rather than
   cropping the title off the top or bottom. */
.memory-gallery-covers .memory-card img {
    object-fit: contain;
    object-position: center;
    background: var(--bg-light);
    /* These covers range from 0.52 to 0.80 in aspect ratio. The shared 3/4 box
       sized every card for the tallest possible image and then letterboxed the
       rest, which made the section far taller than any cover needed. Fix the
       height instead and let `contain` scale within it: the cards still align,
       and the row loses roughly a third of its height. */
    aspect-ratio: auto;
    height: 280px;
    padding: 0.75rem;
}

/* ===== Story page memory slideshow =====
   One photo at a time instead of a grid. The photos vary too much in shape for
   a uniform cell, so the frame is a fixed height and the image is contained
   inside it: portraits fill the height, wider shots letterbox at the sides, and
   nothing is ever cropped. */
.gallery-slideshow-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

.gallery-slideshow {
    height: 560px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
}

.gallery-slideshow .content-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 0;
    background: var(--bg-light);
}

.slideshow-caption {
    margin: 1rem auto 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-light);
    min-height: 1.5em; /* reserve the line so slides don't shift the page */
}

body.dark-mode .gallery-slideshow {
    background: rgba(34, 26, 23, 0.6);
}

body.dark-mode .gallery-slideshow .content-slide {
    background: transparent;
}

@media (max-width: 768px) {
    .gallery-slideshow {
        height: 420px;
    }
}

@media (max-width: 600px) {
    .gallery-slideshow {
        height: 340px;
    }
}

/* ===== Toast notifications =====
   app.js notify() builds .elegant-notification > .notification-content and
   toggles .show, but no styles for it ever existed. The element was appended
   unstyled to the end of <body>, below the footer, so every button that called
   notify() — "Email Me When It's Available" among them — looked broken: the
   click worked and nothing visible happened. */
.elegant-notification {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 1.5rem);
    z-index: 10001; /* above the fixed announcement banner */
    max-width: min(460px, calc(100vw - 2rem));
    background: var(--bg-white);
    color: var(--text-dark);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
}

.elegant-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.notification-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.notification-icon {
    font-size: 20px;
    line-height: 1.3;
    flex-shrink: 0;
}

.notification-text {
    font-size: 15px;
    line-height: 1.5;
}

body.dark-mode .elegant-notification {
    background: rgba(34, 26, 23, 0.97);
    color: var(--text-light);
}

@media (max-width: 600px) {
    .elegant-notification {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
        transform: translateY(1.5rem);
    }
    .elegant-notification.show {
        transform: translateY(0);
    }
}

/* ===== 404 page ===== */
.error-section {
    text-align: center;
    padding: 5rem 2rem 6rem;
}

.error-code {
    margin: 0 0 0.5rem;
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    color: var(--gilt);
    letter-spacing: 0.06em;
}

.error-text {
    max-width: 560px;
    margin: 0 auto 2.25rem;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-actions .btn-content {
    display: inline-block;
    text-decoration: none;
}

.btn-content-secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

@media (max-width: 600px) {
    .error-code {
        font-size: 56px;
    }
    .error-section {
        padding: 3.5rem 1.25rem 4.5rem;
    }
}

/* ===== Official memorial statement =====
   Quoted verbatim from a public statement by Constable Mark Herman's Office.
   Styled deliberately quieter than the surrounding marketing copy: this is a
   record, not a promotion. The gilt rule and left border mark it as quoted
   material rather than the author's own voice. */
.memorial-section {
    background: var(--surface-warm);
}

.memorial-statement {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 2.25rem;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--gilt);
    border-radius: 8px;
}

.memorial-statement p {
    margin: 0 0 1.15rem;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-medium);
}

.memorial-statement p:last-of-type {
    margin-bottom: 1.5rem;
}

.memorial-closing {
    font-style: italic;
    color: var(--accent) !important;
}

.memorial-attribution {
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-light);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
}

.memorial-attribution span {
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
}

/* Home page pull-quote leading to the full statement */
.memorial-pullquote-section {
    padding: 3.5rem 2rem;
    background: var(--surface-warm);
    text-align: center;
    /* The following .content-section is position:relative z-index:1 and its
       decorative .geometric-pattern is offset top:-100px, so it bleeds up out of
       its own section. Left static, this block painted underneath that
       decoration. Lifting it into the same stacking order keeps the quote on
       top without changing where the decoration sits elsewhere. */
    position: relative;
    z-index: 2;
}

.memorial-pullquote {
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
    border: 0;
}

.memorial-pullquote p {
    margin: 0 0 1.25rem;
    font-size: 24px;
    line-height: 1.55;
    color: var(--text-dark);
    font-style: italic;
}

.memorial-pullquote .memorial-attribution {
    display: inline-block;
    border-top: 0;
    padding-top: 0;
}

.memorial-pullquote-link {
    margin: 1.25rem 0 0;
}

.memorial-pullquote-link a {
    font-size: 15px;
    color: var(--accent);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
    padding-bottom: 2px;
    text-decoration: none;
}

.memorial-pullquote-link a:hover {
    border-bottom-color: var(--accent);
}

body.dark-mode .memorial-statement {
    background: rgba(34, 26, 23, 0.7);
}

@media (max-width: 600px) {
    .memorial-statement {
        padding: 1.5rem 1.25rem;
    }
    .memorial-statement p {
        font-size: 16px;
    }
    .memorial-pullquote p {
        font-size: 20px;
    }
}

.memory-caption {
    padding: 0.9rem 1rem 1.1rem;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-light);
    text-align: center;
    border-top: 1px solid var(--border-light);
}

body.dark-mode .memory-card {
    background: rgba(34, 26, 23, 0.7);
    border-color: var(--border-light);
}

body.dark-mode .memory-caption {
    color: var(--text-light);
}

@media (max-width: 600px) {
    .memory-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    .memory-caption {
        font-size: 13px;
        padding: 0.7rem 0.6rem 0.9rem;
    }
    /* Stated explicitly: the rule above resets .memory-gallery at equal
       specificity and comes later in the file, so without this the covers grid
       would silently revert to auto-fill on phones. Keep the single row. */
    .memory-gallery-covers {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }
    .memory-gallery-covers .memory-card img {
        height: 150px;
        padding: 0.4rem;
    }
}

/* ---------------------------------------------------------------------------
   Cover art inside a content section. The circular .content-image-wrapper frame
   is built for portrait photography and slices the title straight off a book
   cover, so covers opt out of the circle and keep their own proportions.
   --------------------------------------------------------------------------- */
.content-image-wrapper.is-cover {
    width: auto;
    max-width: 340px;
    height: auto;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.content-image-wrapper.is-cover .content-image,
.content-image-wrapper.is-cover .content-image.is-portrait {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

body.dark-mode .content-image-wrapper.is-cover {
    background: transparent !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

@media (max-width: 768px) {
    .content-image-wrapper.is-cover {
        max-width: 260px;
    }
}