:root { --cream:#F7F1E0; --espresso:#2E1A0A; --muted:rgba(46,26,10,.7); --line:rgba(46,26,10,.12); }
*{box-sizing:border-box} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--cream);color:var(--espresso);line-height:1.55}
header,footer{padding:1.25rem 1.5rem} header a,footer a{color:inherit;text-decoration:none}
.brand{font-weight:700;font-size:1.15rem} .brand span{opacity:.55}
main{max-width:48rem;margin:0 auto;padding:0 1.5rem 3rem}
.card{background:#fffdf6;border:1px solid var(--line);border-radius:1rem;padding:2rem;box-shadow:0 10px 30px rgba(46,26,10,.06)}
h1{margin:.4rem 0 0;font-size:2rem} .eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5;font-weight:700}
.lede{opacity:.72;margin:.75rem 0} .updated{font-size:.8rem;opacity:.5}
section{margin-top:1.75rem} section h2{font-size:1.15rem;margin:0 0 .6rem}
ul{padding-left:1.2rem} li{margin:.25rem 0} p{margin:.55rem 0} a{color:var(--espresso);font-weight:600}
.shot{width:100%;border-radius:.75rem;border:1px solid var(--line);margin:1rem 0;background:#111}
.shot-grid{display:grid;gap:1rem} @media(min-width:800px){.shot-grid{grid-template-columns:1.2fr .8fr}}
.note{font-size:.9rem;opacity:.75;background:rgba(46,26,10,.04);padding:.9rem 1rem;border-radius:.75rem}