@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-v20-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-v20-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0c0b0a;
  --bg-soft: #15120f;
  --panel: #1b1712;
  --text: #f1eadb;
  --muted: #b7aa96;
  --gold: #c59a52;
  --gold-light: #efd18f;
  --blue: #6f8cab;
  --line: rgba(239, 209, 143, .18);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 72% 18%, rgba(93, 114, 137, .11), transparent 31rem),
    radial-gradient(circle at 18% 40%, rgba(197, 154, 82, .07), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: white; color: black; padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem clamp(1.2rem, 4vw, 4rem);
  background: linear-gradient(to bottom, rgba(12,11,10,.94), rgba(12,11,10,.55), transparent);
  backdrop-filter: blur(5px);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-signet { width: 4.2rem; height: auto; flex: 0 0 auto; }
.brand-wordmark { display: inline-flex; flex-direction: column; letter-spacing: .14em; line-height: 1; }
.brand-main { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.85rem; font-weight: 600; }
.brand-sub { margin-top: .42rem; font-size: .75rem; letter-spacing: .38em; color: var(--gold-light); }
.nav { display: flex; gap: 1.5rem; font-size: .82rem; color: var(--muted); }
.nav a:hover { color: var(--text); }

.hero {
  min-height: 100svh;
  max-width: var(--max); margin: auto;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding: 8rem clamp(1.2rem, 4vw, 3rem) 5rem;
  position: relative;
}
.hero-glow { position: absolute; width: 38rem; height: 38rem; right: -12rem; top: 15%; background: radial-gradient(circle, rgba(224,177,84,.1), transparent 66%); pointer-events:none; }
.book-photo { width: min(100%, 29rem); margin: 0 auto; position: relative; transform: rotate(-1.2deg); }
.book-photo::before { content:""; position:absolute; inset:8% -4% -5% 9%; background: rgba(0,0,0,.7); filter: blur(28px); z-index:-1; }
.book-photo img { width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.eyebrow { color: var(--gold-light); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; }
h1,h2,h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; line-height: .98; margin: 0; }
h1 { font-size: clamp(4rem, 8vw, 7.4rem); letter-spacing: -.04em; text-wrap: balance; }
h2 { font-size: clamp(2.8rem, 5.4vw, 5rem); letter-spacing: -.03em; }
h3 { font-size: 1.65rem; }
.subtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.3rem, 2.4vw, 2rem); font-style: italic; color: var(--gold-light); margin: 1rem 0 .7rem; }
.author { letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; color: var(--muted); }
.lead { max-width: 36rem; font-size: 1.08rem; color: #d6ccbb; margin: 2rem 0; }
.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height: 3rem; padding: .75rem 1.15rem; border: 1px solid var(--line); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; transition: .2s ease; }
.button-primary { background: var(--gold); color:#17110a; border-color:var(--gold); font-weight:600; }
.button-primary:hover { background:var(--gold-light); }
.button-ghost:hover { border-color:var(--gold); color:var(--gold-light); }
.button-disabled { opacity:.45; cursor:not-allowed; }
.scroll-cue { position:absolute; bottom:2rem; left:50%; font-size:1.5rem; color:var(--muted); }

.section { max-width: var(--max); margin:auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem,4vw,3rem); }
.section-kicker { color:var(--gold); text-transform:uppercase; letter-spacing:.25em; font-size:.68rem; margin-bottom:2.5rem; }
.story-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(3rem,8vw,8rem); }
.story-copy p { margin:0 0 1.5rem; color:#d7cebf; font-size:1.06rem; }

.quote-band { border-block:1px solid var(--line); padding:4rem 1rem; text-align:center; background:linear-gradient(90deg, transparent, rgba(197,154,82,.05), transparent); }
.quote-band p { margin:.2rem 0; font-family:'Cormorant Garamond', Georgia, serif; font-size:clamp(1.5rem,3vw,2.7rem); text-transform:uppercase; letter-spacing:.08em; }
.quote-band p:nth-child(2) { color:var(--gold-light); }

.format-copy { max-width:900px; }
.format-copy > p:not(.eyebrow,.note) { color:#d7cebf; }
.format-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2rem 0; }
.format-cards article { padding:1.4rem; border:1px solid var(--line); background:rgba(255,255,255,.015); }
.format-cards p,.note,.muted { color:var(--muted); }
.note { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }

.author-card { max-width:850px; }
.sample { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(3rem,8vw,8rem); align-items:center; }
.sample-visual { width:min(100%,27rem); margin:0; justify-self:center; }
.sample-visual img { width:100%; height:auto; object-fit:contain; border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.sample-copy h2 { margin-bottom:1.5rem; }
.sample-copy > p:not(.eyebrow) { color:var(--muted); margin-bottom:2rem; }

.publisher { display:grid; grid-template-columns:180px 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; border-top:1px solid var(--line); }
.publisher-mark { width:160px; aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-light); font-family:'Cormorant Garamond',Georgia,serif; font-size:4rem; }
.publisher p:not(.eyebrow) { color:#d3c9ba; max-width:680px; }
.contact { border-top:1px solid var(--line); }
.contact h2 { margin-bottom:1.5rem; }
.contact-copy { margin:0 0 .8rem; color:#d3c9ba; }
.contact-email { color:var(--gold-light); text-decoration:underline; text-decoration-color:rgba(197,154,82,.55); text-underline-offset:.25em; transition:color .2s ease, text-decoration-color .2s ease; }
.contact-email:hover,.contact-email:focus-visible { color:var(--text); text-decoration-color:var(--gold); }
.contact-actions { margin-top:2rem; }
.site-footer { max-width:var(--max); margin:auto; padding:2rem clamp(1.2rem,4vw,3rem) 3rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.8rem; }
.site-footer nav { display:flex; gap:1.2rem; }
.back-to-top { position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:15; width:2.8rem; height:2.8rem; display:grid; place-items:center; border:1px solid var(--line); background:rgba(21,18,15,.82); color:var(--gold-light); font-size:1.2rem; line-height:1; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(.5rem); transition:opacity .2s ease, visibility .2s ease, transform .2s ease, border-color .2s ease; backdrop-filter:blur(5px); }
.back-to-top.visible { opacity:.75; visibility:visible; pointer-events:auto; transform:none; }
.back-to-top:hover,.back-to-top:focus-visible { opacity:1; border-color:var(--gold); }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 820px) {
  .nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:7rem; min-height:auto; }
  .hero-copy { order:-1; }
  .hero h1 { font-size:clamp(3.7rem,15vw,6rem); }
  .scroll-cue { display:none; }
  .story-grid,.sample,.publisher { grid-template-columns:1fr; }
  .sample-copy { order:-1; }
}
@media (max-width:520px) {
  .brand { gap:.5rem; }
  .brand-signet { width:3.4rem; }
  .brand-main { font-size:1.55rem; }
  .brand-sub { margin-top:.36rem; font-size:.68rem; }
  .format-cards { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .reveal { opacity:1; transform:none; }
}
