:root {
    /* Steel-grey palette -- pushed away from saturated blue, toward architectural grey */
    --ink:        #e0e6ee;
    --ink-2:      #c2cad4;
    --ink-3:      #98a2ae;
    --ink-muted:  #6a7480;
    --ink-faint:  #4a5460;

    --accent:        #94a4b5;   /* primary -- steel-grey, faintest blue lean */
    --accent-deep:   #6a7d92;   /* rules, borders */
    --accent-bright: #c0ccd8;   /* highlights, hover */

    --bg:           #0a0e15;    /* near-black, slight cool tint, not navy */
    --bg-section-a: #0c1018;
    --bg-section-b: #080b11;
    --bg-card:      rgba(20, 26, 38, 0.5);

    --rule:     #1c2230;
    --rule-dim: #131822;
  }
  * { box-sizing: border-box; }
  html { scroll-padding-top: 4rem; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink-2); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 300; line-height: 1.6; }

  .container { max-width: 70rem; margin: 0 auto; padding: 0 2rem; }
  .container-narrow { max-width: 42rem; margin: 0 auto; padding: 0 2rem; }

  section { padding: 5rem 0 5rem; border-top: 1px solid var(--rule-dim); }
  section.alt { background: var(--bg-section-b); }
  .section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; text-align: center; margin-bottom: 0.4rem; }
  .section-title { font-size: 1.9rem; font-weight: 400; color: var(--ink); text-align: center; margin: 0 0 0.6rem; }
  .section-rule { width: 2.5rem; height: 1px; background: var(--accent-deep); margin: 0 auto 2.5rem; }

  /* HERO -- viewport-filling, atmospheric Ken Burns, title sequence, bouncing scroll cue */
  .hero {
    position: relative;
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    border-top: none;
    overflow: hidden;
    padding: 4rem 2rem;
    background: var(--bg);
  }
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url('../img/hero-bg.webp');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 50% center;
    animation:
      heroPan 28s ease-in-out infinite alternate,
      heroScroll 1200s linear infinite;
    z-index: 0;
    will-change: transform, background-position;
  }
  .hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,14,21,0.50) 0%, rgba(10,14,21,0.78) 60%, var(--bg) 100%);
    z-index: 1;
  }
  .hero > * { position: relative; z-index: 2; }

  .hero-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .hero-link .hero-mark,
  .hero-link .hero-tag,
  .hero-link .hero-byline {
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }
  .hero-link:hover .hero-mark {
    text-shadow: 0 0 32px rgba(192, 204, 216, 0.45), 0 2px 28px rgba(0,0,0,0.65);
  }
  .hero-link:hover .hero-tag { color: var(--ink); }
  .hero-link:hover .hero-byline { color: var(--ink-2); }

  .hero-mark {
    font-size: 5.5rem; font-weight: 300; letter-spacing: -0.01em;
    color: var(--ink); margin: 0;
    text-shadow: 0 2px 28px rgba(0,0,0,0.65);
    opacity: 0; transform: translateY(8px);
    animation: heroFadeUp 650ms ease-out 150ms forwards;
  }
  .hero-mark .accent { color: var(--accent); font-weight: 600; }
  .hero-tag {
    font-size: 1.15rem; font-weight: 300;
    color: var(--ink-2); margin: 1.5rem auto 0; max-width: 36rem; line-height: 1.55;
    opacity: 0; transform: translateY(8px);
    animation: heroFadeUp 650ms ease-out 450ms forwards;
  }
  .hero-byline {
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-muted); margin-top: 2.5rem;
    opacity: 0; transform: translateY(8px);
    animation: heroFadeUp 650ms ease-out 750ms forwards;
  }
  .hero-byline .dot { color: var(--accent-deep); }
  .hero-scroll {
    position: absolute; bottom: 2.5rem; left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem; color: var(--accent);
    text-decoration: none; line-height: 1;
    opacity: 0; z-index: 2;
    animation:
      heroScrollFadeIn 650ms ease-out 1100ms forwards,
      heroScrollBounce 1.8s ease-in-out 1800ms infinite;
  }
  .hero-scroll:hover { color: var(--accent-bright); }

  @keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroPan {
    from { transform: scale(1.0); }
    to   { transform: scale(1.06); }
  }
  /* image is 2:1 aspect; rendered width = 2 * element height = 2 * (100vh - 4rem).
     Animating background-position-x by exactly one tile width creates a seamless
     loop because the image is designed to repeat horizontally. */
  @keyframes heroScroll {
    from { background-position-x: 50%; }
    to   { background-position-x: calc(50% + 200vh - 8rem); }
  }
  @keyframes heroScrollFadeIn {
    to { opacity: 0.78; }
  }
  @keyframes heroScrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero::before { animation: none; }
    .hero-mark, .hero-tag, .hero-byline { opacity: 1; transform: none; animation: none; }
    .hero-scroll { opacity: 0.78; animation: none; }
  }
  @media (max-width: 768px) {
    .hero { min-height: calc(100vh - 3rem); padding: 3rem 1.5rem; }
    .hero-mark { font-size: 3rem; }
    .hero-tag { font-size: 1rem; }
    .hero-scroll { bottom: 1.5rem; font-size: 1.4rem; }
  }

  /* TRILOGY */
  .trilogy-intro { color: var(--ink-3); font-size: 1rem; line-height: 1.7; max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
  .trilogy-intro em { color: var(--ink); font-style: italic; }
  .novel { padding: 3rem 0; border-top: 1px solid var(--rule-dim); }
  .novel:first-of-type { border-top: none; padding-top: 0; }
  .novel-head { text-align: center; margin-bottom: 2rem; }
  .novel-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0; }
  .novel-tag { font-size: 0.78rem; font-weight: 300; color: var(--ink-faint); margin-top: 0.4rem; font-style: italic; }
  .novel-covers { display: flex; gap: 1.5rem; justify-content: center; align-items: flex-start; margin-bottom: 2rem; flex-wrap: wrap; }
  .novel-covers img { max-width: 220px; height: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.55); }
  .novel-cover-cap { text-align: center; font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.6rem; }
  .novel-cover-cap strong { color: var(--ink-2); display: block; font-weight: 500; margin-bottom: 0.2rem; }
  .pullquote {
    font-style: italic; color: var(--ink-3); font-size: 1.05rem; line-height: 1.55;
    border-left: 2px solid var(--accent-deep); padding: 0.5rem 0 0.5rem 1.2rem;
    max-width: 32rem; margin: 0 auto 1.5rem;
  }
  .novel-desc { color: var(--ink-3); font-size: 0.95rem; line-height: 1.7; max-width: 38rem; margin: 0 auto; }
  .novel-desc strong { color: var(--ink); font-weight: 500; }
  .trilogy-close { color: var(--ink-3); font-size: 1rem; line-height: 1.7; max-width: 38rem; margin: 3.5rem auto 0; text-align: center; font-style: italic; }
  .trilogy-close em { color: var(--ink); font-style: normal; }

  /* SAMPLE */
  .sample-intro { color: var(--ink-3); font-size: 0.95rem; line-height: 1.7; max-width: 38rem; margin: 0 auto 2rem; text-align: center; }
  .sample-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
  .btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1.4rem; background: transparent; color: var(--accent);
    border: 1px solid var(--accent-deep); border-radius: 2px;
    font-family: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em;
    text-decoration: none; cursor: pointer; transition: all 0.15s;
  }
  .btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .btn-primary:hover { background: var(--accent-bright); color: var(--bg); border-color: var(--accent-bright); }
  .excerpt-head { font-size: 1.1rem; font-weight: 400; color: var(--ink); text-align: center; margin: 2rem 0 1rem; font-style: italic; }
  .excerpt { max-width: 36rem; margin: 0 auto 2rem; color: var(--ink-3); font-size: 0.95rem; line-height: 1.75; }
  .excerpt p { margin: 0 0 1rem; }
  .excerpt-marker { text-align: center; font-style: italic; color: var(--ink-muted); margin-bottom: 1.5rem; }
  .signup-cta { text-align: center; margin-top: 2rem; }
  .offer-box {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 2px;
    max-width: 36rem;
    margin: 2.5rem auto;
    padding: 2.5rem 2rem;
  }
  .offer-box .excerpt-title {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin: 0 0 1rem;
  }
  .offer-box .excerpt-title em { color: var(--accent); font-weight: 400; }
  .offer-box .excerpt { max-width: none; margin: 0; }
  .offer-box .prose { max-width: none; margin: 0; }
  .offer-box .signature {
    text-align: center;
    font-style: italic;
    color: var(--ink-2);
    font-size: 1rem;
    margin: 2rem 0 0;
    letter-spacing: 0.02em;
  }
  .offer-box .offer-hook {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    margin: 1.5rem 0 0;
  }
  .offer-box .offer-cta { text-align: center; margin-top: 1.5rem; }
  .offer-box .offer-note {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
    margin: 0.6rem 0 0;
  }
  @media (max-width: 768px) {
    .offer-box { padding: 2rem 1.5rem; }
  }

  /* BEHIND THE STORY */
  .quote-card {
    max-width: 32rem; margin: 0 auto 3rem; padding: 1.5rem 1.8rem;
    border-top: 1px solid var(--accent-deep); border-bottom: 1px solid var(--accent-deep);
    text-align: center;
  }
  .quote-card-text { color: var(--accent); font-size: 1rem; font-style: italic; line-height: 1.5; margin: 0; }
  .quote-card-attr { color: var(--ink-muted); font-size: 0.8rem; margin-top: 0.6rem; font-style: normal; }
  .prose { color: var(--ink-3); font-size: 0.97rem; line-height: 1.75; max-width: 38rem; margin: 0 auto; }
  .prose p { margin: 0 0 1.2rem; }
  .prose strong { color: var(--ink); font-weight: 500; }
  .influences { font-style: italic; color: var(--ink-2); }

  /* BARTON */
  .author-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; max-width: 56rem; margin: 0 auto 2.5rem; align-items: center; }
  .author-portrait img { width: 100%; max-width: 14rem; height: auto; border-radius: 2px; filter: grayscale(0.4) brightness(0.95); }
  .author-quip { color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
  .author-quip p { margin: 0 0 1rem; }
  .author-quip em { color: var(--accent); font-style: italic; }
  .author-mantra { text-align: center; color: var(--accent); font-size: 1rem; font-weight: 500; margin: 1rem 0 2rem; letter-spacing: 0.02em; }

  /* AI USE */
  .aiuse-quote {
    text-align: center; color: var(--accent); font-size: 1rem; font-style: italic; line-height: 1.5;
    max-width: 30rem; margin: 0 auto 2rem;
  }
  .aiuse-quote-attr { display: block; color: var(--ink-muted); font-size: 0.8rem; font-style: normal; margin-top: 0.5rem; }

  /* STAY IN TOUCH */
  .touch-intro { color: var(--ink-3); font-size: 0.97rem; line-height: 1.7; max-width: 36rem; margin: 0 auto 2.5rem; text-align: center; }
  .touch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: 50rem; margin: 0 auto; }
  .touch-card {
    background: var(--bg-card); padding: 2rem; border-top: 1px solid var(--rule);
    text-align: center;
  }
  .touch-card-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; margin-bottom: 0.6rem; }
  .touch-card-title { color: var(--ink); font-size: 1.15rem; font-weight: 400; margin: 0 0 0.8rem; }
  .touch-card-body { color: var(--ink-3); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; }
  .signup-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
  .signup-input {
    padding: 0.7rem 0.9rem; background: rgba(0,0,0,0.5); color: var(--ink); border: 1px solid var(--rule);
    font-family: inherit; font-size: 0.9rem; border-radius: 2px;
  }
  .signup-input:focus { outline: none; border-color: var(--accent); }
  .signup-btn {
    padding: 0.7rem 0.9rem; background: var(--accent); color: var(--bg); border: none;
    font-family: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em;
    cursor: pointer; border-radius: 2px;
  }
  .signup-btn:hover { background: var(--accent-bright); color: var(--bg); }
  .signup-note { font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.5rem; font-style: italic; }

  footer { padding: 3rem 0 2rem; text-align: center; color: var(--ink-muted); font-size: 0.8rem; border-top: 1px solid var(--rule-dim); }
  footer a { color: var(--accent); text-decoration: none; }
  footer a:hover { color: var(--accent-bright); }

  @media (max-width: 768px) {
    .author-row, .touch-row { grid-template-columns: 1fr; }
    .novel-covers { gap: 1rem; }
    .novel-covers img { max-width: 160px; }
  }

/* === Header / Navbar === */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 2rem;
  background: linear-gradient(180deg, rgba(10,14,21,0.85) 0%, rgba(10,14,21,0.4) 80%, rgba(10,14,21,0) 100%);
  pointer-events: none;
}
#header.scrolled { background: var(--bg); pointer-events: auto; border-bottom: 1px solid var(--rule-dim); }
#navbar { pointer-events: auto; }
#navbar ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; align-items: center; }
#navbar li { position: relative; }
#navbar a {
  color: var(--ink-2);
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em;
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0;
  display: inline-block;
  transition: color 0.18s ease;
}
#navbar a:hover { color: var(--ink); }
/* Top-level: animated underline grows from center on hover */
#navbar > ul > li > a::before {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: left 0.22s ease-out, right 0.22s ease-out;
}
#navbar > ul > li > a:hover::before { left: 0; right: 0; }
#navbar .dropdown > a::after { content: ' \25BE'; font-size: 0.7em; color: var(--accent); }
#navbar .dropdown ul {
  position: absolute; top: 100%; left: 0; min-width: 14rem;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 2px;
  flex-direction: column; gap: 0; padding: 0.5rem 0;
  display: none;
}
#navbar .dropdown.open ul { display: flex; }
@media (hover: hover) {
  #navbar .dropdown:hover ul { display: flex; }
}
#navbar .dropdown ul li a {
  display: block; padding: 0.5rem 1rem;
  transition: color 0.15s ease, background 0.15s ease;
}
#navbar .dropdown ul li a::before { content: none; }
#navbar .dropdown ul li a:hover {
  background: rgba(148, 164, 181, 0.10);
  color: var(--ink);
}
.mobile-nav-toggle { display: none; }

@media (max-width: 768px) {
  #header { padding: 1rem; }
  /* Top-level only -- direct-child selector keeps the dropdown ul on its own visibility rules */
  #navbar > ul { display: none; }
  #navbar.mobile-open > ul {
    display: flex; flex-direction: column;
    position: fixed; top: 4rem; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: 1.5rem 2rem; gap: 1rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
  /* Dropdown panel: inline expansion below Info, not an absolute overlay */
  #navbar .dropdown ul {
    position: static;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.4rem 0 0 1rem;
    min-width: 0;
    gap: 0.3rem;
  }
  #navbar .dropdown ul li a { padding: 0.35rem 0; }
  .mobile-nav-toggle {
    display: block; background: none; border: none; color: var(--accent);
    font-size: 1.5rem; cursor: pointer; padding: 0.5rem;
  }
}

/* === Form success / error states === */
.form-message { font-size: 0.85rem; margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 2px; }
.form-message.success { color: var(--accent-bright); background: rgba(148, 164, 181, 0.12); border-left: 2px solid var(--accent); }
.form-message.error { color: #d99a9a; background: rgba(180, 100, 100, 0.12); border-left: 2px solid #b06868; }