@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
  color-scheme: light;
  --ink: #09171e;
  --ink-soft: #14252d;
  --paper: #f0eee8;
  --paper-deep: #e5e2d9;
  --gold: #d9b777;
  --gold-dark: #b89352;
  --teal: #6c9b9a;
  --muted: #aab4b3;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 20; transform: translateY(-160%); padding: .75rem 1rem; background: var(--paper); color: var(--ink); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 5; inset: 0 0 auto; height: 88px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(1.25rem, 5.6vw, 6.25rem); border-bottom: 1px solid rgb(255 255 255 / 13%); color: #fff; }
.brand { display: inline-flex; gap: .7rem; align-items: center; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-name { font-size: .78rem; font-weight: 700; letter-spacing: .18em; }
.brand-name i { color: var(--gold); font-style: normal; }
.site-nav { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3.2rem); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.site-nav a { text-decoration: none; transition: color .2s ease; }
.site-nav a:hover, .footer-top a:hover { color: var(--gold); }
.site-nav .nav-cta { border: 1px solid rgb(255 255 255 / 55%); padding: .86rem 1.1rem; }
.nav-cta span { color: var(--gold); margin-left: .5rem; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: min(790px, 100svh); min-height: min(790px, 100vh); display: flex; align-items: center; overflow: hidden; background: #06121a; color: #fff; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; opacity: .84; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 16 23 / 93%) 1%, rgb(6 18 25 / 80%) 36%, rgb(6 18 25 / 18%) 76%, rgb(6 18 25 / 22%) 100%), linear-gradient(0deg, rgb(5 15 22 / 60%), transparent 34%, rgb(5 15 22 / 35%)); }
.hero-content { position: relative; z-index: 1; width: min(690px, 72vw); padding: 150px 0 120px clamp(1.5rem, 10.4vw, 11rem); }
.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.45rem; color: var(--gold); font-size: .64rem; font-weight: 600; letter-spacing: .2em; line-height: 1.6; text-transform: uppercase; }
.eyebrow-line { width: 30px; height: 1px; background: var(--gold); }
.bestseller { margin: 0 0 .55rem; color: #f3e8d0; font-size: .67rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(5rem, 10.5vw, 9.5rem); font-weight: 500; letter-spacing: -.065em; line-height: .84; }
.hero h1 em { color: var(--gold); font-weight: 500; }
.hero-deck { margin: 1.65rem 0 2rem; color: rgb(255 255 255 / 84%); font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8rem; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: .85rem 1.25rem; font-size: .69rem; font-weight: 700; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-gold { background: var(--gold); color: #101b20; }
.button-gold:hover { background: #edcf92; }
.button-gold span, .button-dark span { font-size: 1rem; }
.text-link { display: inline-flex; gap: .8rem; align-items: center; color: #fff; font-size: .68rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.text-link span { color: var(--gold); font-size: 1rem; transition: transform .2s ease; }
.text-link:hover span { transform: translateY(3px); }
.hero-caption { position: absolute; right: clamp(1.5rem, 5.6vw, 6.25rem); bottom: 2rem; display: flex; gap: .8rem; align-items: center; color: rgb(255 255 255 / 72%); font-size: .56rem; letter-spacing: .18em; }
.caption-rule { width: 36px; height: 1px; background: var(--gold); }
.hero-index { position: absolute; left: clamp(1.5rem, 5.6vw, 6.25rem); bottom: 2rem; color: rgb(255 255 255 / 58%); font-size: .58rem; letter-spacing: .2em; }

.availability { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem clamp(1.5rem, 10.4vw, 11rem); background: var(--gold); color: var(--ink); }
.availability-label { display: flex; gap: .7rem; align-items: center; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.availability-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgb(9 23 30 / 12%); }
.availability-date { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 2.3vw, 1.8rem); }
.date-arrow { display: inline-block; margin: 0 .7rem; color: rgb(9 23 30 / 55%); }
.availability-link { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.availability-link span { margin-left: .5rem; }

.story-section { display: grid; grid-template-columns: 12% minmax(0, 1fr) minmax(150px, 22%); gap: clamp(1.5rem, 4.5vw, 5rem); align-items: start; padding: clamp(5.5rem, 11vw, 10rem) clamp(1.5rem, 10.4vw, 11rem) clamp(6rem, 11vw, 10rem); }
.section-rail { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding-top: .4rem; color: #54636a; font-size: .59rem; letter-spacing: .17em; }
.rail-number { margin-top: 8rem; color: var(--gold-dark); font-family: var(--serif); font-size: 1.8rem; letter-spacing: 0; }
.story-copy { max-width: 760px; }
.eyebrow-dark { color: var(--gold-dark); }
.story-copy h2, .author-copy h2, .closing-cta h2 { margin: 0 0 1.8rem; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.7rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; }
.story-copy h2 em, .closing-cta h2 em { color: #678b89; font-weight: 500; }
.synopsis { max-width: 680px; margin: 0 0 2.1rem; color: #44545a; font-size: clamp(.95rem, 1.25vw, 1.08rem); line-height: 1.95; }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #223740; }
.button-dark span { color: var(--gold); }
.story-note { position: relative; align-self: center; min-height: 250px; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 1.2rem 1.5rem 1.7rem; border-left: 1px solid #c9c7bd; }
.note-kicker, .note-sub { color: #68777a; font-size: .57rem; letter-spacing: .18em; text-transform: uppercase; }
.note-line { width: 35px; height: 1px; margin: 1.1rem 0; background: var(--gold-dark); }
.story-note p { margin: 0 0 .75rem; font-family: var(--serif); font-size: 1.8rem; line-height: 1.05; }
.note-ornament { position: absolute; right: 1rem; bottom: 0; color: #c3b489; font-size: 2.2rem; }

.author-section { position: relative; display: grid; grid-template-columns: minmax(280px, .8fr) 1.1fr auto; align-items: center; gap: clamp(3rem, 8vw, 8rem); padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 10.4vw, 11rem); overflow: hidden; background: var(--ink); color: #f3f0e9; }
.author-art { position: relative; width: min(100%, 390px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #203c42 0%, #142c34 35%, #0b1d25 68%, #09171e 100%); }
.author-ring { position: absolute; border: 1px solid rgb(217 183 119 / 35%); border-radius: 50%; }
.ring-one { inset: 13%; }
.ring-two { inset: 24%; border-color: rgb(217 183 119 / 21%); }
.author-signal { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: var(--serif); font-size: 1.3rem; letter-spacing: .08em; }
.author-signal span { position: absolute; right: 17px; bottom: 18px; font-size: .67rem; }
.author-coordinate { position: absolute; right: 1.3rem; bottom: 1.3rem; color: rgb(243 240 233 / 60%); font-size: .49rem; letter-spacing: .17em; line-height: 1.8; text-align: right; }
.author-copy { max-width: 550px; }
.author-copy h2 { margin-bottom: 1.25rem; font-size: clamp(2.8rem, 5vw, 4.7rem); }
.author-copy > p:not(.eyebrow) { max-width: 480px; margin-bottom: 1.8rem; color: #c1c9c8; font-size: .98rem; line-height: 1.85; }
.author-copy strong { color: #f3f0e9; font-weight: 500; }
.email-link { display: inline-flex; gap: .7rem; align-items: center; padding-bottom: .45rem; border-bottom: 1px solid var(--gold); color: var(--gold); font-size: .85rem; text-decoration: none; }
.email-link span { transition: transform .2s ease; }
.email-link:hover span { transform: translate(2px, -2px); }
.author-side-note { align-self: end; padding-bottom: .4rem; color: rgb(243 240 233 / 52%); font-family: var(--serif); font-size: 1rem; font-style: italic; line-height: 1.6; }

.closing-cta { display: flex; flex-direction: column; align-items: center; padding: clamp(5rem, 10vw, 8rem) 1.5rem; text-align: center; }
.closing-rule { width: 1px; height: 48px; margin-bottom: 2rem; background: var(--gold-dark); }
.closing-cta .eyebrow { justify-content: center; color: var(--gold-dark); }
.closing-cta h2 { margin-bottom: 2rem; font-size: clamp(2.5rem, 5.5vw, 4.6rem); }
.site-footer { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; padding: 1.4rem clamp(1.5rem, 5.6vw, 6.25rem); background: #061219; color: #f1eee7; }
.footer-brand .brand-name { font-size: .68rem; }
.site-footer p, .footer-email, .footer-top { margin: 0; color: #aab4b3; font-size: .65rem; letter-spacing: .04em; }
.footer-email, .footer-top a { text-decoration: none; }
.footer-top a { color: #aab4b3; }

@media (max-width: 900px) {
  .hero-content { width: 76vw; padding-left: 7vw; }
  .story-section { grid-template-columns: 8% minmax(0, 1fr); }
  .story-note { grid-column: 2; min-height: auto; padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid #c9c7bd; }
  .story-note p br { display: none; }
  .note-line { margin: .8rem 0; }
  .note-ornament { right: 1rem; bottom: .5rem; }
  .author-section { grid-template-columns: minmax(220px, .8fr) 1fr; gap: 3rem; }
  .author-side-note { display: none; }
}

@media (max-width: 650px) {
  html { scroll-padding-top: 72px; }
  .site-header { height: 72px; padding: 0 1.25rem; }
  .brand-name { font-size: .69rem; }
  .menu-toggle { width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgb(255 255 255 / 45%); background: transparent; color: white; }
  .menu-toggle span { width: 16px; height: 1px; background: currentColor; }
  .site-nav { position: absolute; top: 71px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1rem; background: #09171e; }
  .site-nav.is-open { display: flex; }
  .site-nav > a { padding: 1rem .25rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
  .site-nav .nav-cta { margin-top: .75rem; padding: .9rem; border: 1px solid rgb(255 255 255 / 40%); text-align: center; }
  .hero { min-height: 680px; min-height: 88svh; align-items: end; }
  .hero-image { object-position: 60% center; }
  .hero-shade { background: linear-gradient(90deg, rgb(5 16 23 / 77%), rgb(6 18 25 / 28%)), linear-gradient(0deg, rgb(5 15 22 / 85%), transparent 74%); }
  .hero-content { width: 100%; padding: 150px 1.5rem 110px; }
  .hero h1 { font-size: clamp(5rem, 22vw, 7rem); }
  .hero-deck { margin-top: 1.3rem; }
  .hero-actions { gap: 1.2rem; }
  .hero-caption { right: 1.5rem; bottom: 1.5rem; font-size: .48rem; }
  .hero-index { left: 1.5rem; bottom: 1.5rem; font-size: .5rem; }
  .availability { display: grid; grid-template-columns: 1fr auto; gap: .75rem .8rem; padding: 1.35rem 1.5rem; }
  .availability-label { grid-column: 1 / -1; font-size: .59rem; }
  .availability-date { font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .date-arrow { margin: 0 .35rem; }
  .availability-link { font-size: .57rem; }
  .story-section { grid-template-columns: 1fr; gap: 1.5rem; padding: 5rem 1.5rem; }
  .section-rail { flex-direction: row; align-items: center; }
  .rail-number { margin: 0; font-size: 1.3rem; }
  .story-copy h2, .author-copy h2 { font-size: clamp(2.45rem, 11vw, 3.7rem); }
  .synopsis { font-size: .95rem; line-height: 1.85; }
  .story-note { grid-column: 1; padding-top: 1.2rem; }
  .author-section { grid-template-columns: 1fr; gap: 2.4rem; padding: 4rem 1.5rem; }
  .author-art { width: min(100%, 310px); margin: 0 auto; }
  .author-copy { max-width: none; }
  .author-copy > p:not(.eyebrow) { font-size: .94rem; }
  .closing-cta { padding: 4.5rem 1.25rem; }
  .closing-cta h2 { font-size: clamp(2.4rem, 10vw, 3.5rem); }
  .site-footer { display: grid; grid-template-columns: 1fr auto; gap: .8rem 1rem; padding: 1.4rem 1.5rem; }
  .site-footer p { grid-column: 1; grid-row: 2; }
  .footer-email { grid-column: 2; grid-row: 1; }
  .footer-top { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}