/* sg-landing-page — fallback styles for non-home pages
   Matches the homepage's design tokens. */

:root {
    --sg-green: #1A4D3A;
    --sg-green-2: #2d8659;
    --sg-cream: #F8F9F2;
    --sg-ink: #111111;
    --sg-muted: #5b6660;
    --sg-rule: #e6e8e0;
    --sg-orange: #ff6900;
    --sg-radius: 12px;
}

body.sg-fallback-body {
    background: var(--sg-cream);
    color: var(--sg-ink);
    font-family: 'Glacial Indifference', 'Inter', system-ui, sans-serif;
}

.sg-fallback {
    max-width: 1180px;
    margin: 0 auto;
    padding: 60px 24px 100px;
    font-family: 'Glacial Indifference', 'Inter', system-ui, sans-serif;
}

.sg-fallback-inner {
    background: #ffffff;
    border-radius: var(--sg-radius);
    padding: 48px 44px;
    box-shadow: 0 6px 32px rgba(26, 77, 58, 0.06);
}

/* ---- Headers ---- */
.sg-archive-header,
.sg-post-header {
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--sg-green);
}

.sg-archive-title,
.sg-post-title {
    font-family: 'Glacial Indifference', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    color: var(--sg-green);
    margin: 0;
    letter-spacing: -0.01em;
}

.sg-archive-title span {
    color: var(--sg-orange);
}

.sg-archive-description {
    margin-top: 12px;
    color: var(--sg-muted);
    font-size: 1.05rem;
}

.sg-post-meta,
.sg-archive-item-meta {
    color: var(--sg-muted);
    font-size: 0.85rem;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* ---- Post body ---- */
.sg-post-content {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--sg-ink);
}
.sg-post-content > * + * { margin-top: 1.1em; }
.sg-post-content h2 { font-size: 1.8rem; color: var(--sg-green); margin-top: 2em; font-weight: 700; }
.sg-post-content h3 { font-size: 1.4rem; color: var(--sg-green); margin-top: 1.6em; font-weight: 700; }
.sg-post-content h4 { font-size: 1.15rem; color: var(--sg-green); margin-top: 1.4em; font-weight: 700; }
.sg-post-content p { margin: 0 0 1.1em; }
.sg-post-content a { color: var(--sg-green-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sg-post-content a:hover { color: var(--sg-green); }
.sg-post-content ul, .sg-post-content ol { padding-left: 1.4em; }
.sg-post-content li + li { margin-top: 0.4em; }
.sg-post-content blockquote {
    border-left: 4px solid var(--sg-green);
    padding: 8px 0 8px 20px;
    margin: 1.6em 0;
    color: var(--sg-muted);
    font-style: italic;
}
.sg-post-content code { background: var(--sg-cream); padding: 0.15em 0.35em; border-radius: 4px; font-size: 0.92em; }
.sg-post-content pre { background: #0d1f17; color: #d6e4dc; padding: 20px; border-radius: 8px; overflow-x: auto; font-size: 0.92em; }
.sg-post-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.4em 0; }

/* ---- Archive list ---- */
.sg-archive-list {
    display: grid;
    gap: 32px;
}

.sg-archive-item {
    padding: 28px 0;
    border-bottom: 1px solid var(--sg-rule);
}
.sg-archive-item:last-child { border-bottom: none; }

.sg-archive-item-title {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 8px;
    font-weight: 700;
}
.sg-archive-item-title a {
    color: var(--sg-ink);
    text-decoration: none;
    transition: color 0.18s ease;
}
.sg-archive-item-title a:hover { color: var(--sg-green); }

.sg-archive-item-excerpt {
    margin-top: 14px;
    color: var(--sg-muted);
    font-size: 1rem;
    line-height: 1.65;
}
.sg-archive-item-excerpt p { margin: 0; }

/* ---- Pagination ---- */
.nav-links {
    display: flex;
    gap: 8px;
    margin-top: 48px;
    justify-content: center;
    font-family: 'Glacial Indifference', sans-serif;
}
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    background: #fff;
    color: var(--sg-green);
    border: 1px solid var(--sg-rule);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.18s ease;
}
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
    background: var(--sg-green);
    color: #fff;
    border-color: var(--sg-green);
}

/* ---- 404 page ---- */
.sg-fallback-404 .sg-fallback-inner {
    text-align: center;
    padding: 100px 40px;
}
.sg-fallback-404 h1 {
    font-size: clamp(5rem, 12vw, 9rem);
    line-height: 1;
    color: var(--sg-green);
    margin: 0 0 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.sg-fallback-404 p {
    color: var(--sg-muted);
    font-size: 1.15rem;
    margin: 12px 0;
}
.sg-fallback-404 a {
    display: inline-block;
    margin-top: 24px;
    padding: 14px 32px;
    background: var(--sg-green);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.18s ease;
}
.sg-fallback-404 a:hover { background: var(--sg-green-2); transform: translateY(-1px); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .sg-fallback { padding: 32px 16px 64px; }
    .sg-fallback-inner { padding: 28px 20px; }
    .sg-archive-item-title { font-size: 1.3rem; }
}