@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Lato:ital,wght@0,200;0,300;0,400;1,300&display=swap');

:root {
  --hades: #060300;
  --inferno: #100800;
  --sulfur-deep: #1a0e00;
  --sulfur: #c8840a;
  --sulfur-bright: #f0b020;
  --acid: #d4c840;
  --acid-dim: rgba(212,200,64,0.1);
  --acid-border: rgba(212,200,64,0.2);
  --heat: #e06010;
  --text: #9a7830;
  --text-bright: #d4a840;
  --text-dim: #5a3e10;
  --border: rgba(200,132,10,0.22);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body { font-family:'Lato',sans-serif; background:var(--hades); color:var(--text); min-height:100vh; overflow-x:hidden; }

#venus-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

body::before {
  content:''; position:fixed; inset:0;
  background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(200,100,10,0.08) 0%, transparent 60%);
  z-index:1; pointer-events:none;
}

.wrap { position:relative; z-index:2; max-width:1040px; margin:0 auto; padding:0 28px 90px; }

/* ── HERO ── */
.hero { padding:70px 0 56px; display:grid; grid-template-columns:1fr 280px; gap:44px; align-items:center; border-bottom:1px solid var(--border); margin-bottom:58px; }
.hero-tag { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:4px; color:var(--sulfur); opacity:0.65; margin-bottom:16px; }
.hero h1 { font-family:'Cinzel',serif; font-size:clamp(4rem,12vw,8.5rem); font-weight:900; line-height:0.85; color:var(--sulfur-bright); letter-spacing:2px; text-shadow:0 0 40px rgba(200,132,10,0.3); }
.hero h1 em { display:block; font-size:0.18em; font-style:normal; font-weight:400; letter-spacing:6px; color:var(--text-dim); margin-top:10px; text-transform:uppercase; }
.hero-desc { font-size:0.96rem; line-height:1.84; color:var(--text); font-weight:300; font-style:italic; margin-top:18px; }

/* ── Venus sphere ── */
#venus-sphere {
  width:260px; height:260px; border-radius:50%; position:relative; overflow:hidden;
  background: radial-gradient(circle at 40% 35%, #f4e060 0%, #d4a020 25%, #a06008 55%, #602004 80%, #200800 100%);
  box-shadow: 0 0 50px rgba(200,120,20,0.35), 0 0 100px rgba(200,80,10,0.15), inset -30px -20px 50px rgba(0,0,0,0.45);
  animation: venus-cloud 20s linear infinite;
}

#venus-sphere::before {
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(165deg, transparent 0px, rgba(180,140,20,0.12) 8px, transparent 16px, rgba(160,100,10,0.08) 24px, transparent 32px);
}

@keyframes venus-cloud { from{background-position-x:0} to{background-position-x:300px} }

/* ── Comparison bar ── */
.vs-bar { display:grid; grid-template-columns:1fr 60px 1fr; border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-bottom:56px; }
.vs-venus { background:var(--inferno); padding:22px 18px; }
.vs-earth { background:#060c10; padding:22px 18px; text-align:right; }
.vs-label { display:flex; align-items:center; justify-content:center; background:var(--sulfur-deep); font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; writing-mode:vertical-rl; }
.vs-row { display:flex; flex-direction:column; gap:14px; }
.vs-item { }
.vs-item .vi-label { font-size:0.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; font-weight:700; }
.vs-item .vi-val { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--sulfur-bright); }
.vs-item .vi-val.earth-val { color:#4a90cc; }
.vs-planet { font-family:'Cinzel',serif; font-size:0.9rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin-bottom:14px; }
.vs-venus .vs-planet { color:var(--sulfur); }
.vs-earth .vs-planet { color:#4a90cc; }

/* ── Stats ── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--border); overflow:hidden; margin-bottom:56px; border-radius:3px; }
.stat { padding:18px 14px; background:var(--inferno); border-right:1px solid var(--border); transition:background 0.2s; }
.stat:last-child { border-right:none; }
.stat:hover { background:var(--acid-dim); }
.s-label { font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:3px; text-transform:uppercase; color:var(--sulfur); opacity:0.55; margin-bottom:7px; }
.s-value { font-size:1.25rem; font-weight:700; color:var(--sulfur-bright); line-height:1.1; }
.s-unit { font-size:0.63rem; color:var(--text-dim); }

/* ── Sections ── */
.section { margin-bottom:56px; opacity:0; transform:translateY(18px); transition:opacity 0.65s,transform 0.65s; }
.section.visible { opacity:1; transform:none; }
.sh { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sn { font-family:'Cinzel',serif; font-size:0.58rem; letter-spacing:3px; color:var(--sulfur); opacity:0.45; }
.section h2 { font-family:'Cinzel',serif; font-size:1.6rem; font-weight:700; color:var(--sulfur-bright); letter-spacing:2px; }
p { font-size:0.95rem; line-height:1.85; color:var(--text); font-weight:300; margin-bottom:14px; }
strong { color:var(--text-bright); font-weight:700; }

/* ── Atmosphere layers ── */
.atmo-layers { margin-top:18px; }
.al { display:grid; grid-template-columns:80px 1fr 100px; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); }
.al:last-child { border-bottom:none; }
.al-alt { font-family:'Cinzel',serif; font-size:0.72rem; color:var(--acid); font-weight:600; }
.al-name { font-size:0.84rem; font-weight:500; color:var(--text-bright); }
.al-detail { font-size:0.75rem; color:var(--text-dim); }
.al-temp { font-family:'Cinzel',serif; font-size:0.9rem; color:var(--heat); text-align:right; }

/* ── Missions ── */
.mi { display:grid; grid-template-columns:110px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--border); }
.mi:last-child { border-bottom:none; }
.mi-year { font-family:'Cinzel',serif; font-size:0.95rem; color:var(--sulfur); font-weight:600; }
.mi-name { font-size:0.86rem; font-weight:700; color:var(--text-bright); margin-bottom:3px; }
.mi p { font-size:0.8rem; margin:0; line-height:1.5; }

/* ── Greenhouse box ── */
.ghbox { background:linear-gradient(135deg,var(--inferno),var(--sulfur-deep)); border:1px solid rgba(240,176,32,0.35); border-left:3px solid var(--acid); border-radius:6px; padding:26px 28px; margin-top:20px; }
.ghbox h3 { font-family:'Cinzel',serif; font-size:1rem; font-weight:700; color:var(--acid); letter-spacing:1px; margin-bottom:12px; }
.ghbox p { margin:0 0 10px; }
.ghbox p:last-child { margin:0; }

/* Footer */
.footer-band { margin-top:70px; border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-band span { font-family:'Cinzel',serif; font-size:0.58rem; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; }

@media(max-width:640px){ .hero{grid-template-columns:1fr;} #venus-sphere{width:170px;height:170px;margin:0 auto;} .vs-bar{grid-template-columns:1fr; } .vs-label{writing-mode:horizontal-tb;padding:8px;} }