:root {
  --bg: #1e1b24; --text: #efe7da; --muted: #b5aa9b; --accent: #e8b27a; --accent-2: #b85d43;
  --card: rgba(255,255,255,.04); --line: rgba(255,255,255,.13);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.7 'Inter', system-ui, sans-serif; }
a { color: var(--accent); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 760px; margin: 0 auto; padding: 18px 16px; }
.brand { font: 600 1.15rem 'Playfair Display', Georgia, serif; color: var(--text); text-decoration: none; }
.top nav { display: flex; gap: 16px; font-size: .9rem; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { color: var(--text); }
main { max-width: 760px; margin: 0 auto; padding: 8px 16px 64px; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: .4em 0 .3em; }
h2 { font-size: 1.45rem; margin-top: 2.2em; }
h3 { font-size: 1.12rem; margin: 1.6em 0 .3em; }
.lead { font-size: 1.12rem; color: var(--muted); }
.example { margin: 1em 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 10px 10px 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; line-height: 1.55; }
.cta { display: inline-block; margin: 8px 0; padding: 12px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #1e1b24; font-weight: 600; text-decoration: none; }
.box { margin: 2.2em 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.box p { margin: .3em 0 .8em; }
ol, ul { padding-left: 1.3em; }
li { margin: .35em 0; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: .6em 0 0; color: var(--text); }
footer.foot { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer.foot a { color: var(--muted); }
@media (max-width: 520px) { .top { flex-direction: column; align-items: flex-start; } body { font-size: 16px; } }