:root{
  --paper:#efe6d2; --paper-2:#e4d8bd; --ink:#1d1a17; --red:#c8241c; --red-dark:#8e1811;
  --ochre:#d9a441; --muted:#5b5248;
  --display:"Big Shoulders Display", Impact, sans-serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.2rem;line-height:1.6;overflow-x:hidden}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
a{color:inherit}
em{font-style:italic}

.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1rem,4vw,3rem);background:var(--ink);color:var(--paper)}
.topbar nav{display:flex;gap:1.4rem;align-items:center}
.topbar nav a{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;opacity:.85}
.topbar nav a:hover{opacity:1;color:var(--ochre)}
.topbar .nav-cta{background:var(--red);padding:.4rem .8rem;opacity:1}
@media (max-width:640px){.topbar nav a:not(.nav-cta){display:none}}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:800;font-size:1.25rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:.75rem 1.6rem;border:3px solid var(--ink);cursor:pointer;transition:transform .15s, box-shadow .15s}
.btn-red{background:var(--red);color:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.btn-red:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:wait}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;padding:clamp(3rem,7vw,6rem) clamp(1rem,5vw,4rem);max-width:1300px;margin:0 auto;position:relative}
.kicker{color:var(--red);margin-bottom:1rem}
.hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.82;letter-spacing:-.01em}
.hero h1 span{display:block}
.hero .l1{font-size:clamp(2.6rem,6vw,5rem);font-weight:500}
.hero .l2{font-size:clamp(6rem,17vw,13rem);color:var(--red);font-family:var(--serif);font-style:italic;font-weight:600;text-transform:none;line-height:.9;margin:.1em 0 .05em -.04em}
.hero .l3{font-size:clamp(3.2rem,8vw,6.5rem)}
.lede{font-size:clamp(1.3rem,2vw,1.6rem);font-style:italic;max-width:30ch;margin:1.6rem 0 2rem;color:var(--muted)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-text>*{animation:rise .8s both}
.hero-text>*:nth-child(2){animation-delay:.1s}.hero-text>*:nth-child(3){animation-delay:.25s}.hero-text>*:nth-child(4){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}

/* cover */
.cover-wrap{position:relative;justify-self:center;perspective:1200px;animation:rise 1s .3s both}
.cover{position:relative;width:min(360px,78vw);aspect-ratio:2/3;background:var(--red);overflow:hidden;color:var(--paper);
  transform:rotateY(-14deg) rotateZ(1deg);transition:transform .6s;box-shadow:-14px 0 0 -4px var(--red-dark), 20px 30px 50px rgba(0,0,0,.35);border-left:6px solid rgba(0,0,0,.25)}
.cover:hover{transform:rotateY(-4deg)}
.cover-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 62%, rgba(255,220,160,.16) 0 6deg, transparent 6deg 14deg)}
.cover-star{position:absolute;top:7%;left:50%;transform:translateX(-50%);font-size:3.4rem;color:var(--ochre);line-height:1}
.cover-figures{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);width:62%;height:42%}
.fig{position:absolute;bottom:0;width:46%;height:100%;background:var(--ink);
  clip-path:polygon(38% 0,62% 0,68% 8%,66% 20%,60% 24%,100% 34%,100% 100%,0 100%,0 34%,40% 24%,34% 20%,32% 8%)}
.fig-a{left:8%}
.fig-b{right:8%;transform:scaleX(-1)}
.cover-figures::after{content:"";position:absolute;left:50%;top:48%;width:16%;height:10%;transform:translateX(-50%);background:var(--ink)}
.cover-title{position:absolute;top:22%;left:0;right:0;text-align:center;font-family:var(--display);text-transform:uppercase;line-height:.9}
.cover-title span{display:block;font-size:1.6rem;font-weight:800;letter-spacing:.08em}
.cover-title strong{display:block;font-family:var(--serif);font-style:italic;font-weight:600;font-size:4.6rem;text-transform:none;color:var(--paper);line-height:.95}
.cover-author{position:absolute;bottom:6%;left:0;right:0;text-align:center;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.25em;text-transform:uppercase;background:var(--ink);padding:.35rem 0}
.cover-stamp{position:absolute;top:44%;right:-4%;transform:rotate(18deg);border:3px double var(--paper);padding:.3rem .7rem;font-size:.75rem;font-weight:500;text-align:center;opacity:.85}
.cover-shadow{position:absolute;bottom:-30px;left:10%;right:0;height:30px;background:radial-gradient(ellipse at center, rgba(0,0,0,.25), transparent 70%)}

@media (max-width:860px){.hero{grid-template-columns:1fr;text-align:left}.cover-wrap{order:-1}}

/* ticker */
.ticker{background:var(--red);color:var(--paper);overflow:hidden;border-block:3px solid var(--ink);padding:.7rem 0}
.ticker-track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:scroll 30s linear infinite;font-size:.9rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* dossier */
.dossier-section{padding:clamp(4rem,8vw,7rem) clamp(1rem,5vw,4rem);background:var(--paper-2)}
.dossier{position:relative;max-width:780px;margin:0 auto;background:#f6efdd;padding:clamp(2rem,5vw,3.5rem);box-shadow:0 2px 0 #cbbd9d, 0 4px 0 #f6efdd, 0 6px 0 #cbbd9d, 0 20px 40px rgba(0,0,0,.12);transform:rotate(-.4deg)}
.dossier::before{content:"";position:absolute;top:-14px;left:10%;width:90px;height:28px;background:rgba(217,164,65,.55);transform:rotate(-3deg)}
.dossier-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-bottom:1px dashed var(--muted);padding-bottom:.8rem;margin-bottom:1.8rem;color:var(--muted)}
.dossier h2,.section-title,.author h2,.order h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.95;margin-bottom:1.2rem}
.dossier p{margin-bottom:1.1rem}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:900;font-size:4.6rem;line-height:.8;padding:.3rem .5rem 0 0;color:var(--red)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2rem;margin-top:2rem;padding-top:1.4rem;border-top:1px dashed var(--muted)}
.facts dt{color:var(--muted);font-size:.7rem}
.facts dd{font-size:.85rem;color:var(--ink);text-transform:none;letter-spacing:.02em}
.facts .red{color:var(--red);font-weight:500}
.stamp-round{position:absolute;right:6%;bottom:12%;width:130px;height:130px;border-radius:50%;border:4px double var(--red);color:var(--red);display:grid;place-items:center;text-align:center;font-weight:500;transform:rotate(-16deg);opacity:.75;font-size:.8rem;line-height:1.3}
@media (max-width:640px){.stamp-round{display:none}.facts{grid-template-columns:1fr}}

/* quote */
.quote-band{background:var(--ink);color:var(--paper);padding:clamp(4rem,9vw,7rem) 1.5rem;text-align:center;position:relative;overflow:hidden}
.quote-band::before{content:"★";position:absolute;font-size:28rem;line-height:1;color:var(--red);opacity:.12;left:50%;top:50%;transform:translate(-50%,-52%)}
.quote-band p{position:relative;font-style:italic;font-size:clamp(2rem,5vw,3.8rem);line-height:1.15;max-width:22ch;margin:0 auto}

/* era */
.era{padding:clamp(4rem,8vw,7rem) clamp(1rem,5vw,4rem);max-width:1200px;margin:0 auto}
.section-title span{color:var(--red)}
.era-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.era-card{border:3px solid var(--ink);padding:1.8rem;background:var(--paper);box-shadow:6px 6px 0 var(--ink);transition:transform .2s}
.era-card:hover{transform:translate(-3px,-3px)}
.era-card:nth-child(2){background:var(--ink);color:var(--paper)}
.era-year{font-family:var(--display);font-weight:900;font-size:3rem;color:var(--red);line-height:1}
.era-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.5rem;margin:.6rem 0 .6rem;letter-spacing:.03em}
.era-card p{font-size:1.1rem}
@media (max-width:860px){.era-grid{grid-template-columns:1fr}}

/* author */
.author{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center;max-width:1000px;margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,4rem);border-top:3px solid var(--ink)}
.author-portrait{width:200px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--red), var(--red-dark));display:grid;place-items:center;box-shadow:0 0 0 6px var(--paper), 0 0 0 9px var(--ink)}
.author-portrait span{font-family:var(--display);font-weight:900;font-size:4.5rem;color:var(--paper)}
.author-text p:last-child{max-width:55ch}
@media (max-width:700px){.author{grid-template-columns:1fr}.author-portrait{width:140px}}

/* order */
.order{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;padding:clamp(4rem,8vw,7rem) clamp(1rem,5vw,4rem);background:var(--red);color:var(--paper);border-top:3px solid var(--ink)}
.order .kicker{color:var(--ochre)}
.order-intro p:last-child{font-size:1.3rem;max-width:36ch}
.order-form{background:var(--paper);color:var(--ink);padding:clamp(1.5rem,4vw,2.5rem);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field>span{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.field small{text-transform:none;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1.1rem;padding:.6rem .7rem;border:2px solid var(--ink);background:#fbf6ea;color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--ochre);outline-offset:1px}
.field-row{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;line-height:1.4}
.check input{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--red)}
.hp{position:absolute;left:-9999px}
.form-status{min-height:1.2em;text-align:center}
.form-status.ok{color:#2c6b2f}.form-status.err{color:var(--red)}
@media (max-width:860px){.order{grid-template-columns:1fr}}

/* footer */
.footer{background:var(--ink);color:var(--paper);text-align:center;padding:2rem 1rem;display:flex;flex-direction:column;gap:.4rem}

/* thanks page */
.thanks-page{min-height:100vh;display:grid;place-items:center;background:var(--paper)}
.thanks{max-width:600px;text-align:center;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.thanks h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.8rem,8vw,4.5rem);line-height:.95}
.stamp-round.static{position:static;opacity:.9}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}