/* Shared styles for Rosaria's static pages (about, guides, mysterys, bible).
   Self-contained: no webfonts, no scripts, so every page is readable without JS. */

:root { color-scheme: light dark; }

body {
    margin: 0 auto;
    max-width: 44rem;
    padding: 2.5rem 1.25rem 5rem;
    background: #f3f5f6;
    color: #1c1f22;
    font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .35rem; }
h2 { font-size: 1.15rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
p { margin: 0 0 1rem; }
.lede { color: #4a5157; font-size: 1.05rem; }
ul, ol { padding-left: 1.15rem; }
li { margin: .35rem 0; }
a { color: #7a4a2b; }

.site-nav {
    display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
    margin: 0 0 2rem; padding: 0 0 1rem;
    border-bottom: 1px solid #dfe3e6;
    font-size: .9rem;
}
.site-nav a { text-decoration: none; }
.site-nav .brand { font-weight: 700; color: #1c1f22; margin-right: auto; }

.cta {
    display: inline-block; margin: 1.4rem 0 .5rem; padding: .7rem 1.15rem;
    background: #1c1f22; color: #f3f5f6; border-radius: 999px;
    text-decoration: none; font-weight: 600;
}

table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #e2e6e9; vertical-align: top; }
th { font-weight: 600; }

details { margin: 0 0 .5rem; border-bottom: 1px solid #e2e6e9; }
summary { cursor: pointer; padding: .65rem 0; font-weight: 600; }
details p { margin: .25rem 0 1rem; }

.note { color: #62696f; font-size: .9rem; }
footer { margin-top: 3rem; color: #62696f; font-size: .9rem; }
.featured-on { margin-top: 1rem; }
.featured-on a {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .5rem .75rem; border: 1px solid currentColor; border-radius: 6px;
    text-decoration: none; color: inherit;
}
.featured-on__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0;
    background: #1c1f22; color: #f3f5f6;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.featured-on__text { display: flex; flex-direction: column; gap: 1px; }
.featured-on__label { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.featured-on__name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

@media (prefers-color-scheme: dark) {
    body { background: #16181a; color: #e8eaec; }
    .lede, .note, footer { color: #a2a9af; }
    a { color: #d8a87c; }
    .cta { background: #e8eaec; color: #16181a; }
    .site-nav { border-bottom-color: #2a2e31; }
    .site-nav .brand { color: #e8eaec; }
    th, td, details { border-bottom-color: #2a2e31; }
    .featured-on__mark { background: #e8eaec; color: #16181a; }
}