/* Chartage placeholder: the same paper, ink, and type as the app
   (src/Chartage.Web/wwwroot/css/app.css), for a single quiet page. */

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
    --paper: #f8f4ed;
    --ink: #2b2520;
    --ink-soft: #625a51;
    --rule: #e4ddd2;
    --rule-strong: #cfc5b6;
    --accent: #7b5a3a;
    --accent-hover: #6a4d31;
    --focus: #1d5e8c;

    --font-serif: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* A darkened room, not inverted colors. */
        --paper: #1a1816;
        --ink: #ece5da;
        --ink-soft: #b4ab9e;
        --rule: #36312c;
        --rule-strong: #4a443d;
        --accent: #d2b08a;
        --accent-hover: #e0c29f;
        --focus: #8cc4ec;
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
    padding: 4.5rem 1rem 2rem;
}

.masthead {
    text-align: center;
    margin-bottom: 2rem;
}

.masthead::after {
    content: "";
    display: block;
    width: 3rem;
    height: 1px;
    margin: 2rem auto 0;
    background: var(--rule-strong);
}

.wordmark {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2.6rem, 9vw, 3.6rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.subtitle {
    margin: 0.5rem 0 0;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.25rem;
    color: var(--ink-soft);
}

.lede {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.65;
    text-align: center;
    text-wrap: pretty;
}

.notice {
    margin: 0 0 3rem;
    text-align: center;
    color: var(--ink-soft);
}

section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}

h2, .quiet-heading {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.25;
    text-wrap: balance;
}

.quiet-heading { text-align: center; }

p, ul { margin: 0 0 1rem; }

ul { padding-left: 1.25rem; }

li { margin-bottom: 0.5rem; }

strong { font-weight: 600; }

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    overflow-wrap: anywhere;
}

a:hover { color: var(--accent-hover); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.footer {
    padding: 1rem 1rem 3rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.footer p { margin: 0; }

@media (min-width: 48rem) {
    .page { padding-top: 6rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .page { animation: fade-in 0.6s var(--ease) both; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}