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

:root {
  --bg:        #1c1206;
  --surface:   #241808;
  --panel:     #2e1f0a;
  --moss:      #4a7c59;
  --moss-lt:   #6fba84;
  --amber:     #d4841a;
  --amber-lt:  #f0ad4e;
  --cream:     #f5e9d0;
  --rust:      #b5451b;
  --text:      #e8d9b8;
  --muted:     #9a8870;
  --border:    rgba(212,132,26,.2);
  --shadow:    rgba(0,0,0,.4);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Nunito',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.75;
}

/* ─── BG ─── */
body::before {
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(74,124,89,.12),transparent),
    radial-gradient(ellipse 50% 40% at 90% 5%, rgba(212,132,26,.08),transparent),
    var(--bg);
}

/* ─── PROGRESS ─── */
#progress-bar {
  position:fixed; top:0; left:0; height:4px; width:0%;
  background:linear-gradient(90deg,var(--rust),var(--amber),var(--moss-lt));
  z-index:9999;
}

/* ─── BACK TOP ─── */
#back-top {
  position:fixed; bottom:28px; right:28px; width:46px; height:46px;
  border-radius:10px; background:var(--panel); color:var(--amber-lt);
  border:1px solid var(--border); cursor:pointer; font-size:1.2em;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(14px);
  transition:opacity .3s,transform .3s,background .2s;
}
#back-top.visible { opacity:1; transform:translateY(0); }
#back-top:hover   { background:var(--amber); color:var(--bg); }

/* ─── LAYOUT ─── */
.container { max-width:1140px; margin:0 auto; padding:0 26px 60px; }

/* ─── HEADER ─── */
header {
  padding:80px 40px 60px; text-align:center;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
  animation:riseIn .9s ease both;
}
header::before {
  content:'🍄'; position:absolute; font-size:25em;
  bottom:-80px; right:-60px; opacity:.025;
  pointer-events:none; filter:sepia(1);
}
.forest-badge {
  display:inline-block; font-size:.75em; letter-spacing:.14em;
  text-transform:uppercase; color:var(--moss-lt); margin-bottom:18px;
  font-weight:600;
}
h1 {
  font-family:'Fraunces',serif; font-weight:900; font-style:italic;
  font-size:clamp(2.2em,5.5vw,4.5em);
  color:var(--cream); line-height:1.15; margin-bottom:16px;
}
h1 .accent { color:var(--amber-lt); }
.header-lead { font-size:1em; color:var(--muted); max-width:560px; margin:0 auto 28px; }
.spore-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.spore {
  font-size:.78em; padding:4px 14px; border-radius:20px;
  background:rgba(212,132,26,.1); border:1px solid rgba(212,132,26,.25);
  color:var(--amber-lt);
}

/* ─── NAV ─── */
.nav-tabs {
  display:flex; flex-wrap:wrap; gap:6px; padding:14px 0;
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
  background:var(--bg);
}
.nav-tab {
  font-size:.8em; font-weight:600; padding:6px 15px; border-radius:16px;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); cursor:pointer; text-decoration:none;
  transition:all .2s;
}
.nav-tab:hover, .nav-tab.active {
  background:rgba(74,124,89,.2); border-color:var(--moss-lt); color:var(--moss-lt);
}

/* ─── SECTIONS ─── */
.section {
  margin:50px 0;
  opacity:0; transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease;
}
.section.visible { opacity:1; transform:translateY(0); }

h2 {
  font-family:'Fraunces',serif; font-weight:700; font-size:2em;
  color:var(--cream); margin-bottom:26px; padding-bottom:14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
h3 {
  font-family:'Fraunces',serif; font-size:1.2em; font-weight:600;
  color:var(--amber-lt); margin:26px 0 12px;
}
h4 { font-weight:700; font-size:1em; color:var(--cream); margin:14px 0 6px; }
p  { margin-bottom:13px; font-size:.97em; color:var(--text); }
ul, ol { margin-left:22px; margin-bottom:13px; }
li { margin-bottom:7px; font-size:.95em; }

/* ─── GRID ─── */
.grid   { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:18px 0; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; margin:18px 0; }

/* ─── CARD ─── */
.card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:20px;
  transition:transform .25s, box-shadow .25s, border-color .2s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.3); border-color:var(--amber); }
.card-moss   { border-top:3px solid var(--moss); }
.card-amber  { border-top:3px solid var(--amber); }
.card-rust   { border-top:3px solid var(--rust); }
.card-icon { font-size:2em; margin-bottom:10px; }
.card h4 { color:var(--amber-lt); margin-bottom:7px; }

/* ─── PANEL ─── */
.panel {
  background:var(--panel); border-left:3px solid var(--amber);
  border-radius:0 10px 10px 0; padding:18px 22px; margin:14px 0;
}
.panel-moss  { border-left-color:var(--moss); }
.panel-rust  { border-left-color:var(--rust); background:rgba(181,69,27,.07); }
.panel-dark  { background:#161008; border:1px solid var(--border); border-radius:12px; padding:22px; }

/* ─── TABLE ─── */
table { width:100%; border-collapse:collapse; margin:16px 0; }
th    { background:var(--panel); color:var(--amber-lt); padding:11px 15px; text-align:left; font-size:.85em; letter-spacing:.04em; border-bottom:2px solid var(--border); }
td    { padding:10px 15px; border-bottom:1px solid var(--border); font-size:.9em; color:var(--text); }
tr:hover td { background:rgba(212,132,26,.04); }
tr:last-child td { border-bottom:none; }

/* ─── STATS ─── */
.stats-row { display:flex; flex-wrap:wrap; gap:14px; margin:20px 0; }
.stat { flex:1; min-width:120px; text-align:center; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px 10px; }
.stat-num { font-family:'Fraunces',serif; font-size:2.1em; color:var(--amber-lt); font-weight:900; }
.stat-lbl { font-size:.75em; color:var(--muted); margin-top:4px; }

/* ─── MUSHROOM GALLERY LEGEND ─── */
.mushroom-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:16px 0; }
.mushroom-item {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; text-align:center; transition:border-color .2s;
}
.mushroom-item:hover { border-color:var(--amber); }
.mushroom-item .m-icon { font-size:2.5em; margin-bottom:6px; }
.mushroom-item .m-name { font-family:'Fraunces',serif; font-size:.9em; font-style:italic; color:var(--cream); }
.mushroom-item .m-sub  { font-size:.75em; color:var(--muted); margin-top:3px; }
.safe  { border-bottom:3px solid var(--moss); }
.toxic { border-bottom:3px solid var(--rust); }
.med   { border-bottom:3px solid var(--amber); }

/* ─── TIMELINE ─── */
.timeline { padding-left:22px; border-left:2px solid var(--border); margin:18px 0; }
.tl-item { position:relative; margin-bottom:22px; }
.tl-item::before {
  content:''; position:absolute; left:-29px; top:5px;
  width:12px; height:12px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 8px rgba(212,132,26,.4);
}
.tl-year { font-family:'Fraunces',serif; font-size:.85em; color:var(--amber-lt); margin-bottom:3px; font-weight:700; }

/* ─── QUOTE ─── */
blockquote {
  font-family:'Fraunces',serif; font-style:italic;
  color:var(--cream); font-size:1.1em;
  border-left:3px solid var(--moss);
  padding:14px 20px; margin:18px 0;
  background:rgba(74,124,89,.08);
  border-radius:0 10px 10px 0;
}
blockquote cite { font-style:normal; font-size:.78em; color:var(--muted); display:block; margin-top:8px; }

/* ─── WARNING / INFO TAGS ─── */
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.t  { font-size:.75em; font-weight:600; padding:3px 10px; border-radius:4px; }
.t-green  { background:rgba(74,124,89,.2);  color:var(--moss-lt); border:1px solid rgba(74,124,89,.3); }
.t-amber  { background:rgba(212,132,26,.15); color:var(--amber-lt); border:1px solid rgba(212,132,26,.3); }
.t-rust   { background:rgba(181,69,27,.15);  color:#e8836a; border:1px solid rgba(181,69,27,.3); }

/* ─── ANIMATIONS ─── */
@keyframes riseIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

@media(max-width:700px){
  h1{font-size:2.1em}
  .grid,.grid-2,.mushroom-grid{grid-template-columns:1fr}
  .stats-row{flex-direction:column}
  .nav-tabs{position:relative}
}