:root{
  --maroon: #800000;        /* exact maroon */
  --black: #000000;
  --somalia: #6aa9e9;       /* softer Somalia blue */
  --grey: #808080;

  --nav-font-desktop: 18px; /* top-left nav size (desktop) */
  --insta-font-desktop: 16px; /* instagram = nav - 2px */
  --nav-font-mobile: 13px;  /* slightly smaller nav size (mobile) */
  --insta-font-mobile: 11px;/* instagram mobile = nav - 2px */

  --transition-duration: 250ms;
}


/* Reset + layout */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  /* default background is home (maroon) */
  background-color: var(--maroon);
  transition: background-color var(--transition-duration) ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Map data-page to exact background colors */
body[data-page="home"]    { background-color: var(--maroon); }
body[data-page="works"]   { background-color: var(--black); }
body[data-page="personal"]{ background-color: var(--somalia); }
body[data-page="archive"] { background-color: var(--grey); }

/* Header / nav (top-left) */
.site-header {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 50;
  pointer-events: auto;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* nav links */
.site-nav a {
  color: #fff;
  text-decoration: none;
  font-size: var(--nav-font-desktop);
  line-height: 1;
  letter-spacing: 0.2px;
  display: inline-block;
}

.site-nav a:hover,
.site-nav a.active {
  text-decoration: underline;
}

.site-nav .sep {
  color: rgba(255,255,255,0.7);
  font-size: var(--nav-font-desktop);
}

/* Instagram link (top-right) */
.instagram-link {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
}

.instagram-link a {
  color: #fff;
  text-decoration: none;
  font-size: var(--insta-font-desktop);
  line-height: 1;
}

.instagram-link a:hover { text-decoration: underline; }

/* Page wrapper: used for fade in/out */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-duration) ease;
}

/* visible => faded in */
.page-wrapper.visible { opacity: 1; }

/* fade-out class while transitioning out */
.page-wrapper.fade-out { opacity: 0; }

/* Mobile adjustments to prevent overlap */
@media (max-width: 600px) {
  .site-header { top: 12px; left: 12px; }
  .instagram-link { top: 12px; right: 12px; }

  .site-nav a, .site-nav .sep { font-size: var(--nav-font-mobile); }
  .instagram-link a { font-size: var(--insta-font-mobile); }

  /* ensure left nav doesn't extend into right area */
  .site-nav { max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; }
  .site-nav a { white-space: nowrap; }
}

/* Accessibility: focus states */
.site-nav a:focus,
.instagram-link a:focus {
  outline: 2px solid rgba(255,255,255,0.15);
  outline-offset: 3px;
}