:root {
  --ink: #02060c;
  --panel: #07101a;
  --panel-2: #0b1420;
  --paper: #e5e2dc;
  --muted: #8d949c;
  --cyan: #d52b28;
  --red: #d52b28;
  --steel: #7894a9;
  --line: rgba(218, 224, 229, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 88px; padding: 0 clamp(24px, 4vw, 72px); display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(2, 6, 12, .82); backdrop-filter: blur(16px); position: absolute; inset: 0 0 auto; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 14px; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 700; line-height: 1.45; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--red); color: white; font-family: Georgia, serif; font-size: 19px; letter-spacing: -.08em; }
nav { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); }
nav a, .header-cta { font-size: 12px; letter-spacing: .19em; text-transform: uppercase; font-weight: 700; }
nav a { position: relative; color: #b9c6cc; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -10px; height: 1px; background: var(--cyan); transition: right .2s ease; }
nav a:hover::after, nav a:focus-visible::after { right: 0; }
.header-cta { padding: 14px 19px; border: 1px solid var(--red); color: var(--paper); }

.hero { min-height: 100vh; padding: 150px clamp(24px, 7vw, 120px) 128px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); align-items: center; gap: 5vw; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 40%, rgba(75, 102, 122, .19), transparent 30%), radial-gradient(circle at 78% 78%, rgba(197, 34, 31, .11), transparent 21%), linear-gradient(90deg, rgba(1,4,9,.99) 0%, rgba(3,8,15,.91) 48%, rgba(2,6,12,.73) 100%); z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 88px 0 0; opacity: .16; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.map-layer { position: absolute; inset: 88px 0 0; z-index: -1; opacity: .72; background: radial-gradient(ellipse at 30% 50%, transparent 0 27%, rgba(120,148,169,.08) 27.3% 27.6%, transparent 28%); }
.route { position: absolute; width: 620px; height: 300px; border: 1px dashed rgba(120,148,169,.26); border-color: rgba(120,148,169,.30) transparent transparent; border-radius: 50%; transform: rotate(12deg); }
.route-one { top: 28%; left: 19%; }.route-two { top: 43%; left: 38%; transform: rotate(-12deg); }
.node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 18px var(--red); animation: pulse 3s ease-in-out infinite; }
.node-one { left: 39%; top: 39%; }.node-two { left: 53%; top: 51%; animation-delay: 1s; }.node-three { left: 67%; top: 31%; animation-delay: 2s; }
.hero-copy { position: relative; z-index: 2; animation: reveal .7s ease both; }
.eyebrow { color: var(--red); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; margin: 0 0 22px; }
h1 { margin: 0; text-transform: uppercase; font-family: Georgia, "Times New Roman", serif; font-size: clamp(58px, 6.7vw, 104px); line-height: .88; letter-spacing: -.06em; font-weight: 400; color: #e3e0da; text-shadow: 0 2px 24px rgba(120,148,169,.12); }
.byline { color: #a6b4bb; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; margin: 30px 0 0; }.byline strong { color: white; }
.hero-hook { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.5; font-weight: 300; color: #cbd5d9; margin: 28px 0 32px; }
.hero-actions { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.button { min-height: 54px; padding: 0 25px; display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; transition: transform .2s ease, filter .2s ease; }
.button-primary { color: #fff; background: linear-gradient(135deg, #a91412, #d62d29); box-shadow: 0 9px 35px rgba(197,34,31,.20); }.button-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
.text-link { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; border-bottom: 1px solid #78878e; padding: 16px 0 10px; }
.text-link span { margin-left: 18px; color: var(--red); }
.cover-stage { min-height: 600px; position: relative; display: grid; place-items: center; animation: cover-in .8s .08s ease both; perspective: 1000px; }
.book-cover { position: relative; width: min(76%, 390px); max-height: 71vh; object-fit: contain; box-shadow: -22px 28px 55px rgba(0,0,0,.62), 14px 0 0 #111a1f, 16px 0 0 #667178; transform: rotateY(-4deg) rotateX(1deg); transition: transform .35s ease; z-index: 2; }
.book-cover:hover { transform: rotateY(-1deg) rotateX(0) translateY(-5px); }
.cover-glow { position: absolute; width: 65%; height: 70%; background: radial-gradient(circle at 50% 35%, rgba(120,148,169,.13), rgba(197,34,31,.07) 62%, transparent 72%); filter: blur(65px); border-radius: 50%; }
.telemetry { position: absolute; border-left: 1px solid var(--red); padding: 8px 12px; font-size: 9px; letter-spacing: .16em; background: rgba(5,14,19,.7); z-index: 3; }
.telemetry span { color: var(--muted); display: block; margin-bottom: 5px; }.telemetry b { color: #d8e1e5; }.telemetry-a { left: 0; top: 27%; }.telemetry-b { right: 0; bottom: 24%; }
.status-rail { position: absolute; left: 3%; right: 3%; bottom: 28px; min-height: 92px; border: 1px solid var(--line); background: rgba(3,8,15,.76); backdrop-filter: blur(12px); display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 5px; }
.status-rail div { position: relative; padding: 22px 26px 18px 67px; border-right: 1px solid var(--line); }.status-rail div:last-child { border: 0; }
.status-rail span { position: absolute; left: 25px; top: 25px; color: var(--cyan); font-size: 10px; letter-spacing: .18em; }
.status-rail strong { display: block; text-transform: uppercase; letter-spacing: .17em; font-size: 12px; }.status-rail p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }

.section { padding: 120px clamp(24px, 7vw, 120px); border-top: 1px solid var(--line); }
.section-label { color: #697b84; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; margin-bottom: 76px; }.section-label span { color: var(--cyan); margin-right: 15px; }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; }
h2 { font-weight: 400; font-size: clamp(42px, 5vw, 74px); line-height: 1.02; letter-spacing: -.045em; margin: 0; }
.synopsis { font-family: Georgia, serif; color: #aebbc1; font-size: 18px; line-height: 1.75; }.synopsis p:first-child { margin-top: 0; }.synopsis blockquote { margin: 38px 0 0; padding: 22px 0 22px 25px; border-left: 2px solid var(--red); color: #eef2f3; font-size: 23px; font-style: italic; }
.world-section { background: linear-gradient(145deg, #07101a, #030810); position: relative; overflow: hidden; }.world-section::after { content: "47.6062° N / 122.3321° W"; position: absolute; top: 120px; right: 6vw; color: #3f535e; font-size: 10px; letter-spacing: .18em; }
.world-heading { max-width: 900px; }
.threat-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border: 1px solid var(--line); }
.threat-grid article { min-height: 300px; padding: 38px; border-right: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent); }.threat-grid article:last-child { border: 0; }
.threat-grid span { color: var(--cyan); font-size: 9px; letter-spacing: .22em; }.threat-grid h3 { margin: 92px 0 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }.threat-grid p { color: var(--muted); line-height: 1.7; margin: 0; }
.author-section { background: #040a11; }.author-card { display: grid; grid-template-columns: .65fr 1.35fr; gap: 8vw; align-items: center; }.author-monogram { aspect-ratio: 1; border: 1px solid var(--line); display: grid; place-items: center; font-family: Georgia, serif; font-size: clamp(62px, 9vw, 140px); font-weight: 300; letter-spacing: -.09em; color: #283642; background: radial-gradient(circle, rgba(197,34,31,.08), transparent 66%); }.author-card h2 { font-size: clamp(36px, 4.5vw, 64px); }.author-card>div:last-child>p:last-child { color: #91a1a9; font-family: Georgia, serif; font-size: 18px; line-height: 1.75; max-width: 700px; }
.buy-section { padding: 120px clamp(24px, 7vw, 120px); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; background: linear-gradient(120deg, #0a121c, #02060c 60%); border-top: 1px solid var(--line); }
.buy-panel { display: flex; gap: 34px; align-items: center; border: 1px solid var(--line); padding: 30px; background: rgba(255,255,255,.025); }.buy-panel img { width: 140px; box-shadow: 0 16px 35px #000; }.buy-panel h3 { text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; }.buy-panel p { color: var(--muted); margin: 5px 0; }.buy-panel .availability { color: #cad4d8; margin: 20px 0; text-transform: uppercase; font-size: 10px; letter-spacing: .15em; }
footer { min-height: 110px; padding: 28px clamp(24px, 4vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 11px; letter-spacing: .08em; } footer .brand { color: var(--paper); } footer .brand-mark { width: 36px; height: 36px; } footer>a { text-transform: uppercase; color: var(--paper); }

@keyframes reveal { from { opacity: 0; transform: translateY(14px); } }
@keyframes cover-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 900px) {
  nav { display: none; }.site-header { height: 74px; }.header-cta { font-size: 9px; padding: 11px 12px; }.brand { font-size: 10px; }.brand-mark { width: 39px; height: 39px; }
  .hero { padding-top: 118px; grid-template-columns: 1fr; min-height: auto; }.hero-copy { padding-top: 40px; }.cover-stage { min-height: 560px; }.book-cover { width: min(70%, 340px); }.status-rail { position: relative; left: auto; right: auto; bottom: auto; grid-column: 1; grid-template-columns: 1fr; }.status-rail div { border-right: 0; border-bottom: 1px solid var(--line); }
  .section-grid, .author-card, .buy-section { grid-template-columns: 1fr; }.threat-grid { grid-template-columns: 1fr; }.threat-grid article { border-right: 0; border-bottom: 1px solid var(--line); min-height: 240px; }.threat-grid h3 { margin-top: 60px; }.section-label { margin-bottom: 50px; }
}
@media (max-width: 560px) {
  h1 { font-size: 55px; }.hero { padding-left: 20px; padding-right: 20px; }.hero-hook br { display: none; }.cover-stage { min-height: 480px; }.telemetry { display: none; }
  .section, .buy-section { padding: 80px 22px; }.buy-panel { align-items: flex-start; gap: 20px; padding: 20px; }.buy-panel img { width: 92px; }.buy-panel .button { font-size: 9px; padding: 0 13px; gap: 12px; }
  footer { flex-direction: column; align-items: flex-start; }.section-label { margin-bottom: 38px; }
}