/*
 * Tier 1.5 "Quiet Editorial" — scoped to the .editorial wrapper.
 * Palette/fonts mirror the Tier 1 home redesign comp (public/design/home-v2.html),
 * namespaced here so nothing leaks into the rest of the app.
 * Spec: development_notes/homepage-redesign-spec.md §12
 */

/* .info-page caps content at 720px; widen the editorial card to match
   the nav bar's width (.nav-container / .container share max-width: 960px). */
.info-page.editorial {
    max-width: none;
    width: 100%;
}

.editorial {
    --editorial-paper: #f5efe4;
    --editorial-ink: #1f1a14;
    --editorial-ink-soft: #4a3f30;
    --editorial-muted: #8a7d68;
    --editorial-rule: #d8ccb4;
    --editorial-accent: #8b2e1a;
    --editorial-accent-deep: #6b1f10;
    --editorial-font-display: 'Fraunces', Georgia, serif;
    --editorial-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    position: relative;
    background: var(--editorial-paper);
    color: var(--editorial-ink);
    font-family: var(--editorial-font-display);
    font-variation-settings: 'opsz' 14, 'SOFT' 30;
    line-height: 1.65;
    padding: 2.5rem;
    border-radius: 2px;
}

.editorial::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.editorial > * {
    position: relative;
    z-index: 1;
}

.editorial h1 {
    font-size: 2.4rem;
    font-weight: 500;
    font-variation-settings: 'opsz' 60, 'SOFT' 40;
    letter-spacing: -0.01em;
    color: var(--editorial-ink);
    margin-bottom: 1rem;
}

.editorial .lead {
    font-family: var(--editorial-font-display);
    font-size: 1.2rem;
    color: var(--editorial-ink-soft);
    margin-bottom: 2rem;
}

.editorial h2 {
    font-family: var(--editorial-font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--editorial-muted);
    margin-top: 2.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--editorial-rule);
}

.editorial p {
    color: var(--editorial-ink-soft);
}

.editorial p + p {
    margin-top: 0.85rem;
}

.editorial ul {
    margin: 1rem 0 0 1.25rem;
    color: var(--editorial-ink-soft);
}

.editorial li + li {
    margin-top: 0.5rem;
}

.editorial strong {
    color: var(--editorial-ink);
}

.editorial a {
    color: var(--editorial-accent);
    text-decoration: underline;
    text-decoration-color: var(--editorial-rule);
    text-underline-offset: 2px;
}

.editorial a:hover {
    color: var(--editorial-accent-deep);
    text-decoration-color: currentColor;
}

@media (max-width: 600px) {
    .editorial {
        padding: 1.75rem 1.5rem;
    }

    .editorial h1 {
        font-size: 1.9rem;
    }
}