:root{
  --bg:#0b0c0f;
  --card:#15171c;
  --ink:#e8eaf0;
  --muted:#b2b8c4;
  --accent:#b94737;
  --rule:#2a2d34;
  --glow1:#ff7a18;
  --glow2:#ff3d00;
  --glow3:#ffb347;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px 40px}

/* --- HERO with photo --- */
.hero{
  position:relative;
  min-height:62vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  background:#0e0f12;
  isolation:isolate;
}
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%;
  filter:saturate(1.02) contrast(1.05);
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 10%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.65) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
  z-index:1;
}
.hero .fire-left, .hero .fire-right{
  position:absolute; top:0; bottom:0; width:min(16vw,180px);
  z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:.45;
  background:
    radial-gradient(120px 220px at 60% 70%, var(--glow3), transparent 60%),
    radial-gradient(120px 200px at 40% 30%, var(--glow1), transparent 55%),
    radial-gradient(120px 220px at 40% 85%, var(--glow2), transparent 60%),
    radial-gradient(220px 260px at 60% 20%, rgba(255,140,0,.7), transparent 65%);
  filter:blur(2px);
  animation: flicker 4s infinite ease-in-out;
}
.hero .fire-left{left:0; transform:scaleX(1)}
.hero .fire-right{right:0; transform:scaleX(-1)}
.sparks{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.2; mix-blend-mode:screen;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,184,108,.45) 0 1px, transparent 1px),
    radial-gradient(circle at 30% 80%, rgba(255,120,64,.45) 0 1px, transparent 1px),
    radial-gradient(circle at 60% 30%, rgba(255,250,200,.6) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(255,160,90,.45) 0 1px, transparent 1px);
  background-size: 140px 220px, 180px 260px, 160px 200px, 200px 300px;
  animation: drift 16s linear infinite;
}
@keyframes flicker{
  0%,100%{opacity:.35; filter:blur(2.5px)}
  40%{opacity:.55; filter:blur(3px)}
  55%{opacity:.42}
  70%{opacity:.6}
}
@keyframes drift{
  0%{background-position:0 0, 0 0, 0 0, 0 0}
  100%{background-position:0 -400px, 0 -520px, 0 -360px, 0 -600px}
}
.hero .title{
  position:relative; z-index:3; text-align:center; padding:36px 16px 28px;
  width:100%; backdrop-filter: blur(0.5px);
}
h1{font-size:clamp(30px,6vw,56px);margin:0 0 6px;font-weight:900;letter-spacing:.3px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.kicker{color:#f0e8df;opacity:.9;margin:0 0 12px;font-size:clamp(14px,2.6vw,18px);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 8px}
.meta span{background:rgba(20,20,24,.6);border:1px solid var(--rule);padding:6px 10px;border-radius:999px;font-size:13px;color:#f0eee8;backdrop-filter:blur(4px)}
.meta a.print {font-size: 0.9rem; background: rgba(255,122,24,.1);}
.meta a.print:hover {background: rgba(255,122,24,0.25);transition: background 0.3s ease-in-out;}
.badge{display:inline-block;background:var(--accent);color:white;padding:2px 10px;border-radius:999px;font-size:12px;margin-left:8px}

/* --- BODY --- */
.content{margin-top:-34px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:16px;box-shadow:0 16px 34px rgba(0,0,0,.28);padding:28px}
h2{font-size:22px;margin:14px 0 8px}
.grid{display:grid;grid-template-columns: 1fr 1.3fr;gap:22px}
.list{margin:0;padding:0 0 0 18px}
.list li{margin:6px 0}
.step{margin:12px 0;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:#101217}
.tip{border-left:4px solid var(--accent);padding:10px 14px;background:#14171e;margin:10px 0;border-radius:8px}
.footer{color:var(--muted);font-size:12px;margin-top:24px;text-align:center}
.print{display:inline-block;margin:8px 0 0;color:white;background:#23262d;border:1px solid var(--rule);padding:8px 12px;border-radius:10px;text-decoration:none}
@media (max-width:900px){ .grid{grid-template-columns:1fr} .hero{min-height:56vh} }
@media print{
  body{background:white;color:#111}
  .card{box-shadow:none;border:0;background:white}
  .step{background:#fafafa;border-color:#ddd}
  .tip{background:#fff;border-left-color:#b94737}
  .print{display:none}
  .sparks,.fire-left,.fire-right{display:none}
}