/* NeoWords — the same Nadja palette the app uses (docs/design/cloud/NOTES.md). */
:root {
  --page: #F0EBDD;
  --surface: #FFFFEF;
  --ink: #2C3E50;
  --body: #5A6B7D;
  --muted: #8B9DB1;
  --warm: #A99B84;
  --rust: #C8602F;
  --amber: #F2A93B;
  --hair: rgba(42, 36, 32, .08);
  --hair-2: rgba(42, 36, 32, .12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #1C1814;
    --surface: #2A2420;
    --ink: #F0EBDD;
    --body: #C4B8A6;
    --muted: #8B8170;
    --warm: #8B8170;
    --rust: #E07A48;
    --hair: rgba(255, 255, 255, .07);
    --hair-2: rgba(255, 255, 255, .12);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 20px 72px;
  background: var(--page);
  color: var(--body);
  font: 400 17px/1.65 ui-rounded, "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 680px; margin: 0 auto; }

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 34px 0 26px;
}

header .mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #F2A93B, #C8602F);
  display: grid;
  place-items: center;
  color: #FFFFEF;
  font-weight: 800;
  font-size: 19px;
  flex: none;
}

header a.name {
  color: var(--ink);
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
}

nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-size: 15px;
  font-weight: 700;
}

nav a { color: var(--body); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--rust); }

h1 {
  color: var(--ink);
  font-size: clamp(30px, 6vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 6px;
}

h2 {
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  margin: 38px 0 10px;
}

h3 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  margin: 26px 0 6px;
}

.lede { font-size: 19px; color: var(--body); margin: 0 0 8px; }

.stamp { color: var(--warm); font-size: 14px; font-weight: 700; margin: 0 0 26px; }

a { color: var(--rust); }

ul { padding-left: 22px; }
li { margin: 7px 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 20px 22px;
  margin: 22px 0;
}

.card h2, .card h3 { margin-top: 0; }

.key {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}
.key:last-child { border-bottom: 0; padding-bottom: 0; }
.key dt { flex: 0 0 190px; color: var(--ink); font-weight: 800; font-size: 15px; }
.key dd { margin: 0; }

dl { margin: 0; }

.articles { display: flex; gap: 8px; margin: 18px 0 0; flex-wrap: wrap; }
.articles span {
  font-weight: 800;
  font-size: 15px;
  padding: 5px 15px;
  border-radius: 999px;
}
.der { color: #3C71C0; background: rgba(60, 113, 192, .12); }
.die { color: #A86B6B; background: rgba(168, 107, 107, .12); }
.das { color: #7BA882; background: rgba(123, 168, 130, .14); }

footer {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  color: var(--warm);
  font-size: 14px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
footer a { color: var(--warm); text-decoration: none; }
footer a:hover { color: var(--rust); }
footer .spacer { margin-left: auto; }