:root {
    color-scheme: light;
    --paper: #f7f4ec;
    --paper-deep: #ece6d8;
    --ink: #1c1a16;
    --muted: #716a5f;
    --line: #d8cebd;
    --cinnabar: #a43b38;
    --white: #fffdf8;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: radial-gradient(circle at 50% 0%, var(--white), var(--paper) 42%, var(--paper-deep));
    font-family: -apple-system, BlinkMacSystemFont, "Songti SC", "STSong", "Noto Serif SC", serif;
    line-height: 1.75;
}

main {
    width: min(860px, calc(100% - 40px));
    margin: 0 auto;
    padding: 56px 0 72px;
}

.seal {
    display: inline-block;
    color: var(--cinnabar);
    border: 2px solid color-mix(in srgb, var(--cinnabar), transparent 15%);
    padding: 8px 12px;
    line-height: 1.1;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 22px;
    background: rgba(255, 253, 248, 0.45);
}

header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

h1 {
    margin: 0 0 8px;
    font-size: clamp(34px, 8vw, 56px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
}

.lead {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

section {
    padding: 34px 0 0;
}

h2 {
    margin: 0 0 14px;
    font-size: 25px;
    line-height: 1.35;
}

p,
li {
    font-size: 17px;
}

p {
    margin: 0 0 14px;
}

ul {
    margin: 0 0 14px 1.25em;
    padding: 0;
}

a {
    color: var(--cinnabar);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.panel {
    margin-top: 22px;
    padding: 22px;
    background: rgba(255, 253, 248, 0.62);
    border: 1px solid var(--line);
}

.nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid var(--cinnabar);
    color: var(--cinnabar);
    text-decoration: none;
}

footer {
    padding-top: 44px;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 640px) {
    main {
        width: min(100% - 28px, 860px);
        padding-top: 34px;
    }

    header {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .seal {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        width: max-content;
    }
}