{} *{} {}
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #0b1512; --ink-soft: #2e3d38; --ink-muted: #6b7c76; --paper: #f3f7f5; --paper-warm: #e4efea; --accent: #0f3630; --accent-light: #1d5c52; --gold: #3d9e8a; --gold-light: #62bfac; --white: #ffffff; --ff-display: 'Cormorant Garamond', Georgia, serif; --ff-body: 'Inter', system-ui, sans-serif; } html { scroll-behavior: smooth; } body { font-family: var(--ff-body); background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.7; overflow-x: hidden; } /* NAV */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 3rem; background: rgba(247,245,242,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(14,14,15,0.08); } .nav-logo { font-family: var(--ff-display); font-size: 1.1rem; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .nav-links { display: flex; gap: 2.5rem; list-style: none; } .nav-links a { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--gold); } /* HERO */ .hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 5rem; } .hero-left { display: flex; flex-direction: column; justify-content: center; padding: 5rem 4rem 5rem 6rem; position: relative; } .hero-left::after { content: ''; position: absolute; right: 0; top: 10%; bottom: 10%; width: 1px; background: linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold) 70%, transparent); } .eyebrow { font-family: var(--ff-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .hero-title { font-family: var(--ff-display); font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 300; line-height: 1.05; color: var(--ink); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .hero-title em { font-style: italic; color: var(--accent-light); } .hero-subtitle { font-family: var(--ff-display); font-size: 1rem; font-weight: 300; font-style: italic; color: var(--ink-muted); letter-spacing: 0.05em; margin-bottom: 2.5rem; } .hero-tagline { font-size: 1.05rem; font-weight: 300; color: var(--ink-soft); line-height: 1.8; max-width: 38ch; margin-bottom: 3rem; border-left: 2px solid var(--gold); padding-left: 1.25rem; } .hero-ctas { display: flex; gap: 1rem; align-items: center; } .btn-primary { display: inline-block; padding: 0.9rem 2.2rem; background: var(--accent); color: var(--white); font-family: var(--ff-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, transform 0.15s; } .btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); } .btn-ghost { display: inline-block; font-family: var(--ff-body); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color 0.2s; } .btn-ghost:hover { color: var(--gold); } .hero-right { display: flex; align-items: center; justify-content: center; background: var(--paper-warm); position: relative; overflow: hidden; } .book-cover { width: 260px; height: 390px; position: relative; box-shadow: 20px 30px 60px rgba(14,14,15,0.35), 4px 6px 15px rgba(14,14,15,0.2); transform: rotate(-2deg); transition: transform 0.4s ease; border-radius: 2px; overflow: hidden; } .book-cover:hover { transform: rotate(0deg) scale(1.02); } .book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-bg-text { position: absolute; bottom: -2rem; right: -1rem; font-family: var(--ff-display); font-size: 18rem; font-weight: 300; font-style: italic; color: rgba(184,150,90,0.06); line-height: 1; pointer-events: none; user-select: none; } /* TENSION STRIP */ .tension-strip { background: var(--accent); padding: 1.25rem 6rem; display: flex; justify-content: center; gap: 4rem; align-items: center; } .tension-word { font-family: var(--ff-display); font-size: 1rem; font-weight: 300; font-style: italic; color: var(--gold-light); letter-spacing: 0.1em; } .tension-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0.5; } /* ABOUT */ .section { padding: 7rem 6rem; } .section-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .about { background: var(--white); } .about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: start; max-width: 1100px; margin: 0 auto; } .about-left { } .section-heading { font-family: var(--ff-display); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 300; line-height: 1.2; color: var(--ink); margin-bottom: 2rem; } .about-body { font-size: 1rem; font-weight: 300; color: var(--ink-soft); line-height: 1.9; } .about-body p { margin-bottom: 1.25rem; } .about-body p:last-child { margin-bottom: 0; } .about-body strong { font-weight: 500; color: var(--ink); } .about-right { padding-top: 0.5rem; } .pull-quote { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--accent); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 2rem 0; margin-bottom: 2.5rem; } .book-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .detail-item { } .detail-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3rem; } .detail-value { font-family: var(--ff-display); font-size: 1rem; font-weight: 400; color: var(--ink); } /* AUTHOR */ .author { background: var(--paper); } .author-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; gap: 5rem; align-items: start; } .author-avatar { width: 200px; height: 200px; background: var(--accent); position: relative; overflow: hidden; } .author-avatar-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent) 0%, #061512 100%); } .author-initials { font-family: var(--ff-display); font-size: 3.5rem; font-weight: 300; font-style: italic; color: var(--gold-light); letter-spacing: 0.05em; } .author-content { } .author-name { font-family: var(--ff-display); font-size: 2rem; font-weight: 300; color: var(--ink); margin-bottom: 0.5rem; margin-top: 0; } .author-bio { font-size: 1rem; font-weight: 300; color: var(--ink-soft); line-height: 1.9; margin-top: 1.25rem; max-width: 60ch; } .author-bio p { margin-bottom: 1rem; } /* BUY */ .buy { background: var(--accent); text-align: center; padding: 6rem; } .buy .section-label { color: var(--gold-light); } .buy .section-heading { color: var(--white); margin-bottom: 1rem; } .buy-sub { font-size: 1rem; font-weight: 300; color: rgba(240,236,230,0.65); margin-bottom: 3rem; font-style: italic; font-family: var(--ff-display); font-size: 1.15rem; } .buy-options { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-buy { display: inline-block; padding: 0.9rem 2.5rem; background: var(--gold); color: var(--ink); font-family: var(--ff-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, transform 0.15s; } .btn-buy:hover { background: var(--gold-light); transform: translateY(-1px); } .btn-buy-ghost { display: inline-block; padding: 0.9rem 2.5rem; border: 1px solid rgba(240,236,230,0.3); color: rgba(240,236,230,0.85); font-family: var(--ff-body); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: border-color 0.2s, color 0.2s, transform 0.15s; } .btn-buy-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-1px); } .trilogy-note { margin-top: 3rem; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,236,230,0.35); } /* FOOTER */ footer { background: #040e0c; padding: 2.5rem 6rem; display: flex; justify-content: space-between; align-items: center; } .footer-logo { font-family: var(--ff-display); font-size: 0.9rem; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(240,236,230,0.4); } .footer-copy { font-size: 0.72rem; color: rgba(240,236,230,0.25); letter-spacing: 0.05em; } /* RESPONSIVE */ @media (max-width: 900px) { nav { padding: 1rem 1.5rem; } .nav-links { display: none; } .hero { grid-template-columns: 1fr; min-height: auto; } .hero-left { padding: 6rem 1.5rem 3rem; } .hero-left::after { display: none; } .hero-right { min-height: 50vh; padding: 3rem 1.5rem; } .tension-strip { padding: 1rem 1.5rem; gap: 2rem; flex-wrap: wrap; } .section { padding: 4rem 1.5rem; } .about-grid { grid-template-columns: 1fr; gap: 3rem; } .author-inner { grid-template-columns: 1fr; gap: 2rem; } .author-avatar { width: 120px; height: 120px; } .author-initials { font-size: 2.5rem; } .buy { padding: 4rem 1.5rem; } footer { padding: 2rem 1.5rem; flex-direction: column; gap: 0.75rem; text-align: center; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }