/* LOBBY — the hotel as a Wes Anderson set.
 *
 * Four things do the work, and none of them is a filter:
 *
 *   FUTURA, everywhere, in caps, tracked wide. It is the whole signature. Real
 *   Futura where the machine has it, Jost where it does not.
 *   COURIER for anything a person says, because every insert in those films is
 *   typewritten and the desk book is correspondence, not signage.
 *   SQUARE CORNERS. The house radius drops to 2px — these sets are rectilinear,
 *   and a rounded card reads as an app rather than a printed thing.
 *   BLUSH AND LOBBY RED. Pastel but chromatic: pale is not the same as grey,
 *   and the drained version of this palette is a different film entirely.
 */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

:root {
  --ground: #e3cfc6;
  --panel: #f5e7de;
  --panel-2: #dcc1b5;
  --ink: #402a2e;
  --ink-dim: #8a6260;
  --rule: #b98a80;
  --rule-soft: #dec3b8;
  --accent: #a6322e;
  --accent-ink: #f5e7de;
  --good: #6b8a63;
  --warn: #c9902f;

  --display: 'Futura', 'Futura PT', Jost, 'Century Gothic', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Futura', 'Futura PT', Jost, 'Century Gothic', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Courier New', Courier, ui-monospace, monospace;

  /* The building itself. A Wes hotel is a pink one, photographed dead square
     against a flat sky, so the façade is part of the palette and not part of
     the art pipeline. */
  --sky: #7d8f9b;
  --facade: #e0a493;
  --facade-2: #c98878;
  --trim: #7e3f38;
  --lit: #f2c85c;
  --moon: #f4e6cb;

  --radius: 2px;
  --rule-w: 1px;
  --shadow-hard: 0 12px 34px rgba(64,42,46,.22);
  color-scheme: light;
}

/* The keyline inside the frame. Every one of these hotels is photographed
   through something — a doorway, a window, a proscenium — and one thin rule
   inside the border is the cheapest way to say it. */
#stage::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  pointer-events: none;
  z-index: 4;
}

#wordmark { letter-spacing: .12em; font-weight: 500; }

/* The same lobby after the lamps go on. */
:root[data-theme="dark"] {
  --ground: #2b2226;
  --panel: #362a2f;
  --panel-2: #42333a;
  --ink: #f0ded4;
  --ink-dim: #ab8b87;
  --rule: #6b525a;
  --rule-soft: #493840;
  --accent: #d9756e;
  --accent-ink: #2b2226;
  --good: #8da684;
  --warn: #d6a354;
  --sky: #2f3a46;
  --facade: #7d5148;
  --facade-2: #6a423b;
  --trim: #43282a;
  --lit: #f0c766;
  --moon: #d8cbb2;
  --shadow-hard: 0 12px 34px rgba(0,0,0,.45);
  color-scheme: dark;
}