:root {
  
  --sky-blue-light: #7fc8ff;
  --sky-blue-dark: #0f89ff;
  --warm-cream: #f1e6d6;
  --warm-accent: #d8a86f;
  --sky-muted: #9fb5c9;
  --text-dark: #213547;
  
  
  --skyline-image: url('../images/skyline.jpg');
}


.hero,
.hero--skyline,
.hero.hero--skyline {
  position: relative;
  background-image: var(--skyline-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 44vh;
  color: #ffffff;
}


.hero::before,
.hero--skyline::before,
.hero.hero--skyline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 137, 255, 0.10) 0%,
    rgba(241, 230, 214, 0.30) 60%,
    rgba(255, 255, 255, 0.50) 100%
  );
  pointer-events: none;
  z-index: 1;
}


.hero .container,
.hero--skyline .container,
.hero.hero--skyline .container {
  position: relative;
  z-index: 2;
}


body {
  background: linear-gradient(180deg, var(--warm-cream) 0%, #ffffff 100%);
  color: var(--text-dark);
}


.memo-viewport {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.92)
  );
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(33, 53, 71, 0.12);
  border: 1px solid rgba(33, 53, 71, 0.04);
}

.memo-viewport .memo {
  color: var(--text-dark);
  font-weight: 600;
}


.memo-prev,
.memo-next,
.memos-carousel .memo-prev,
.memos-carousel .memo-next {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(33, 53, 71, 0.08);
  color: var(--text-dark);
  box-shadow: 0 4px 12px rgba(33, 53, 71, 0.08);
}

.memo-prev:hover,
.memo-next:hover,
.memos-carousel .memo-prev:hover,
.memos-carousel .memo-next:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}


.site-header {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(241, 230, 214, 0.85)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


a {
  color: var(--sky-blue-dark);
}

a:hover {
  color: var(--warm-accent);
}


.btn-primary {
  background: linear-gradient(90deg, var(--sky-blue-dark), var(--sky-blue-light));
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 137, 255, 0.14);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(15, 137, 255, 0.20);
}