/* === Fonts === */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/AtkinsonHyperlegibleNext-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Intel One Mono';
  src: url('/fonts/IntelOneMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('/fonts/Jost.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat Alternates';
  src: url('/fonts/MontserratAlternates-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* === Base === */

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

html {
  font-size: 18px;
}

body {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  background-color: #f5f0e8;
  color: #2c2825;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Layout === */

.page {
  max-width: 36rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
}

/* === Heading === */

.heading {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: 0.04em;
  color: #E95420;
  margin-bottom: 0.25rem;
}

.heading a {
  color: inherit;
  text-decoration: none;
}

.wordmark {
  font-family: 'Jost', sans-serif;
}

/* === Motto === */

.motto {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-style: italic;
  font-size: 0.8rem;
  color: #E95420;
  letter-spacing: 0.02em;
  margin-bottom: 2.5rem;
}

/* === Bio === */

.bio {
  font-size: 1rem;
  line-height: 1.7;
  color: #2c2825;
  margin-bottom: 3rem;
}

.bio strong {
  color: #E95420;
}

/* === Links === */

.links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.links a {
  font-family: 'Intel One Mono', monospace;
  font-size: 0.85rem;
  color: #7a7268;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.links a:hover {
  color: #E95420;
}

.links a:visited {
  color: #7a7268;
}

/* === Footer === */

.footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #e5ddd4;
  text-align: left;
}

.footer-mark {
  display: inline-block;
}

/* === 404 === */

.page-404 .heading {
  font-size: 2.5rem;
  background: linear-gradient(to bottom, #2c2825, rgba(44, 40, 37, 0.3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-404 .motto {
  font-size: 1.05rem;
  color: #E95420;
}