@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/playfair-display-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/playfair-display-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}

:root {
  --glow-mid: #f9ddca;
  --color-text: #4a2536;
  --color-text-muted: #765b64;
  --color-accent-text: #904a62;
  --glass-bg: rgba(255, 250, 246, 0.72);
  --glass-border: rgba(255, 255, 255, 0.7);
  --shadow-soft: 0 12px 40px rgba(207, 130, 149, 0.18);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --bg: radial-gradient(ellipse 110% 90% at 50% 0%, #fcf0c7 0%, #fbe8c3 22%, #f9dcc8 48%, #f7cbcf 72%, #f3bfcf 100%);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--glow-mid) var(--bg) fixed no-repeat;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}
body { padding: 32px 20px 64px; }
main {
  max-width: 40rem;
  margin: 0 auto;
}
a { color: var(--color-accent-text); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 3px; }
.cta {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.note { color: var(--color-text-muted); font-size: 0.95rem; }
.brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-text);
  text-decoration: none;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: baseline;
  margin-bottom: 28px;
}
nav a { font-size: 0.92rem; }
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
h1 em { font-style: italic; }
.updated { color: var(--color-text-muted); margin: 0 0 28px; }
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  margin: 2rem 0 0.4rem;
}
p, li { margin: 0.55rem 0; }
ul { padding-left: 1.2rem; }
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  margin: 20px 0;
}
footer {
  margin-top: 40px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}