/* ————— Dinner board: evening-bistro wallboard ————— */

:root {
  --bg: #17120d;
  --bg-deep: #0e0b07;
  --card: #241c13;
  --card-edge: rgba(255, 226, 178, 0.08);
  --cream: #f2e7d4;
  --cream-dim: #c8b899;
  --ink: #2a1f12;
  --amber: #e8a04c;
  --title: clamp(17px, 1.35vw, 26px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  cursor: none;
}

body {
  font-family: "Instrument Sans", "Helvetica Neue", sans-serif;
  color: var(--cream);
  background:
    radial-gradient(120% 90% at 50% 0%, #1d1610 0%, var(--bg) 55%, var(--bg-deep) 100%);
}

/* ————— The waterfall ————— */

#board {
  position: fixed;
  inset: 0;
  display: flex;
  gap: clamp(14px, 1.4vw, 28px);
  padding: 0 clamp(14px, 1.4vw, 28px);
}

.column {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.tape {
  /* two identical halves stacked; animate downward one half-height for a seamless loop */
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 28px);
  animation: fall linear infinite;
  will-change: transform;
}

@keyframes fall {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

/* ————— Cards ————— */

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 230, 190, 0.05) inset,
    0 14px 34px -12px rgba(0, 0, 0, 0.65);
  flex-shrink: 0;
}

.card .photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1c150e;
}

.card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.06) contrast(1.02);
}

.card .below {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.1vw, 20px);
}

.card .text { flex: 1 1 auto; min-width: 0; }

.card h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: var(--title);
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--cream);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .site {
  margin-top: 7px;
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  display: flex;
  align-items: center;
  gap: 7px;
}

.card .site::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--amber));
}

.card[data-site="noracooks"]                { --dot: #e8a04c; }
.card[data-site="minimalistbaker"]          { --dot: #8fb573; }
.card[data-site="rainbowplantlife"]         { --dot: #d97f6e; }
.card[data-site="veganricha"]               { --dot: #d9a441; }
.card[data-site="itdoesnttastelikechicken"] { --dot: #6fb3a8; }
.card[data-site="fullofplants"]             { --dot: #b48ead; }

/* QR chip — cream recipe-card stamp */
.qr {
  flex: 0 0 auto;
  background: #f4ecdc;
  border-radius: 10px;
  padding: 6px;
  line-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.qr svg { display: block; }

/* ————— Atmosphere ————— */

.veil {
  position: fixed;
  left: 0;
  right: 0;
  height: 14vh;
  pointer-events: none;
  z-index: 5;
}
.veil-top {
  top: 0;
  height: 18vh;
  background: linear-gradient(to bottom, var(--bg-deep) 0%, rgba(14, 11, 7, 0.85) 40%, transparent 100%);
}
.veil-bottom { bottom: 0; background: linear-gradient(to top,    var(--bg-deep), transparent); }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ————— Masthead & clock ————— */

.masthead {
  position: fixed;
  top: clamp(18px, 2.2vh, 34px);
  left: clamp(22px, 2vw, 40px);
  z-index: 10;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}

.masthead h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 44px);
  letter-spacing: 0.01em;
}

.masthead .q { color: var(--amber); }

.masthead .sub {
  margin-top: 4px;
  font-size: clamp(11px, 0.8vw, 15px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.corner {
  position: fixed;
  top: clamp(18px, 2.2vh, 34px);
  right: clamp(22px, 2vw, 40px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.4vw, 28px);
  padding: 10px clamp(14px, 1.2vw, 22px);
  background: rgba(14, 11, 7, 0.78);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.remote {
  display: flex;
  align-items: center;
  gap: 10px;
}

.remote-qr {
  background: #f4ecdc;
  border-radius: 9px;
  padding: 5px;
  line-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.remote-label {
  font-size: clamp(9px, 0.66vw, 12px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  line-height: 1.5;
  text-align: left;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.clock {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 38px);
  font-variant-numeric: tabular-nums;
  color: var(--cream-dim);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}

/* ————— Status / fade transitions ————— */

.status {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 20;
  background: var(--bg);
  color: var(--cream-dim);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(18px, 1.6vw, 28px);
  transition: opacity 1.2s ease;
}

.status.hidden { opacity: 0; pointer-events: none; }

#board { transition: opacity 0.9s ease; }
#board.rebuilding { opacity: 0; }