:root {
  --ink: #0a0a0a;
  --blood: #c8102e;
  --cream: #f5f1e8;
  --white: #ffffff;
  --muted: #aaa59c;
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--cream); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; font-family: "Cormorant Garamond", Georgia, serif; background: var(--ink); }

.site-header {
  position: absolute; z-index: 10; inset: 0 0 auto; height: 92px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 84px); border-bottom: 1px solid rgba(245,241,232,.13);
}
.site-header nav { display:flex; gap:30px; margin-left:auto; margin-right:42px; }
.site-header nav a, footer > a { color:#9a968e; text-decoration:none; font:300 9px/1 "Oswald",sans-serif; letter-spacing:.25em; text-transform:uppercase; transition:color .2s; }
.site-header nav a:hover, footer > a:hover { color:var(--cream); }
.publisher { color: var(--cream); text-decoration: none; font-size: 26px; line-height: .8; }
.publisher small { display: block; margin-top: 12px; font: 300 8px/1 "Oswald", sans-serif; letter-spacing: .55em; text-align: center; }
.red, .cover-publisher span { color: var(--blood); }
.status { font: 400 10px/1 "Oswald", sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #d4cfc5; }
.status i { display: inline-block; width: 5px; height: 5px; margin: 0 10px 1px 0; border-radius: 50%; background: var(--blood); box-shadow: 0 0 12px var(--blood); }

.hero {
  min-height: 100svh; display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(360px, .9fr);
  align-items: center; position: relative; overflow: hidden; padding: 130px clamp(24px, 7vw, 118px) 60px;
  background:
    linear-gradient(90deg, transparent 0 53%, rgba(255,255,255,.035) 53% 53.08%, transparent 53.08%),
    radial-gradient(circle at 75% 52%, rgba(200,16,46,.11), transparent 28%), var(--ink);
}
.hero::before { content:""; position:absolute; inset: 92px auto 0 clamp(24px, 5vw, 84px); width:1px; background:rgba(245,241,232,.12); }
.hero-copy { position: relative; z-index: 2; max-width: 720px; padding-left: clamp(20px, 3vw, 48px); }
.eyebrow { margin: 0 0 24px; color: var(--blood); font: 500 10px/1 "Oswald", sans-serif; letter-spacing: .52em; }
h1 { margin: 0; color: var(--cream); font: 600 clamp(72px, 9vw, 154px)/.8 "Oswald", sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
h1 span { display: block; margin-top: .13em; color: transparent; -webkit-text-stroke: 1px rgba(245,241,232,.68); }
.hero-lead { max-width: 520px; margin: 44px 0 12px; font-size: clamp(24px, 2.2vw, 38px); font-style: italic; line-height: 1.05; }
.hero-detail { max-width: 460px; margin: 0; color: var(--muted); font-family: "Oswald", sans-serif; font-size: 13px; font-weight: 300; line-height: 1.7; letter-spacing: .04em; }
.author-line { display:flex; align-items:center; gap:20px; margin-top: 38px; font-size: 17px; }
.author-line span { width: 42px; height: 2px; background: var(--blood); }
.author-line p { margin: 0; }

.book-stage { position: relative; z-index: 2; display: grid; place-items: center; min-height: 650px; perspective: 1600px; }
.book-glow { position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:rgba(200,16,46,.14); filter:blur(80px); }
.book { position: relative; width: min(360px, 68%); aspect-ratio: 2 / 3; transform: rotateY(-12deg) rotateX(2deg); filter: drop-shadow(30px 28px 34px rgba(0,0,0,.7)); }
.book-cover { position:absolute; inset:0; overflow:hidden; background:#050505; border:1px solid #282828; box-shadow: inset -10px 0 18px rgba(255,255,255,.025); }
.book-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,rgba(255,255,255,.06),transparent 15% 82%,rgba(0,0,0,.45)); pointer-events:none; }
.book-cover img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.book-spine { position:absolute; top:1.1%; bottom:1.1%; left:-17px; width:18px; transform-origin:right; transform:rotateY(-78deg); background:linear-gradient(90deg,#030303,#171717); border-left:1px solid #333; }
.case-number { position:absolute; right:0; bottom:8%; margin:0; color:#777; font:300 8px/1 "Oswald",sans-serif; letter-spacing:.3em; writing-mode:vertical-rl; }
.case-number span { color:var(--cream); }

.hero-note { position:absolute; right:clamp(24px,3.5vw,60px); bottom:34px; width:250px; display:flex; gap:18px; align-items:flex-start; }
.note-index { color:var(--blood); font:500 9px/1 "Oswald",sans-serif; letter-spacing:.2em; }
.hero-note p { margin:0; color:#8f8b84; font-size:15px; font-style:italic; line-height:1.2; }

.section-code { color:var(--blood); font:500 9px/1 "Oswald",sans-serif; letter-spacing:.5em; text-transform:uppercase; }
.book-discovery { display:grid; grid-template-columns:1fr minmax(340px,.72fr); gap:clamp(60px,9vw,150px); align-items:center; padding:clamp(100px,12vw,190px) clamp(24px,8vw,135px); background:var(--cream); color:var(--ink); }
.book-discovery h2, .preface h2, .compass h2, .reading-room h2, .author h2, .availability h2 { margin:0; font-size:clamp(50px,6.5vw,110px); line-height:.86; font-weight:600; letter-spacing:-.04em; }
.book-discovery h2 em, .reading-room h2 em, .availability h2 em { font-weight:500; }
.discovery-copy { max-width:820px; }
.discovery-copy h2 { margin:50px 0 45px; }
.discovery-copy > p:not(.section-code) { max-width:680px; color:#565149; font-size:clamp(18px,1.45vw,24px); line-height:1.5; }
.discovery-copy blockquote { max-width:680px; margin:55px 0 0; padding:35px 0 0 35px; border-top:1px solid #bcb6aa; border-left:3px solid var(--blood); font-size:clamp(24px,2vw,34px); font-style:italic; line-height:1.15; }
.back-cover { margin:0; }
.back-cover img { display:block; width:100%; max-height:780px; object-fit:contain; filter:drop-shadow(28px 30px 34px rgba(0,0,0,.2)); }
.back-cover figcaption { margin-top:22px; color:#7e786e; font:300 8px/1 "Oswald",sans-serif; letter-spacing:.32em; }

.preface { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(70px,11vw,180px); padding:clamp(110px,14vw,220px) clamp(24px,9vw,150px); background:var(--cream); color:var(--ink); }
.preface-title { position:sticky; top:135px; align-self:start; }
.preface-title h2 { margin:50px 0 16px; }
.preface-title > p:last-child { color:#6c665e; font-size:23px; font-style:italic; }
.preface-reading { max-width:800px; }
.preface-reading blockquote { margin:0 0 70px; font-size:clamp(36px,4.4vw,68px); font-style:italic; line-height:1.04; }
.preface-reading > p { color:#403c36; font-size:clamp(19px,1.55vw,25px); line-height:1.58; }
.drop-cap::first-letter { float:left; margin:.06em .12em 0 0; color:var(--blood); font-size:4.5em; line-height:.75; }
.preface-link { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:65px; padding:28px 0; border-top:1px solid #aaa49a; border-bottom:1px solid #aaa49a; color:var(--ink); text-decoration:none; font-size:24px; font-weight:600; }
.preface-link span { color:var(--blood); font:500 8px/1 "Oswald",sans-serif; letter-spacing:.28em; }

.compass { display:grid; grid-template-columns:.65fr 1.35fr; gap:clamp(60px,8vw,140px); padding:clamp(100px,12vw,190px) clamp(24px,7vw,118px); border-top:1px solid #252525; }
.compass-intro { align-self:center; }
.compass-intro > p:last-child { max-width:430px; margin-top:40px; color:#aaa59c; font-size:20px; line-height:1.45; }
.compass h2 { margin-top:45px; }
.quadrants { position:relative; display:grid; grid-template-columns:1fr 1fr; aspect-ratio:1.22; border:1px solid #383838; }
.quadrants article { position:relative; padding:clamp(25px,3vw,50px); }
.quadrants article > span { float:right; color:var(--blood); font:500 10px/1 "Oswald",sans-serif; letter-spacing:.2em; }
.quadrants small { color:#6f6c67; font:300 8px/1 "Oswald",sans-serif; letter-spacing:.28em; }
.quadrants h3 { margin:30px 0 20px; font-size:clamp(28px,2.3vw,42px); line-height:.9; }
.quadrants article p { margin:0; color:var(--cream); font:400 13px/1 "Oswald",sans-serif; letter-spacing:.08em; }
.quadrants article i { position:absolute; left:clamp(25px,3vw,50px); bottom:30px; color:#777; font-size:14px; }
.cross-h,.cross-v { position:absolute; background:#383838; pointer-events:none; }
.cross-h { left:0; right:0; top:50%; height:1px; }
.cross-v { top:0; bottom:0; left:50%; width:1px; }
.compass-core { position:absolute; z-index:3; display:grid; place-items:center; top:50%; left:50%; width:68px; height:68px; transform:translate(-50%,-50%); border:1px solid #5a5650; border-radius:50%; background:var(--ink); color:var(--cream); font-size:23px; }

.reading-room { padding:clamp(100px,12vw,190px) clamp(24px,7vw,118px); background:var(--cream); color:var(--ink); }
.reading-room h2 { margin-top:45px; }
.reading-columns { display:grid; grid-template-columns:repeat(4,1fr); margin-top:100px; border-top:1px solid #bdb7ab; }
.reading-columns article { padding:35px clamp(20px,2.5vw,42px) 0 0; border-right:1px solid #bdb7ab; min-height:250px; }
.reading-columns article + article { padding-left:clamp(20px,2.5vw,42px); }
.reading-columns article:last-child { border-right:0; }
.reading-columns span { color:var(--blood); font:500 9px/1 "Oswald",sans-serif; }
.reading-columns h3 { margin:38px 0 16px; font-size:25px; line-height:1; }
.reading-columns p { color:#57534d; font-size:17px; line-height:1.4; }

.quote-band { position:relative; overflow:hidden; min-height:620px; display:grid; place-content:center; text-align:center; padding:100px 24px; background:radial-gradient(circle at center,rgba(200,16,46,.11),transparent 42%),#070707; }
.quote-band blockquote { position:relative; z-index:2; margin:0; font-size:clamp(44px,6vw,96px); line-height:.92; font-style:italic; }
.quote-band blockquote em { color:var(--blood); }
.quote-band > p { position:relative; z-index:2; margin-top:50px; color:#777; font:400 9px/1 "Oswald",sans-serif; letter-spacing:.5em; }
.pulse-line { position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg,transparent 0 12%,#321017 12% 27%,transparent 27% 32%,#c8102e 32% 33%,transparent 33% 38%,#321017 38% 100%); opacity:.5; }

.author { display:grid; grid-template-columns:.9fr 1.1fr; min-height:850px; background:#111; }
.author-image { min-height:700px; overflow:hidden; }
.author-image img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); }
.author-copy { align-self:center; max-width:730px; padding:90px clamp(40px,8vw,130px); }
.author h2 { margin:42px 0; text-transform:uppercase; font-family:"Oswald",sans-serif; }
.author-lead { color:var(--cream)!important; font-size:clamp(23px,2vw,32px)!important; font-style:italic; line-height:1.2!important; }
.author-copy > p:not(.section-code) { color:#a8a39a; font-size:18px; line-height:1.55; }
.text-link { display:inline-block; margin-top:28px; padding-bottom:8px; border-bottom:1px solid var(--blood); color:var(--cream); text-decoration:none; font:400 10px/1 "Oswald",sans-serif; letter-spacing:.22em; text-transform:uppercase; }
.text-link span { color:var(--blood); margin-left:12px; }

.availability { position:relative; overflow:hidden; min-height:720px; display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; padding:clamp(100px,12vw,190px) clamp(24px,8vw,135px); background:var(--cream); color:var(--ink); }
.availability-mark { font:600 clamp(220px,32vw,560px)/.7 "Oswald",sans-serif; color:transparent; -webkit-text-stroke:1px rgba(10,10,10,.12); transform:translateX(-18%); }
.availability-copy { position:relative; z-index:2; max-width:800px; }
.availability-copy > p:not(.section-code) { max-width:620px; margin-top:35px; color:#5e5951; font-size:21px; line-height:1.45; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; }
.contact-grid a { padding:25px 0; border-top:1px solid #aaa49a; color:var(--ink); text-decoration:none; }
.contact-grid small { display:block; margin-bottom:12px; color:var(--blood); font:500 8px/1 "Oswald",sans-serif; letter-spacing:.34em; }
.contact-grid strong { font-size:21px; }

footer { min-height:170px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:45px clamp(24px,5vw,84px); border-top:1px solid #252525; }
footer p { color:#716d66; font:300 8px/1 "Oswald",sans-serif; letter-spacing:.28em; }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 142px; }
  .hero-copy { padding-left: 10px; }
  .book-stage { min-height: 620px; }
  .book { width: min(330px, 76vw); }
  .hero-note { display:none; }
  .site-header nav { display:none; }
  .book-discovery,.preface,.compass,.author,.availability { grid-template-columns:1fr; }
  .preface-title { position:static; }
  .quadrants { margin-top:30px; }
  .reading-columns { grid-template-columns:1fr 1fr; }
  .reading-columns article:nth-child(2) { border-right:0; }
  .reading-columns article { border-bottom:1px solid #bdb7ab; padding-bottom:35px; }
  .availability-mark { position:absolute; left:-8%; top:20%; }
  .availability-copy { margin-left:auto; }
}
@media (max-width: 520px) {
  .site-header { height:76px; }
  .publisher { font-size:22px; }
  .status { letter-spacing:.18em; }
  .hero { padding: 120px 22px 40px; }
  h1 { font-size: clamp(62px, 21vw, 94px); }
  h1 span { margin-top: .16em; }
  .hero-lead { margin-top:30px; }
  .book-stage {
    min-height:650px;
    margin:55px -22px -40px;
    padding:72px 22px 82px;
    background:var(--cream);
    border-top:1px solid rgba(10,10,10,.12);
  }
  .book-stage::before {
    content:"EL LIBRO";
    position:absolute;
    top:26px;
    left:28px;
    color:var(--blood);
    font:500 8px/1 "Oswald",sans-serif;
    letter-spacing:.42em;
  }
  .book-stage .book { width:min(310px,78vw); filter:drop-shadow(20px 24px 24px rgba(10,10,10,.28)); }
  .book-stage .book-glow { background:rgba(200,16,46,.08); }
  .book-stage .case-number { right:18px; bottom:28px; color:#827b70; }
  .book-stage .case-number span { color:var(--ink); }
  .book-discovery,.preface,.compass,.reading-room,.availability { padding-left:24px; padding-right:24px; }
  .book-discovery { gap:70px; }
  .discovery-copy h2 { margin-top:42px; }
  .discovery-copy blockquote { padding-left:22px; }
  .back-cover img { max-height:none; }
  .preface { gap:60px; }
  .preface-reading blockquote { margin-bottom:50px; }
  .preface-link { align-items:flex-start; flex-direction:column; }
  .quadrants { display:block; aspect-ratio:auto; }
  .quadrants article { min-height:245px; border-bottom:1px solid #383838; }
  .quadrants article i { bottom:24px; }
  .cross-h,.cross-v,.compass-core { display:none; }
  .reading-columns { grid-template-columns:1fr; margin-top:65px; }
  .reading-columns article { border-right:0; padding-left:0!important; }
  .author-image { min-height:560px; }
  .author-copy { padding:70px 24px; }
  .contact-grid { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion: no-preference) {
  .book { animation: reveal 1.1s cubic-bezier(.2,.75,.2,1) both; }
  .hero-copy > * { animation: rise .8s ease both; }
  .hero-copy > *:nth-child(2) { animation-delay:.08s; }
  .hero-copy > *:nth-child(3) { animation-delay:.16s; }
  .hero-copy > *:nth-child(4) { animation-delay:.22s; }
  .hero-copy > *:nth-child(5) { animation-delay:.28s; }
  @keyframes reveal { from { opacity:0; transform:translateY(30px) rotateY(-22deg); } }
  @keyframes rise { from { opacity:0; transform:translateY(18px); } }
}