/* House of Productions: the booth in Joel's colours. Black and gold from his logo, the
   wide Anybody headings and Martian Mono from houseofproductions432.com. Loaded after
   every other stylesheet, so it only has to restate what differs from tokens.css. */

@font-face { font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; src: url(/assets/brand/fonts/anybody.woff2) format("woff2-variations"), url(/assets/brand/fonts/anybody.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/brand/fonts/martian-400.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/brand/fonts/martian-600.woff2) format("woff2"); }

:root {
  color-scheme: dark;

  --lf-bg: #0c0b0a;
  --lf-bg-2: #121110;
  --lf-surface: #181614;
  --lf-surface-2: #211e1a;
  --lf-line: #2c2823;
  --lf-line-2: #3f392f;

  --lf-ink: #f6f3ec;
  --lf-ink-2: #d9d4c8;
  --lf-muted: #a39e91;
  --lf-faint: #726c61;

  --lf-accent: #d4a83a;       /* the gold in his logo */
  --lf-accent-2: #e8c461;
  --lf-accent-ink: #171612;
  --lf-ember: #d64b2a;        /* the red-orange from his site */
  --lf-ok: #45c083;

  --lf-glow-rgb: 212, 168, 58;
  --lf-glow-2-rgb: 232, 196, 97;
  --lf-bg-rgb: 12, 11, 10;
  --lf-shade-rgb: 6, 5, 4;

  --lf-font-display: "Anybody", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lf-font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lf-font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.lf-display { font-variation-settings: normal; font-stretch: 112%; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.lf-mono { font-size: 0.68rem; font-weight: 400; letter-spacing: 0.12em; }

/* Lockup: his gold house-and-camera mark, then the name the way his logo sets it:
   "House of" in plain type, PRODUCTIONS in gold capitals. */
.brand { gap: 10px; }
.brand img.hop-mark { width: 38px; height: auto; }
.lf-wordmark { font-family: var(--lf-font-display); font-variation-settings: normal; font-stretch: 108%; font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; text-transform: none; color: var(--lf-ink); white-space: nowrap; }
.lf-wordmark em { font-style: normal; font-weight: 800; font-stretch: 118%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lf-accent); }

/* Backdrop: a warm gold bloom over black, no grid. */
.backdrop { background: radial-gradient(60% 50% at 50% 0%, rgba(var(--lf-glow-rgb), 0.12), transparent 70%), var(--lf-bg); }

/* Kiosk details */
.style-card .name { font-variation-settings: normal; font-stretch: 106%; font-weight: 700; }
.ev h3, .sc h2 { font-variation-settings: normal; font-stretch: 106%; font-weight: 700; }

/* The "being drawn" screen: his mark, breathing in gold, instead of the default node mark. */
.forge-mark.forge-logo { width: 46%; height: auto; left: 27%; filter: drop-shadow(0 0 22px rgba(var(--lf-glow-rgb), 0.55)); animation: hop-glow 2.4s ease-in-out infinite; }
@keyframes hop-glow {
  0%, 100% { opacity: 0.72; transform: translateY(-50%) scale(0.97); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.03); filter: drop-shadow(0 0 34px rgba(var(--lf-glow-rgb), 0.8)); }
}

/* Phones: stack the name like his logo does, "House of" small over PRODUCTIONS, so the
   lockup leaves room for the event name and the Demo pills. */
@media (max-width: 560px) {
  .lf-wordmark { display: grid; font-size: 0.62rem; line-height: 1.05; letter-spacing: 0.02em; }
  .lf-wordmark em { font-size: 1.42em; }
  .brand img.hop-mark { width: 34px; }
}