/* Base theme */
:root {
  --bg: #fff8e7; /* Cosmic latte */
  --fg: #1a1a1a;
  --muted: #5a5a5a;
  --accent: #3b6cf0;
  --transition-ms: 1800ms; /* doubled fade time */
  /* Dark latte tone for main quote text (same hue family, not pure black) */
  --fg-quote: hsla(40, 28%, 14%, 0.92);
  --fg-quote-muted: hsla(40, 28%, 14%, 0.72);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.home-link {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: inline-block;
  z-index: 1000;
  opacity: 0.4; /* ~40% opacity */
}
.home-link img { height: 28px; width: 28px; display: block; }
.home-link:hover { opacity: 0.7; }

.hint {
  position: fixed;
  right: 12px;
  top: 12px;
  color: #666;
  font-size: 13px;
  opacity: 0.7;
}

.app {
  min-height: 100dvh;
  padding: clamp(16px, 4vw, 64px);
  box-sizing: border-box;
}

.stage {
  position: relative;
  min-height: calc(100dvh - 2 * clamp(16px, 4vw, 64px));
}

.card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-ms) ease-in-out;
}

.card.active {
  opacity: 1;
}

/* Absolutely positioned content centered on its own (x,y) */
.card .content {
  position: absolute;
  left: calc(var(--x, 50) * 1vw);
  top: calc(var(--y, 50) * 1vh);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  will-change: transform;
  width: min(80vw, 1200px); /* allow slightly wider quotes */
}

blockquote.quote {
  margin: 0 0 1rem 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(29px, 6vw, 67px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: pre-wrap; /* preserve line breaks in text */
  color: var(--fg-quote);
}

.author {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: clamp(13px, 1.9vw, 19px);
  color: var(--fg-quote);
}

.source {
  margin-top: 0.25rem;
  font-size: clamp(10.5px, 1.3vw, 14px);
  color: var(--fg-quote-muted);
}

/* No global max-width on stage/card now; content controls width */

/* Optional structure inside the quote block */
.quote .title {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-quote-muted);
  margin-bottom: 0.5rem;
}

.quote .body {
  /* inherits typography from blockquote */
}