/**
 * Gold-on-dark skin for the viewer.
 *
 * style.css is the viewer's own stylesheet — structure, spacing and layout all
 * live there and this file does not touch any of it. It only redefines the
 * tokens that sheet exposes, so the panel picks up the portfolio palette
 * without either sheet having to be forked. This file is the source; the
 * portfolio's showcase/house/css/gold.css is a copy of it.
 *
 * The blueprint dimension tags are deliberately left alone. That mode is a
 * drawing with its own amber-on-navy palette, and it reads correctly as it is.
 */
:root {
  --panel: rgba(32, 14, 18, 0.86);
  --panel-line: rgba(245, 200, 66, 0.18);
  --text: #f3e7d2;
  --muted: #9c7a68;
  --accent: #f5c842;
  --accent-ink: #2a1a00;

  --surface: #120a0d;
  --hover: rgba(245, 200, 66, .12);
  --gate: #120a0d;
  --gate-text: #9c7a68;
  --gate-line: rgba(245, 200, 66, .18);
  --label-bg: rgba(18, 10, 13, .74);
  --label-line: rgba(245, 200, 66, .3);
  --scrim: rgba(18, 10, 13, .55);
  --shadow: rgba(0, 0, 0, .5);

  color-scheme: dark;
}

/* The viewer's own gate is redundant here — the site's preloader is already
   covering the page and lifts when the house is standing. */
#loading { display: none; }

#panel h1 {
  font-family: 'Space Grotesk', var(--font-primary, sans-serif);
  font-weight: 700;
  letter-spacing: -.01em;
}

#panel h2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  color: var(--accent);
  opacity: .82;
}

/* A gold hairline along the panel's top edge, matching the site's cards. It is
   a background layer because the panel scrolls — see the note in style.css. */
#panel {
  background:
    linear-gradient(135deg, #c9991a, #f5c842, #ffe066) top center / 100% 2px no-repeat,
    var(--panel);
  border-top: 0;
}