:root {
  --ink: #0e0c0b;
  --ink-2: #1a1512;
  --copper-hi: #f7c9a2;
  --copper: #d9834c;
  --copper-mid: #b4612f;
  --verdigris: #46c9ae;
  --text: #f4ebe3;
  --text-dim: #b9a99c;
  --display: "Chakra Petch", "Bahnschrift", "Segoe UI", sans-serif;
  --ui: "Rajdhani", "Bahnschrift", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh; padding: 48px 16px; font: 500 1.15rem/1.6 var(--ui); color: var(--text);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(70, 201, 174, .14), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(217, 131, 76, .28), transparent 60%),
    linear-gradient(160deg, #1d1612, var(--ink) 70%) fixed;
}
main { max-width: 720px; margin: 0 auto; overflow-wrap: anywhere; }
.logo { display: block; width: 160px; height: 160px; margin: 0 auto 24px; }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.15; }
h1 {
  text-align: center; font-size: clamp(2rem, 7vw, 3.2rem); letter-spacing: .02em;
  background: linear-gradient(180deg, var(--copper-hi), var(--copper) 45%, var(--copper-mid) 70%, var(--copper-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { text-align: center; font-family: var(--display); font-weight: 700; letter-spacing: .45em; color: var(--verdigris); margin-bottom: 32px; }
h2 { font-size: 1.3rem; color: var(--copper); margin: 28px 0 8px; }
p, li { color: var(--text-dim); }
p + p { margin-top: 12px; }
ul { padding-left: 1.2em; }
a { color: var(--verdigris); }
.links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0; }
.links a {
  padding: 10px 20px; border: 2px solid var(--copper-mid); border-radius: 6px; background: var(--ink-2);
  color: var(--copper-hi); font-family: var(--display); font-weight: 700; text-decoration: none;
}
.links a:hover { border-color: var(--verdigris); color: var(--verdigris); }
footer { margin-top: 48px; text-align: center; font-size: .95rem; color: var(--text-dim); }