/* v0mma museum pages (graveyard, academy, lab, data, 404) in the site-wide look.
   Loaded AFTER course.css, which holds the tokens, header, footer, buttons and motion. This file maps the museum's
   older class names and token names onto that look, so the page markup and page scripts keep working. */
:root {
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --panel: var(--ink-2);
  --text: var(--bone);
  --muted: var(--dim);
  --display: var(--serif);
  --sans: var(--grot);
}

/* ---------- type ---------- */
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky); margin: 0 0 14px; }
main h1, main h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; margin: 0; }
main h1 { font-size: clamp(42px, 5.8vw, 84px); }
main h2 { font-size: clamp(30px, 3.6vw, 48px); }
main h1 em, main h2 em { font-style: italic; font-weight: 500; color: var(--sand); }
main h3 { font-family: var(--grot); font-weight: 700; font-size: 20px; letter-spacing: -0.005em; text-transform: none; margin: 0; }
.lede { margin: 22px 0 0; }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 16px; color: #c3cad6; }
.prose li { color: #c3cad6; }
.prose h3 { margin: 34px 0 12px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- sections ---------- */
section { padding: 96px 0; }
.section-head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 760px; }
.rule-top { border-top: 1px solid var(--line); }
.band { background: rgba(10, 13, 19, 0.7); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- buttons ---------- */
.btns { margin-top: 32px; }
.btn.primary { background: var(--sand); border-color: var(--sand); color: #1b1305; }
.btn.primary::before { background: var(--bone); }
.btn.primary:hover { color: #1b1305; }

/* ---------- cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card { position: relative; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.card h3 { font-size: 20px; }
.card p { margin: 0; color: var(--dim); font-size: 15px; }
a.card { text-decoration: none; color: inherit; transition: border-color 0.25s ease, transform 0.25s ease; }
a.card:hover { border-color: rgba(220, 183, 116, 0.55); transform: translateY(-3px); color: inherit; }
a.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(220, 183, 116, 0.12), transparent 70%); }
a.card:hover::before { opacity: 1; }
.tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blood); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.verdict { font-family: var(--serif); font-size: 21px; line-height: 1.25; color: var(--bone); }

/* ---------- chips / flags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 13.5px var(--grot); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); color: var(--dim); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.chip:hover { color: var(--bone); border-color: var(--dim); }
.chip[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.flag { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid rgba(220, 183, 116, 0.45); color: var(--sand); margin: 2px 4px 2px 0; white-space: nowrap; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap th { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); background: var(--ink-2); }
.table-wrap td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap tr:last-child td { border-bottom: 0; }

/* ---------- canvases ---------- */
.stage { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the Lab's experiment blocks share the class name .demo with the course's simulation boxes: undo the box here */
.demo { border: 0; background: none; margin: 0; border-radius: 0; overflow: visible; }

/* ---------- notes ---------- */
.note { font-family: var(--mono); font-size: 12px; color: var(--dim); line-height: 1.6; }
.disclaimer { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--ink-2); color: var(--dim); font-size: 13.5px; }
.disclaimer b { color: var(--bone); }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  section { padding: 64px 0; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}