:root { --accent: #e65100; }

* { box-sizing: border-box; }

body {
  background: #f9faf9;
  color: #1c2420;
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
  min-height: 100vh;
  padding: clamp(2rem, 10vh, 8rem) 1.5rem;
}

main { max-width: 42rem; }

.back, nav a {
  color: #66736c;
  font: 0.8rem "Courier New", monospace;
  text-underline-offset: 0.25rem;
}

h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 400; line-height: 1; margin: 3rem 0 1rem; }
p { font-size: 1.1rem; line-height: 1.65; max-width: 38rem; }
.roles { color: var(--accent); font-family: "Courier New", monospace; font-size: 0.9rem; }
nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem; }
a:hover, a:focus-visible { color: var(--accent); outline: none; }

@media (prefers-color-scheme: dark) {
  :root { --accent: #ffb74d; }
  body { background: #141816; color: #e6ebe7; }
  .back, nav a { color: #b7c5bc; }
}