/* Kintilla site — tokens from assets/README.md (locked design passes 01/02) */
:root {
  --canvas: #0C0E13;
  --night: #171A23;
  --raised: #1F2430;
  --line: #2E3545;
  --paper: #F5F1E8;
  --paper-60: rgba(245, 241, 232, 0.6);
  --paper-45: rgba(245, 241, 232, 0.45);
  --spark: #FFC247;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1000px 560px at 68% 8%, rgba(255, 166, 84, 0.12), transparent 62%),
    linear-gradient(180deg, #16120E 0%, #0D0B09 56%, var(--canvas) 100%);
  color: var(--paper);
  font-family: "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 72px 28px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wordmark { height: 44px; width: auto; }

h1 {
  margin: 44px 0 0;
  font-size: clamp(38px, 7vw, 58px);
  font-weight: 800;
  line-height: 1.12;
  max-width: 820px;
  text-wrap: pretty;
}

.sub {
  margin: 18px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.65);
  max-width: 620px;
  text-wrap: pretty;
}

.coming {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--night);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 16px;
  font-weight: 800;
  color: var(--paper);
  text-decoration: none;
}
.coming img { width: 16px; height: 16px; }
.coming span { color: var(--spark); }

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 26px 20px 34px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--paper-45);
}
footer a { color: var(--paper-60); text-decoration: none; }
footer a:hover { color: var(--paper); }

/* legal prose pages */
.prose {
  text-align: left;
  align-items: flex-start;
  max-width: 720px;
}
.prose .wordmark { height: 30px; }
.prose h1 { font-size: 34px; margin-top: 40px; }
.prose .dateline { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--paper-45); }
.prose h2 { font-size: 20px; font-weight: 800; margin: 34px 0 0; }
.prose p, .prose li {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(245, 241, 232, 0.78);
}
.prose p { margin: 12px 0 0; }
.prose ul { margin: 12px 0 0; padding-left: 22px; }
.prose a { color: var(--spark); text-decoration: none; }
.prose .backlink { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 800; }