/* StonerRock.com Museum — "desert worship" skin v1
   Palette pulled from the original site's own DNA: dusty navy-black, burnt orange,
   acid yellow, oxblood. Poster-heavy display type. No web fonts, no tracking. */
:root {
  /* EXACT OG stonerrock.com palette (sampled from the archived pages, by frequency) */
  --bg: #000018;          /* deep navy field */
  --bg2: #000033;         /* OG navy panel  (#000033 used 3970x) */
  --navy: #000044;        /* OG deep navy   (#000044 used 3545x) */
  --blue: #003366;        /* OG mid blue    (#003366 used 3431x) */
  --ink: #eef2fb;         /* cool white */
  --dim: #9fb2d4;         /* silver-blue */
  --orange: #ff9900;      /* OG orange      (#ff9900 used 6609x) */
  --orange-hot: #ffb84d;  /* brighter for hover/glow */
  --yellow: #ffff00;      /* OG acid yellow (#ffff00 used 3539x) */
  --oxblood: #001a4d;     /* poster drop-shadow, navy-world */
  --line: #13306b;        /* blue hairline */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --poster: "Impact", "Haettenschweiler", "Franklin Gothic Bold", "Arial Narrow Bold", sans-serif;
  /* THE stonerrock.com font — Trebuchet MS, used 39,939x across the original site */
  --body: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -12%, rgba(255,153,0,.26), transparent 52%),
    radial-gradient(ellipse 100% 70% at 50% 108%, rgba(0,51,102,.55), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, #000026 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  background-color: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px 72px; }

/* ---- masthead ---- */
.masthead {
  text-align: center;
  padding: 80px 16px 36px;
  border-bottom: 3px solid var(--orange);
  position: relative;
}
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: var(--oxblood);
}
.masthead.small { padding: 18px 20px; text-align: left; display: flex; align-items: baseline; gap: 16px; border-bottom-width: 2px; }
.wordmark {
  font-family: var(--poster);
  letter-spacing: .03em; color: var(--orange); text-decoration: none;
  text-transform: uppercase;
}
.wordmark.big {
  font-size: clamp(42px, 10vw, 104px); line-height: .92;
  color: var(--orange);
  text-shadow: 0 0 2px #000, 4px 4px 0 var(--oxblood), 0 0 48px rgba(255,153,0,.55);
}
.masthead.small .wordmark { font-size: 24px; text-shadow: 2px 2px 0 var(--oxblood); }
.motto, .tag {
  color: var(--yellow); font-family: var(--mono); font-size: 13px;
  letter-spacing: .32em; text-transform: uppercase; margin-top: 16px;
}
.tag { margin: 0; }

/* ---- headings / text ---- */
h1 {
  font-family: var(--poster); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(30px, 6vw, 60px); line-height: .98; margin: 52px 0 18px;
  color: var(--ink); text-shadow: 3px 3px 0 var(--oxblood);
}
h2 {
  font-family: var(--poster); text-transform: uppercase; letter-spacing: .05em;
  color: var(--yellow); font-size: clamp(20px, 3vw, 28px); margin: 50px 0 16px;
  border-bottom: 2px solid var(--line); padding-bottom: 8px;
}
h3 { margin: 0 0 8px; color: var(--orange-hot); font-family: var(--poster);
  letter-spacing: .03em; text-transform: uppercase; font-size: 21px; }
p { margin: 0 0 15px; }
.lede { font-size: 20px; color: var(--ink); }
.lede, .story p { max-width: 68ch; }
.count { color: var(--dim); font-size: 14px; font-family: var(--mono); }
a { color: var(--orange-hot); }

/* ---- timeline ---- */
.timeline ol { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--blue); }
.timeline li { padding: 12px 0 12px 22px; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -9px; top: 20px; width: 13px; height: 13px;
  background: var(--orange); border: 2px solid var(--yellow); border-radius: 50%;
  box-shadow: 0 0 12px rgba(240,128,31,.8);
}
.yr { color: var(--yellow); font-family: var(--poster); font-size: 18px;
  letter-spacing: .04em; margin-right: 12px; }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  display: block; background: linear-gradient(180deg, var(--bg2), var(--navy));
  border: 1px solid var(--line); border-top: 3px solid var(--orange);
  border-radius: 4px; padding: 20px; color: var(--ink); text-decoration: none;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
a.card:hover { transform: translateY(-3px); border-top-color: var(--yellow);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px var(--orange); }
.card p { color: var(--dim); font-size: 15px; margin: 0; }
.card.soon { opacity: .6; }

/* ---- reading room list + search ---- */
.search {
  width: 100%; margin: 8px 0 20px; padding: 13px 16px;
  background: var(--navy); border: 2px solid var(--line); border-radius: 4px;
  color: var(--ink); font: 16px var(--body); letter-spacing: .02em;
}
.search:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(210,100,27,.2); }
.search::placeholder { color: var(--dim); }
/* collapsible band/section groups */
.grp { margin: 0 0 8px; border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  border-radius: 3px; background: linear-gradient(180deg, var(--bg2), var(--navy)); }
.grp > summary {
  cursor: pointer; padding: 13px 16px; list-style: none; user-select: none;
  font-family: var(--poster); text-transform: uppercase; letter-spacing: .04em;
  font-size: 18px; color: var(--orange-hot);
}
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary::before { content: "\25B8  "; color: var(--yellow); }
.grp[open] > summary::before { content: "\25BE  "; }
.grp > summary:hover { color: var(--yellow); }
.grp > summary .count { color: var(--dim); }
.grp .stack { margin: 0 12px 12px; }
.stack { list-style: none; margin: 0 0 30px; padding: 0; }
.stack li {
  background: linear-gradient(180deg, var(--bg2), var(--navy));
  border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: 3px; padding: 12px 15px; margin: 0 0 8px;
}
.stack a { color: var(--ink); text-decoration: none; font-weight: bold;
  border-bottom: 2px solid var(--oxblood); }
.stack a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
.rmeta { display: block; color: var(--dim); font-size: 12.5px; margin-top: 5px; font-family: var(--mono); }
.rmeta code, .pmeta code { color: var(--dim); }
.empty { color: var(--dim); font-style: italic; }

/* ---- colophon ---- */
.colophon {
  border-top: 2px solid var(--line); color: var(--dim); text-align: center;
  font-size: 13px; padding: 26px 16px 48px; font-family: var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---- restored-page viewer ---- */
body.viewer { display: flex; flex-direction: column; height: 100vh; }
.provenance {
  background: var(--navy); border-bottom: 3px solid var(--orange);
  padding: 10px 16px; font-family: var(--mono); font-size: 12px; color: var(--dim);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
}
.provenance .crumb { color: var(--orange-hot); text-decoration: none; font-weight: bold; }
.provenance .ptitle { color: var(--yellow); font-family: var(--body); font-size: 15px; font-weight: bold; }
.provenance a { color: var(--orange-hot); }
.restored { flex: 1; width: 100%; border: 0; background: #fff; }