/*
 * assets/site.css
 * Shared stylesheet for non-deck section pages:
 *   skills/index.html, resources/index.html, vlogs/index.html,
 *   contribute/index.html, seasons/index.html
 *
 * Page-specific rules (card grids, filter rows, post cards, etc.)
 * remain as inline <style> in each file.
 */

/* ---- Design tokens ---- */
:root {
  --amber:     #FBAF32;
  --blue:      #4992C1;
  --navy:      #11172C;
  --sky:       #1A9ED7;
  --light:     #F5F8FB;
  --paper:     #FFFFFF;
  --ink:       #11172C;
  --green:     #2EAF7D;
  --shadow-sm: 0 4px 12px rgba(17,23,44,.10);
  --shadow-md: 0 8px 24px rgba(17,23,44,.13);
  --shadow-lg: 0 16px 40px rgba(17,23,44,.18);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- Scroll behaviour ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Body / dot-grid background ---- */
body {
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
  background: var(--light);
  background-image: radial-gradient(rgba(73,146,193,.07) 1px, transparent 1.4px);
  background-size: 28px 28px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Top navigation bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(245,248,251,.94);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--navy);
}

.topbar .back {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: .06em .85em;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
}

.topbar .back:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-md);
}

.topbar .breadcrumb {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: .72;
}

.topbar .breadcrumb a {
  color: var(--sky);
  text-decoration: none;
}

.topbar .breadcrumb a:hover {
  text-decoration: underline;
}

/* ---- Page shell ---- */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 4rem;
}

/* ---- Hero block ---- */
.hero {
  text-align: center;
  max-width: 720px;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.kicker {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--navy);
  background: var(--amber);
  border: 2px solid var(--navy);
  padding: .18em 1em;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: .5rem;
}

h1 .pop {
  color: var(--sky);
}

.sub {
  font-size: clamp(.95rem, 2vw, 1.15rem);
  line-height: 1.55;
  font-weight: 500;
  color: rgba(17,23,44,.72);
  max-width: 560px;
  margin: .6rem auto 0;
}

/* ---- Site footer ---- */
footer.site {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px dashed rgba(17,23,44,.18);
  width: min(96vw, 1060px);
  padding-top: 1.2rem;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: rgba(17,23,44,.52);
  text-align: center;
}

footer.site a {
  color: var(--sky);
  text-decoration: none;
}

footer.site a:hover {
  text-decoration: underline;
}