/* ── Design tokens ─────────────────────────────────────── */
:root {
    --bg:         #F5EFE3;
    --bg-deep:    #EDE4D3;
    --surface:    #FAF6EE;
    --surface-w:  #EFE7D8;
    --hairline:   #DACFBD;
    --ink:        #3D2F22;
    --ink2:       #5E4D3D;
    --ink-soft:   #8C7A68;
    --ink-faint:  #B8A898;
    --terracotta: #C4724A;

    /* Module accents */
    --sage:       #7FA87A;
    --clay:       #C49B6A;
    --sky:        #7EB0C8;
    --violet:     #6B6A9E;
    --rose:       #C47A8A;
    --golden:     #C4A455;
    --lavande:    #7A8FC4;
    --night-blue: #5A6099;

    --font-serif: 'Instrument Serif', serif;
    --font-sans:  'DM Sans', sans-serif;

    --radius-card: 22px;
    --radius-pill: 999px;
    --px-mobile:   24px;
    --px-desktop:  48px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
}

a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--px-mobile);
}

.container--narrow {
    max-width: 680px;
}

@media (min-width: 640px) {
    .container { padding: 0 var(--px-desktop); }
}

section { padding: 64px 0; }
section:nth-child(even) { background: var(--bg-deep); }

/* ── Typography ─────────────────────────────────────────── */
.eyebrow {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 12px;
}

h1, h2, h3 { font-family: var(--font-serif); color: var(--ink); }
h1 em, h2 em { font-style: italic; }

.hero-title {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.section-title {
    font-size: 24px;
    margin-bottom: 8px;
}

.author-name {
    font-size: 30px;
    margin-bottom: 16px;
}

.meta {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 32px;
}

@media (min-width: 640px) {
    .hero-title { font-size: 38px; }
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 16px 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    color: var(--ink);
    text-decoration: none;
}

.lang-switcher { display: flex; gap: 8px; }

.lang-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
}

.lang-link:hover { color: var(--ink); text-decoration: none; }
.lang-link--active { color: var(--terracotta); font-weight: 700; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { text-align: center; padding: 80px 0 72px; }

.hero-subtitle {
    font-size: 15px;
    color: var(--ink2);
    max-width: 540px;
    margin: 0 auto 36px;
}

.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.btn-primary {
    background: var(--terracotta);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary:hover { opacity: 0.9; text-decoration: none; }

.btn-secondary {
    background: transparent;
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline);
    cursor: pointer;
    text-decoration: none;
}

.btn-secondary:hover { background: var(--surface); text-decoration: none; }

.coming-soon {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 30px;
    color: var(--terracotta);
    margin-top: 8px;
}

/* ── Module grid ────────────────────────────────────────── */
.modules { background: var(--bg-deep); }

.module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (min-width: 640px) {
    .module-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.module-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.module-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* ── Author ─────────────────────────────────────────────── */
.author-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

@media (min-width: 640px) {
    .author-inner {
        flex-direction: row;
        align-items: flex-start;
    }
}

.author-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--hairline);
}

.author-text p { margin-bottom: 12px; color: var(--ink2); }

/* ── Highlights ─────────────────────────────────────────── */
.highlights { background: var(--bg-deep); }

.highlights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .highlights-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.highlight-item {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: 28px 22px;
    text-align: center;
}

.highlight-icon { font-size: 28px; margin-bottom: 12px; }
.highlight-item h3 { font-size: 18px; margin-bottom: 8px; }
.highlight-item p { font-size: 14px; color: var(--ink2); }

/* ── Prose (privacy, support) ───────────────────────────── */
.prose h1 {
    font-size: 30px;
    margin-bottom: 8px;
}

.prose h2 {
    font-size: 18px;
    margin-top: 36px;
    margin-bottom: 10px;
    color: var(--ink);
}

.prose p, .prose ul, .prose li {
    color: var(--ink2);
    margin-bottom: 12px;
}

.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose code {
    background: var(--surface-w);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 13px;
}

.support-email, .obfuscated-email {
    font-size: 20px;
    font-weight: 500;
    color: var(--terracotta);
}

/* ── Footer ─────────────────────────────────────────────── */
footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--hairline);
    padding: 32px var(--px-mobile);
    text-align: center;
    font-size: 13px;
    color: var(--ink-soft);
}

footer p { margin-bottom: 6px; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--terracotta); }