/* main.css */

@import url('nav.css');
@import url('footer.css');
@import url('components.css');
@import url('index.css');
@import url('gallery.css');
@import url('timeline.css');
@import url('more-info.css');

:root {
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --color-bg: #0c0d0f;
  --color-surface: #14161a;
  --color-border: #252830;
  --color-accent: #e6b832;
  --color-accent-hover: #cfa228;
  --color-accent-subtle: rgba(230,184,50,.12);
  --color-accent-subtle-border: rgba(230,184,50,.25);
  --color-accent-subtle-border-strong: rgba(230,184,50,.4);
  --color-accent-underline: rgba(230,184,50,.4);
  --color-text: #ffffff;
  --color-muted: #888c96;
  --color-online: #4ade80;
  --color-banner-gradient-end: #08090b;
  --color-nav-bg: rgba(12,13,15,0.92);
  --color-overlay-bg: rgba(0,0,0,.85);
  --color-lightbox-bg: #000;
  --color-on-dark: rgba(255,255,255,.75);
  --color-on-dark-dim: rgba(255,255,255,.45);
  --color-on-dark-hover: #ffffff;
  --color-on-dark-subtle: rgba(255,255,255,.1);
  --color-video-overlay-hover: rgba(0,0,0,.3);
  --color-video-play-bg: rgba(0,0,0,.6);
  --color-video-play-border: rgba(255,255,255,.6);
  --tag-milestone: #e6b832;
  --tag-event: #e05050;
  --tag-notable: #a78bfa;
  --tag-funnies: #f5c542;
  --tag-general: #9a9fa8;
  --max-w: 1200px;
  --tl-gap:     clamp(12px, 2vw, 24px);
  --tl-seg-gap: clamp(8px, 2vw, 16px);
  --tl-w:       4px;
  --tl-dot-r:   7px;
}

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: clamp(14px, 1vw + 12px, 16px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
img, video { max-width: 100%; display: block; }

/* Utilititties */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hidden { display: none !important; }
.fade-out { opacity: 0; transition: opacity .25s; }