:root { --ink:#19384a; --cedar:#a7542c; --sand:#f3eadc; --paper:#fffaf3; --white:#fff; --max:1100px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,system-ui,sans-serif; line-height:1.6; }
header,footer { align-items:center; display:flex; justify-content:space-between; padding:1rem max(1.25rem,calc((100vw - var(--max))/2)); }
header { background:rgba(255,250,243,.95); }
.brand { color:inherit; font:700 1.35rem Georgia,serif; text-decoration:none; }
.brand span,.eyebrow { color:var(--cedar); }
.release { border:1px solid var(--cedar); border-radius:999px; font-size:.75rem; font-weight:800; letter-spacing:.1em; padding:.35rem .75rem; text-transform:uppercase; }
.hero { min-height:72vh; overflow:hidden; position:relative; }
.hero>img,.shade { height:100%; inset:0; position:absolute; width:100%; }
.hero>img { object-fit:cover; }
.shade { background:linear-gradient(90deg,rgba(13,36,49,.88),rgba(13,36,49,.12)); }
.copy { color:var(--white); margin:auto; max-width:var(--max); padding:7rem 1.25rem; position:relative; }
.copy>* { max-width:620px; }
.eyebrow { font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.hero .eyebrow { color:#f0b38f; }
h1,h2 { font-family:Georgia,serif; font-weight:500; line-height:1.05; margin:.5rem 0 1.25rem; }
h1 { font-size:clamp(3rem,8vw,6.4rem); }
h2 { font-size:clamp(2rem,5vw,3.7rem); }
button { background:var(--cedar); border:0; border-radius:999px; color:white; cursor:pointer; font:inherit; font-weight:700; padding:.8rem 1.1rem; }
code { background:rgba(255,255,255,.18); padding:.15rem .3rem; }
.note { margin:auto; max-width:var(--max); padding:5rem 1.25rem; }
.note p { max-width:700px; }
footer { background:var(--ink); color:var(--sand); font-size:.86rem; }
@media (max-width:650px) { footer{align-items:flex-start;flex-direction:column;gap:.4rem}.copy{padding-top:5rem} }