/* Cross Word landing page (index.html only — legal pages keep style.css) */
:root {
    --wood: #6b3a1e;
    --wood-dark: #3f2210;
    --gold: #d4a017;
    --tile: #f9ec79;
    --parchment: #f4e5d2;
    --parchment-deep: #ead3b4;
    --ink: #2b1d12;
    --muted: #6b5544;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Lora', Georgia, serif;
    color: var(--ink);
    background: var(--parchment);
    line-height: 1.65;
}

h1, h2, h3 { font-family: 'Cinzel', Georgia, serif; line-height: 1.25; }

a { color: var(--wood); }
a:hover { color: var(--wood-dark); }

/* Hero */
.hero {
    background:
        linear-gradient(rgba(63, 34, 16, 0.35), rgba(63, 34, 16, 0.65)),
        url('img/hero-bg.jpg') center / cover no-repeat;
    color: #fff;
    text-align: center;
    padding: 56px 16px 64px;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.logo {
    width: min(420px, 85%);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    margin-bottom: 28px;
}
.hero h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 14px;
}
.lede {
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto 26px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.badge, .btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}
.badge { background: rgba(0, 0, 0, 0.55); color: var(--tile); border: 1px solid var(--tile); }
.btn { background: var(--tile); color: var(--wood-dark); }
.btn:hover { background: #fff6a8; color: var(--wood-dark); }

/* Nav */
.topnav {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--wood-dark);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 22px;
    padding: 12px 16px;
}
.topnav a {
    color: var(--parchment);
    text-decoration: none;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}
.topnav a:hover { color: var(--tile); }

main { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* Features */
.features { padding: 48px 0 8px; }
.feature {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 56px;
}
.feature.reverse { flex-direction: row-reverse; }
.feature img {
    width: 240px;
    flex-shrink: 0;
    border-radius: 22px;
    border: 6px solid var(--wood-dark);
    box-shadow: 0 12px 28px rgba(63, 34, 16, 0.35);
}
.feature h2 { font-size: 1.5rem; color: var(--wood); margin-bottom: 10px; }
.feature p { font-size: 1.08rem; }

.closing {
    text-align: center;
    background: var(--parchment-deep);
    border-top: 4px solid var(--gold);
    border-radius: 14px;
    padding: 32px 24px;
    margin: 8px 0 40px;
}
.closing h2 { color: var(--wood); margin-bottom: 10px; }

/* Support / Legal */
.panel {
    background: #fffaf2;
    border-radius: 14px;
    padding: 28px 28px 18px;
    margin-bottom: 28px;
    box-shadow: 0 2px 10px rgba(63, 34, 16, 0.08);
}
.panel h2 { color: var(--wood); border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 16px; }
.panel h3 { font-size: 1.05rem; color: var(--wood); margin: 20px 0 8px; }
.panel p { margin-bottom: 12px; }
.panel ul { margin: 0 0 12px 22px; }
.panel li { margin-bottom: 8px; }

footer {
    text-align: center;
    background: var(--wood-dark);
    color: var(--parchment);
    padding: 28px 16px;
    margin-top: 20px;
    font-size: 0.95rem;
}
footer a { color: var(--tile); }
footer p { margin: 4px 0; }

@media (max-width: 680px) {
    .feature, .feature.reverse { flex-direction: column; text-align: center; gap: 18px; }
    .feature img { width: 200px; }
    .panel { padding: 22px 18px 12px; }
}