/* ============================================
   FONTS
   ============================================ */
@font-face {
  font-family: 'SimSong';
  src: url('../fonts/simsong-common.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-02FF, U+0370-04FF, U+2000-2E7F,
                 U+3000-303F, U+3100-312F, U+4E00-9FFF,
                 U+F900-FAFF, U+FE30-FFFF;
}

@font-face {
  font-family: 'SimSong';
  src: url('../fonts/simsong-rare.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3040-309F,
                 U+30A0-30FF, U+3400-4DBF;
}

@font-face {
  font-family: 'Ubzidenz';
  src: url('../fonts/Ubzidenz.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* --- SCROLL BEHAVIOUR --- */
html {
  scroll-padding-top: 104px;
}

/* ============================================
   RESET / BASE
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  cursor: none;
  font-family: 'Ubzidenz', sans-serif;
  font-size: 21px;
  line-height: 21px;
  color: #000;
  background-color: #fff;
  background-image: url('../images/background.png');
  background-repeat: repeat;
  background-attachment: scroll;
  background-size: 1200px;
}

/* ============================================
   LINKS (default — external/outbound links)
   ============================================ */
a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 11%;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 7%;
  text-decoration-style: solid;
  background-image: linear-gradient(transparent 50%, #6eff81 50%);
  background-size: 100% 210%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  transition: background-position 0.4s ease;
}

a:hover {
  background-position: 0% 100%;
  color: #000;
  text-decoration: none;
}

/* ============================================
   NAV
   ============================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: 20px;
  padding-left: 18px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

nav a {
  display: inline-block;
  font-family: 'Ubzidenz', sans-serif;
  font-size: 21px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #000;
  background-color: #fff;
  background-image: linear-gradient(transparent 50%, #6eff81 50%);
  background-size: 100% 210%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  padding: 3px 2px 0px;
  text-decoration: none;
  line-height: 20px;
  transition: background-position 0.4s ease;
}

nav a:hover,
nav a.active {
  background-position: 0% 100%;
  color: #000;
}

nav .page-group {
  display: flex;
  gap: 12px;
}

nav a.home.active { text-decoration: none; }
nav a.home:hover { text-decoration: none; }
nav a.home { margin-right: 0px; }
nav a.page { margin-right: 0px; }
nav a.page:last-child { margin-right: 0; }

/* ============================================
   MAIN
   ============================================ */
main {
  padding-top: 84px;
  min-height: 100vh;
}

/* ============================================
   2-COLUMN BREAKPOINT (shared nav rule)
   ============================================ */
@media (max-width: 600px) {
  nav a.home {
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
  }
  nav a.home::before {
    content: attr(data-short);
    font-size: 21px;
    line-height: 21px;
    letter-spacing: 0.02em;
    display: inline-block;
  }
  nav a[data-page="about"] {
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
  }
  nav a[data-page="about"]::before {
    content: attr(data-short);
    font-size: 21px;
    line-height: 21px;
    letter-spacing: 0.02em;
    display: inline-block;
  }
  nav {
    justify-content: space-between;
    padding-right: 18px;
    padding-left: 18px;
    gap: 8px;
  }
  nav .page-group {
    display: flex;
    gap: 8px;
  }
  nav a.page {
    margin-right: 0;
    letter-spacing: 0.02em;
  }
   nav a {
    transition: none;
  }
  nav a:hover {
    background-position: 0% 0%;
  }
  nav a.active {
  background-position: 0% 100%;
  }
}
html, body, * , *::before, *::after { cursor: none !important; }