:root {
  --black: #111111;
  --red: #B72212;
  --red-bright: #E23D28;
  --cream: #F4EFE6;
  --paper: #FAF7F2;
  --gold: #E2B84B;
  --smoke: #5C4033;
  --ghost: #2A2A2A;
  --muted: #5E554C;
  --font: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--black); line-height: 1.55; }
a { color: var(--red); }
.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; background:#fff; padding:.5rem 1rem; z-index:9; }
.wrap { width: min(1100px, calc(100% - 2rem)); margin-inline: auto; }
.top { background: var(--black); color: #fff; position: sticky; top: 0; z-index: 5; }
.bar { display:flex; align-items:center; justify-content:space-between; min-height:4.25rem; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none; font-weight:800; letter-spacing:-.03em; text-transform:uppercase; font-size:.95rem; }
nav { display:flex; gap:1.15rem; }
nav a { color:rgba(255,255,255,.86); text-decoration:none; font-weight:650; font-size:.95rem; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:end; padding: 3.5rem 0 2rem; background:
  radial-gradient(circle at 85% 20%, rgba(226,61,40,.18), transparent 35%),
  linear-gradient(180deg, #fff, var(--paper)); }
.hero-inner { padding: 1rem 0 2rem; width: min(1100px, calc(100% - 2rem)); margin-left: max(1rem, calc((100% - 1100px) / 2)); }
.tag { text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; font-weight:800; color:var(--red); margin:0 0 .8rem; }
h1,h2,h3 { margin:0; letter-spacing:-.04em; line-height:1.05; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); max-width: 10ch; text-transform: uppercase; }
.lede { color:var(--muted); font-size:1.08rem; max-width:34rem; }
.btn { display:inline-flex; margin-top:1.4rem; background:var(--red); color:#fff; text-decoration:none; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border-radius:999px; padding:.9rem 1.3rem; }
.hero-bottles { display:flex; align-items:flex-end; justify-content:center; gap:1rem; padding-bottom:1rem; min-height:280px; }
.bottle { width:84px; text-align:center; color:#fff; font-weight:800; font-size:.75rem; text-transform:uppercase; }
.bottle span { display:block; height:180px; border-radius:12px 12px 8px 8px; border:3px solid var(--black); position:relative; margin-bottom:.5rem; box-shadow: 8px 12px 0 rgba(0,0,0,.08); }
.bottle span::before { content:""; position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:28px; height:18px; background:var(--black); border-radius:4px 4px 0 0; }
.bottle em { font-style:normal; color:var(--black); }
.b1 span { background: linear-gradient(180deg, #ff6a57, var(--red-bright)); height:200px; }
.b2 span { background: linear-gradient(180deg, #f0d27a, var(--gold)); height:170px; }
.b3 span { background: linear-gradient(180deg, #8a6453, var(--smoke)); height:190px; }
.section { padding: 3.5rem 0; }
.section-head { max-width: 36rem; margin-bottom: 1.75rem; }
.section-head h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); text-transform: uppercase; margin-bottom: .55rem; }
.section-head p { margin:0; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.product { display:grid; grid-template-columns:140px 1fr; background:#fff; border:2px solid var(--black); border-radius:18px; overflow:hidden; box-shadow: 6px 6px 0 var(--black); }
.art { display:grid; place-items:center; min-height:180px; }
.art.red { background:#F8D6D0; }
.art.gold { background:#F7E8C4; }
.art.smoke { background:#E5D7CF; }
.art.ghost { background:#D9D9D9; }
.sil { width:54px; height:120px; border-radius:10px 10px 6px 6px; border:3px solid var(--black); position:relative; }
.sil::before { content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:20px; height:14px; background:var(--black); border-radius:3px 3px 0 0; }
.red .sil { background:var(--red-bright); }
.gold .sil { background:var(--gold); }
.smoke .sil { background:var(--smoke); }
.ghost .sil { background:var(--ghost); }
.meta { padding:1.15rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.meta h3 { font-size:1.25rem; text-transform:uppercase; }
.heat { font-weight:800; color:var(--red); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin:0; }
.meta p:not(.heat) { margin:0; color:var(--muted); flex:1; }
.buy-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.75rem; }
.price { font-weight:900; font-size:1.15rem; }
.buy { background:var(--black); color:#fff; border:0; border-radius:999px; padding:.65rem 1.1rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; opacity:.55; cursor:not-allowed; }
.note { margin:1.25rem 0 0; color:var(--muted); font-size:.95rem; }
.dark { background:var(--black); color:#fff; }
.story { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; }
.story h2 { color:#fff; text-transform:uppercase; font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:.75rem; }
.story p { color:rgba(255,255,255,.76); margin:0; }
.story ul { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.story li { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.85rem 1rem; font-weight:700; }
.heat-guide { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.heat-guide div { background:#fff; border:2px solid var(--black); border-radius:14px; padding:1rem; box-shadow:4px 4px 0 var(--black); }
.heat-guide strong { display:block; text-transform:uppercase; font-size:.8rem; color:var(--red); margin-bottom:.35rem; }
.heat-guide span { font-weight:800; }
.foot { padding:2rem 0 2.5rem; }
.foot-row { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:2px solid var(--black); padding-top:1.4rem; color:var(--muted); }
.studio a { color:var(--black); font-weight:800; text-decoration:none; }
@media (max-width: 860px) {
  .hero, .grid, .story, .heat-guide { grid-template-columns:1fr; }
  .hero { display:block; }
  .hero-inner { margin: 0 auto; }
  .hero-bottles { min-height:220px; }
  .product { grid-template-columns:110px 1fr; }
  nav { display:none; }
  h1 { max-width:none; }
}