@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("../fonts/CrimsonPro-Italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --room: #0b0c0f;      /* the plate's darkest corner */
  --paper: #f3efe6;
  --dim: #b9bcc2;
  --mute: #8c8e92;
  --bar: #f2dc3a;       /* censor bar yellow, used only on the bar */
  --ink: #15181f;
  --gutter: clamp(16px, 4vw, 64px);
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--room); color: var(--paper); }
body { font-family: "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100dvh; overflow-x: clip; }

.cs { position: relative; min-height: 100dvh; }
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--room); --px: 50%; --py: 46%; }
.stage .poster, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .poster { object-fit: cover; object-position: var(--px) var(--py); }
.stage canvas { opacity: 0; transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.stage.live canvas { opacity: 1; }
/* a soft shadow under the words so they read over the floor and the bed */
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 52% at 82% 86%, rgba(8, 9, 11, 0.86), rgba(8, 9, 11, 0.55) 45%, rgba(8, 9, 11, 0) 80%); }

.top { position: absolute; top: 0; left: 0; right: 0; padding: clamp(16px, 3vh, 36px) var(--gutter); }
.brand { display: inline-block; line-height: 0; }
.brand img { height: clamp(22px, 2.2vw, 30px); width: auto; }

.copy {
  position: absolute; right: var(--gutter); bottom: clamp(24px, 7vh, 72px);
  width: min(520px, 40vw);
}
.quote { font-family: "Crimson Pro", Georgia, serif; font-style: italic; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.35; color: var(--dim); margin-bottom: 14px; }
.quote span { display: block; font-family: "Instrument Sans", system-ui, sans-serif; font-style: normal; font-size: 13px; letter-spacing: 0.02em; color: var(--mute); margin-top: 4px; }
h1 { font-family: "Outfit", system-ui, sans-serif; font-weight: 700; font-size: clamp(30px, 3.3vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
.lede { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: var(--dim); margin-top: 14px; max-width: 34em; }
.status { margin-top: 20px; }
.bar { display: inline-block; background: var(--bar); color: var(--ink); font-family: "Outfit", system-ui, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; padding: 7px 16px 8px; }

/* phone: the room on top as a square, the words below it */
@media (max-width: 699px) {
  .stage { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; }
  .stage::after { background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 70%, var(--room)); }
  .top { padding: 16px; }
  .copy { position: static; width: auto; padding: 22px 16px 40px; }
  h1 { font-size: clamp(30px, 9vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .stage canvas { transition: none; }
}

/* click reactions on the stage (positioned by js/stage.js; transform and opacity only).
   The trader's line is a museum placard, like the site's: stone, a lighter top edge, a darker bottom edge,
   his words in the voice serif, a thin leader line to his head. Zs and question marks are light and see-through. */
.fx-bubble, .fx-lead, .fx-dot, .fx-q, .fx-z { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.fx-bubble {
  box-sizing: border-box; width: 236px; padding: 12px 14px 11px; border-radius: 2px;
  background: #e7e4dc; color: #141414; border-top: 1px solid #f4f2ec; border-bottom: 3px solid #c9c5bb;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.fx-bubble i { display: none; }
.fx-bubble .b-text { display: block; font-family: "Crimson Pro", Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.2; color: #141414; }
.fx-bubble .b-rest { visibility: hidden; }
.fx-bubble::after {
  content: "the trader, 4:45 AM"; display: block; margin-top: 7px;
  font-family: "Instrument Sans", system-ui, sans-serif; font-size: 11px; line-height: 1; letter-spacing: 0.02em; color: #6d6b66;
}
.fx-lead { height: 1px; width: 1px; background: rgba(231, 228, 220, 0.75); transform-origin: 0 50%; }
.fx-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #e7e4dc; }
.fx-q { font-family: "Crimson Pro", Georgia, serif; font-style: italic; font-size: 34px; line-height: 1; color: rgba(236, 235, 230, 0.62); }
.fx-q.small { font-size: 24px; color: rgba(236, 235, 230, 0.45); }
.fx-z { font-family: "Crimson Pro", Georgia, serif; font-style: italic; font-size: 22px; line-height: 1; color: rgba(236, 235, 230, 0.55); }