@font-face {
  font-family: "Manrope";
  src: url("/perko-site-assets/Manrope-Variable.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/perko-site-assets/Fraunces-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #171318;
  --muted: #655f68;
  --paper: #fbf9fc;
  --white: #ffffff;
  --coral: #f5948f;
  --coral-soft: #ffe3df;
  --lavender: #9b7bff;
  --lavender-soft: #eee8ff;
  --sky-soft: #e3f1f7;
  --line: #e9e3eb;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

a { color: #5d3fc6; text-underline-offset: 3px; }
a:hover { color: #40239f; }

.shell {
  width: min(860px, calc(100% - 40px));
  margin: 0 auto;
}

header {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 249, 252, .94);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  color: var(--ink);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.8px;
  text-decoration: none;
}

.nav-links { display: flex; flex-wrap: wrap; gap: 18px; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; }

main { padding: 70px 0 90px; }

.hero {
  padding: 40px;
  border-radius: 34px;
  background: linear-gradient(135deg, var(--lavender-soft), var(--coral-soft));
  margin-bottom: 42px;
}

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.08;
  letter-spacing: -.03em;
}

h1 { margin: 0 0 14px; font-size: clamp(44px, 8vw, 72px); }
h2 { margin: 42px 0 12px; font-size: 30px; }
h3 { margin: 26px 0 8px; font-size: 19px; }
p, ul { margin: 0 0 18px; }
li + li { margin-top: 8px; }
.updated { color: var(--muted); font-size: 14px; font-weight: 700; }
.lede { max-width: 680px; font-size: 20px; color: #403b42; }

.notice {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid #d9cff7;
  border-radius: 20px;
  background: var(--white);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}
.button.secondary { background: var(--white); color: var(--ink); border: 1px solid var(--line); }

footer {
  padding: 30px 0 50px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

footer .shell { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--muted); }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .shell { width: min(100% - 28px, 860px); }
  header { padding: 18px 0; }
  nav { align-items: flex-start; }
  .nav-links { gap: 10px 14px; justify-content: flex-end; }
  main { padding: 36px 0 64px; }
  .hero { padding: 28px 24px; border-radius: 26px; }
  h1 { font-size: 44px; }
}