:root {
  color-scheme: light;
  --page-bg: #f5ecd8;
  --paper: rgba(255, 252, 247, 0.84);
  --paper-strong: #fffcf7;
  --ink: #201a14;
  --muted: #5a5044;
  --line: rgba(32, 26, 20, 0.12);
  --brand: #0f766e;
  --brand-soft: rgba(15, 118, 110, 0.12);
  --shadow: 0 24px 80px rgba(32, 26, 20, 0.12);
  --content-width: min(1120px, calc(100vw - 32px));
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  background:
    radial-gradient(circle at top, rgba(255, 244, 205, 0.72), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(239, 211, 146, 0.4), transparent 22%),
    linear-gradient(180deg, #f8f0dd 0%, #efe1bc 42%, #e5d2a7 100%);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

main {
  width: var(--content-width);
  margin: 0 auto;
  padding: 24px 0 56px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}

.glass-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 28px; box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

@media (max-width: 720px) {
  :root { --content-width: min(100vw - 20px, 1120px); }
  main { padding-top: 20px; padding-bottom: 40px; }
}