@font-face {
    font-family: 'title';
    src: url('/static/fonts/title.ttf') format('truetype');
}
@font-face {
    font-family: 'body';
    src: url('/static/fonts/body.ttf') format('truetype');
}
@font-face {
    font-family: 'special';
    src: url('/static/fonts/special.ttf') format('truetype');
}

:root {
  --line: rgba(255, 255, 255, .7);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'body';
  margin: 0;
  color: #fff;
  background: #111;
  line-height: 1.5;
}

/* Fixed image layer: it stays in place while the page scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/static/icons/BG.png") center / cover no-repeat;
}

/* The white content layer inverts against every area of the image behind it. */
header,
main,
footer {
  position: relative;
  mix-blend-mode: difference;
}

a { color: inherit; text-underline-offset: 3px; }

.container { width: min(1080px, calc(100% - 40px)); margin: auto; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
}

.brand { font-weight: 750; letter-spacing: -0.04em; text-decoration: none; }
.nav-links { display: flex; gap: 20px; font-size: .92rem; }
.nav-links a { text-decoration: none; color: inherit; }
.nav-links a:hover { opacity: .72; }

.hero { padding: 88px 0 96px; max-width: 900px;}
.eyebrow, .project-number { color: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
special { font-family: 'special'; font-size: 200px; display: inline;}
h1 { font-family: 'title'; letter-spacing: 0.05em; font-size: 120px; line-height: 1.1; }
.intro { max-width: 580px; color: inherit; font-size: 1.1rem; display: flex; }
.button { display: inline-block; margin-top: 22px; padding: 11px 17px; border: 1px solid currentColor; color: inherit; text-decoration: none; border-radius: 999px; font-size: .92rem; }
.button:hover { opacity: .72; }

section { padding: 72px 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 28px; font-size: 1.45rem; letter-spacing: -.04em; }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.project { min-height: 255px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); background: transparent; text-decoration: none; transition: transform .18s ease, opacity .18s ease; }
.project:hover { transform: translateY(-4px); opacity: .72; }
.project h3 { margin: 7px 0 4px; font-size: 1.25rem; letter-spacing: -.04em; }
.project p { margin: 0; color: inherit; font-size: .92rem; }
.project inpr { color: inherit; font-size: .65rem; background: rgba(255, 0, 0, 0.486); padding: 7px 4px 4px 10px; border-radius: 0px 999px 999px 0px; margin-bottom: 8px; margin-left: -3px; }
.project prize { color: inherit; font-size: .65rem; background: rgba(255, 196, 0, 0.486); padding: 7px 4px 4px 10px; border-radius: 0px 999px 999px 0px; margin-top: 8px; margin-left: -3px; }

.about { max-width: 650px; color: inherit; font-size: 1.08rem; }
.contact { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.contact p { margin: 0; color: inherit; }
.email { font-size: 1.25rem; font-weight: 700; letter-spacing: -.05em; cursor: pointer; text-decoration: underline; color: inherit; }
.email:hover { opacity: .72; }
footer { padding: 24px 0 36px; color: inherit; font-size: .65rem; }

@media (max-width: 680px) {
  .container { width: min(100% - 32px, 1080px); }
  .nav-links { gap: 13px; }
  .hero { padding: 60px 0 72px; }
  section { padding: 54px 0; }
  .projects { grid-template-columns: 1fr; }
  .project { min-height: 190px; }
  .contact { align-items: start; flex-direction: column; }
}