/* Eph Cycle — the theme layer on top of the Broadsheet design system.
   Every page in the design carried this same :root override (purple accent,
   gold second accent, Oswald headings); it lives here once instead. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

:root {
  --color-accent: #5b2a86;
  --color-accent-100: #f0e8f7;
  --color-accent-200: #dcc4ec;
  --color-accent-300: #c194dc;
  --color-accent-400: #9d64c4;
  --color-accent-500: #5b2a86;
  --color-accent-600: #4a2170;
  --color-accent-700: #3a1a59;
  --color-accent-800: #2b1341;
  --color-accent-900: #1c0c2b;

  --color-accent-2: #d99a00;
  --color-accent-2-100: #fef8e6;
  --color-accent-2-200: #fdecc0;
  --color-accent-2-300: #fbdb8c;
  --color-accent-2-400: #f0b400;
  --color-accent-2-500: #d99a00;
  --color-accent-2-600: #b37d00;
  --color-accent-2-700: #8a6100;
  --color-accent-2-800: #664700;
  --color-accent-2-900: #432f00;

  --font-heading: 'Oswald', var(--font-body);
  --font-heading-weight: 600;

  --map-green: #2f8f5b;
  --map-blue: #2a6fb0;
}

/* Per-page grounds, straight from the design files. */
body.page-home { background: #f1e6fa; }
body.page-trips { background: linear-gradient(180deg, #eaf4fb 0%, #e9f6ef 55%, #eef1fa 100%); background-attachment: fixed; }
body.page-marketplace { background: linear-gradient(180deg, #fdf6f9 0%, #f3ecf8 55%, #efe4f5 100%); background-attachment: fixed; }
body.page-blog { background: linear-gradient(180deg, #fdf3e2 0%, #fbe6e0 55%, #fbe0ea 100%); background-attachment: fixed; }
body.page-plain { background: var(--color-bg); }

/* — landing hero — */
.hero-section { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: -80px 0; z-index: 0; }
.hero-content { position: relative; z-index: 1; }
@keyframes hero-glow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-bg-glow {
  background: linear-gradient(120deg, #faf7fd, #f1e6fa, #f8f2fc, #efe2f8);
  background-size: 300% 300%;
  animation: hero-glow 14s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-bg-glow { animation: none; } }
.wcc-line { display: block; }

.kicker {
  display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700);
}

/* The design's cards are links on the landing page; keep the lift on hover. */
.lift { transition: transform .15s ease; }
.lift:hover { transform: translateY(-3px); }

/* Author links in card meta: underline only on hover, as in the design. */
.author-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; }
.author-link:hover { text-decoration-color: currentColor; }

@keyframes btn-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.18); }
  55% { transform: scale(0.92); }
  75% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* The design was drawn at desktop width with some fixed element sizes; keep the
   page itself from ever scrolling sideways on a narrow screen. */
body { overflow-x: hidden; }
img, iframe { max-width: 100%; }

@media (max-width: 720px) {
  .nav { gap: var(--space-2) var(--space-3); }
  .hide-narrow { display: none; }
}