:root {
  --bg: #0a0a0a;
  --card-bg: #111;
  --border: #222;
  --text: #e8e4dc;
  --light-grey: #999;
  --grey: #777;
  --gold: #c9a84c;
  --gold-dim: rgba(201,168,76,0.3);
  --accent: #6ab47a;
  --accent-dim: rgba(106,180,122,0.15);
  --red: #c75050;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'Vollkorn',Georgia,serif; line-height:1.7; }
a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }
header { display:flex; align-items:center; gap:32px; padding:20px 80px; border-bottom:1px solid var(--border); }
.logo { font-family:'Bebas Neue',sans-serif; font-size:32px; color:var(--text); letter-spacing:2px; display:flex; align-items:baseline; gap:2px; text-decoration:none; }
.logo span:first-child { color:var(--gold); }
.logo-sub { font-family:'Vollkorn',serif; font-size:9px; letter-spacing:0; line-height:1.2; color:var(--grey); margin-left:8px; }
nav { display:flex; gap:24px; margin-left:auto; }
nav a { font-family:'Vollkorn',serif; font-size:15px; color:var(--light-grey); text-decoration:none; }
nav a:hover, nav a.active { color:var(--text); }
.lang-switch { font-size:13px; color:var(--grey); border:1px solid var(--border); padding:4px 12px; border-radius:4px; text-decoration:none; }
.breadcrumb { padding:16px 80px; font-size:14px; color:var(--grey); }
.breadcrumb a { color:var(--grey); }
.breadcrumb-sep { margin:0 8px; }
.breadcrumb-current { color:var(--light-grey); }

.cocktail-hero { padding:60px 80px 48px; }
.cocktail-eyebrow { font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:3px; color:var(--gold); margin-bottom:8px; text-transform:uppercase; }
.cocktail-title { font-family:'Playfair Display',serif; font-size:56px; font-weight:900; line-height:1.1; margin-bottom:8px; }
.cocktail-subtitle { font-size:18px; color:var(--light-grey); font-style:italic; margin-bottom:24px; }
.cocktail-meta { display:flex; gap:24px; flex-wrap:wrap; }
.cocktail-meta-item { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--light-grey); }
.cocktail-meta-item strong { color:var(--text); }

.cocktail-body { display:grid; grid-template-columns:1fr 380px; gap:64px; padding:0 80px 64px; }

.ingredients-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; height:fit-content; position:sticky; top:24px; }
.ingredients-header { background:#0f1a0f; padding:20px 24px; border-bottom:1px solid #1a2a1a; }
.ingredients-header-title { font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:2px; color:rgba(106,180,122,0.7); text-transform:uppercase; }
.ingredients-header-name { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; margin-top:4px; }
.ingredient-row { display:flex; justify-content:space-between; align-items:baseline; padding:12px 24px; border-bottom:1px solid var(--border); font-size:15px; }
.ingredient-row:last-child { border-bottom:none; }
.ingredient-name { color:var(--text); }
.ingredient-amount { color:var(--gold); font-weight:600; white-space:nowrap; margin-left:16px; }
.ingredient-note { font-size:13px; color:var(--grey); display:block; margin-top:2px; }

.section-label { font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:3px; color:var(--gold); margin-bottom:8px; text-transform:uppercase; }
.content-title { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; margin-bottom:20px; }
.content-section { margin-bottom:48px; }
.prose { font-size:16px; line-height:1.8; }
.prose p { margin-bottom:16px; }

.steps-list { list-style:none; counter-reset:step; }
.steps-list li { counter-increment:step; position:relative; padding:16px 0 16px 56px; border-bottom:1px solid var(--border); font-size:16px; line-height:1.7; }
.steps-list li:last-child { border-bottom:none; }
.steps-list li::before { content:counter(step); position:absolute; left:0; top:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--gold-dim); color:var(--gold); font-family:'Bebas Neue',sans-serif; font-size:18px; display:flex; align-items:center; justify-content:center; }

.history-block { background:var(--card-bg); border-left:3px solid var(--gold-dim); padding:24px 28px; border-radius:0 8px 8px 0; font-size:15px; line-height:1.8; }

.serve-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.serve-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:20px; }
.serve-card-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; margin-bottom:8px; }
.serve-card-text { font-size:14px; color:var(--light-grey); line-height:1.6; }

.similar-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; padding:0 80px 64px; }
.similar-card { display:block; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:28px; text-decoration:none; transition:border-color .2s; }
.similar-card:hover { border-color:var(--gold-dim); text-decoration:none; }
.similar-label { font-size:12px; color:var(--grey); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.similar-name { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--text); margin-bottom:8px; }
.similar-desc { font-size:14px; color:var(--light-grey); line-height:1.6; margin-bottom:12px; }
.similar-link { font-size:13px; color:var(--gold); }

.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.tag { font-size:12px; color:var(--light-grey); border:1px solid var(--border); padding:4px 12px; border-radius:20px; }

footer { padding:48px 80px; border-top:1px solid var(--border); display:flex; align-items:center; gap:32px; }
.footer-logo { font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--text); letter-spacing:2px; text-decoration:none; }
.footer-logo span { color:var(--gold); }
.footer-links { display:flex; gap:20px; margin-left:auto; }
.footer-links a { font-size:14px; color:var(--grey); text-decoration:none; }
.footer-links a:hover { color:var(--text); }
.footer-copy { font-size:13px; color:var(--grey); }

@media(max-width:900px) {
  header,.breadcrumb,.cocktail-hero,.cocktail-body,footer,.similar-grid { padding-left:24px; padding-right:24px; }
  .cocktail-body { grid-template-columns:1fr; }
  .cocktail-title { font-size:36px; }
  .ingredients-card { position:static; }
}