:root {
  --text-main: #2e3a45;
  --text-quote: #24303a;
  --text-author: #8a4a11;
  --text-meta: rgba(46, 58, 69, 0.85);
  --quote-surface: rgba(255, 246, 233, 0.52);
  --surface: rgba(255, 246, 233, 0.84);
  --surface-border: rgba(139, 107, 73, 0.34);
  --social-text: #2f3640;
  --social-bg: rgba(255, 252, 245, 0.78);
  --social-border: rgba(94, 74, 45, 0.38);
  --social-hover-bg: rgba(252, 211, 77, 0.33);
  --social-hover-border: rgba(245, 158, 11, 0.7);
  --focus: #f59e0b;
  --bg-position: 50% center;
  --bg-overlay-1: linear-gradient(145deg, rgba(255, 248, 234, 0.64), rgba(255, 239, 208, 0.26));
  --bg-overlay-2: radial-gradient(circle at 16% 20%, rgba(252, 211, 77, 0.36), transparent 34%);
  --bg-overlay-3: radial-gradient(circle at 82% 18%, rgba(249, 168, 37, 0.26), transparent 32%);
}

body.focus-right {
  --bg-position: 78% center;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100vh;
}

body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--text-main);
  background-color: #f7f6f1;
  overflow-x: hidden;
}

.background-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--bg-overlay-1),
    var(--bg-overlay-2),
    var(--bg-overlay-3),
    url("./images/66203155_10206201660115905_4482291427031646208_n.jpg") var(--bg-position) / cover no-repeat;
  transition: background 240ms ease;
}

.site-mark {
  position: fixed;
  top: 0.9rem;
  left: 1rem;
  z-index: 2;
  margin: 0;
  font: 700 0.86rem/1 "Space Grotesk", "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  color: rgba(36, 48, 58, 0.58);
}

.minimal-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(980px, 92vw);
  margin: 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.8rem;
  padding: 1rem 0;
}

.work-note {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(36, 48, 58, 0.9);
}

.quote-spotlight {
  width: min(620px, 92%);
  text-align: center;
  padding: 1rem 1rem 0.9rem;
  background: var(--quote-surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  backdrop-filter: blur(1.5px);
  box-shadow: 0 6px 18px rgba(51, 65, 85, 0.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.quote-spotlight.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#quote-text {
  margin: 0;
  font-family: "Noto Serif", Georgia, serif;
  font-size: clamp(1rem, 1.9vw, 1.22rem);
  line-height: 1.35;
  color: var(--text-quote);
  max-width: 56ch;
  margin-inline: auto;
}

#quote-author {
  margin: 0.45rem 0 0;
  color: var(--text-author);
  font-weight: 500;
  font-size: 0.84rem;
  opacity: 0.88;
}

.social-cta {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}

.secondary-cta {
  margin: 0.05rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1e2a33;
}

.social-link {
  text-decoration: none;
  color: var(--social-text);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--social-border);
  background: var(--social-bg);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.social-link:hover,
.social-link:focus-visible {
  background: var(--social-hover-bg);
  border-color: var(--social-hover-border);
  transform: translateY(-1px);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.social-link svg {
  width: 1.08rem;
  height: 1.08rem;
  fill: currentColor;
}

@media (max-width: 820px) {
  .work-note {
    font-size: 0.84rem;
  }

  .quote-spotlight {
    width: min(500px, 90%);
    padding: 0.88rem 0.85rem 0.8rem;
  }

  #quote-text {
    font-size: clamp(0.95rem, 4.1vw, 1.08rem);
  }

  #quote-author {
    font-size: 0.8rem;
  }

  .social-link span {
    display: none;
  }

  .site-mark {
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.8rem;
  }

}

@media (max-width: 520px) {
  .quote-spotlight {
    width: min(420px, 86%);
  }
}