:root {
    --bg: #f6f1e8;
    --ink: #1c1b19;
    --muted: #6e685f;
    --line: #ddd4c6;
    --accent: #b4532a;
    --serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Nanum Myeongjo", "Noto Serif CJK KR", "Source Han Serif K", serif;
    --sans: "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", "Malgun Gothic", sans-serif;
    --space: clamp(1.25rem, 3vw, 2.5rem);
}

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

html {
    font-size: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.12;
    margin: 0;
}

p {
    margin: 0;
}

.skip {
    position: absolute;
    left: var(--space);
    top: 0;
    transform: translateY(-120%);
    background: var(--ink);
    color: var(--bg);
    padding: 0.5rem 0.8rem;
}

.skip:focus {
    transform: none;
    z-index: 5;
}