/* #dreamfeed — shared house style.
   Layout: every room is a full-bleed stage; the only chrome is a thin
   projection-booth bar at the top and a whispered hint at the bottom. */
:root {
  --ink: #0b0b0c;      /* the dark of the theater */
  --soot: #18181a;     /* walls, cabinets */
  --ash: #5f5e5b;      /* rules, quiet text */
  --silver: #c4c2bc;   /* secondary text */
  --paper: #ecebe5;    /* primary text, cards */
  --lamp: #f7f3e6;     /* the one warm light */
  --display: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
  color-scheme: dark;
}
html, body { background: var(--ink); color: var(--paper); }
body { margin: 0; font-family: var(--body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--lamp); outline-offset: 3px; }

.dream-media { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
video.dream-media { filter: grayscale(1) contrast(1.08); }

.booth {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 28px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--silver); pointer-events: none;
  background: linear-gradient(rgba(11,11,12,.9), rgba(11,11,12,0));
}
.booth a, .booth button { pointer-events: auto; color: var(--silver); text-decoration: none; border-bottom: 1px solid var(--ash); background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.booth a:hover, .booth button:hover { color: var(--lamp); border-color: var(--lamp); }
.booth .room { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--paper); }

.hint {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; text-align: center;
  padding: 28px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash);
  background: linear-gradient(rgba(11,11,12,0), rgba(11,11,12,.9)); pointer-events: none;
}

.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); background: transparent; border: 1px solid var(--ash); padding: 10px 14px; cursor: pointer;
}
.btn:hover { border-color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}