/* Reset + brand tokens + bilingual toggle. */

:root {
	--color-ink: #17153a;
	--color-bg: #f0eefc;
	--color-primary: #3515bb;
	--color-secondary: #6b6f8a;
	--color-nav-active: #1cb0c0;
	--color-teal: #6fb3ac;
	--color-coral: #c96a56;
	--color-yellow: #eecd5a;
	/* EN: Pretendard, KO: Noto Sans KR — browser falls back per-character, so no per-language font switch is needed. */
	--font-sans: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--gutter: 2.5rem;
	--section-gap: 4rem;

	/*
	 * Fluid grid tracks (see grid.css): the left margin and right nav
	 * columns shrink MUCH faster than the 3 content columns as the
	 * viewport narrows — margin reaches 0 by ~700px viewport width, nav
	 * holds a usable floor width until it flips to a hamburger at 820px
	 * (see the media query in grid.css), well above phone width.
	 */
	--margin-col: clamp(0px, calc((100vw - 700px) * 220 / 900), 220px);
	--nav-col: clamp(200px, calc(200px + (100vw - 820px) * 40 / 780), 240px);

	/*
	 * The grid's own column-gap has to shrink to 0 alongside margin-col
	 * (same 700px convergence point) — otherwise even a 0px margin-col
	 * still leaves a full gutter's worth of dead gap next to it, and
	 * content never actually reaches the edge on a phone.
	 */
	--grid-gap: clamp(0px, calc((100vw - 700px) * 40 / 900), 2.5rem);

	/*
	 * Extra inset applied inside the content columns (on top of
	 * margin-col/nav-col) so the actual reading measure is ~4/5 of the
	 * full content width on wide screens. Fluid like the others: also
	 * converges to 0 by 700px so content still goes edge-to-edge at
	 * phone width, consistent with margin-col.
	 */
	--content-inset: clamp(0px, calc((100vw - 700px) * 100 / 900), 100px);

	/*
	 * Eighteen hand-drawn brush-stroke underlines: 6 shapes x the 3
	 * brand accent colors. Shape is picked per-link at random (see
	 * seungholee_random_underline_style() in inc/bilingual.php); color
	 * is picked once per page load and shared by every stroke on the
	 * page (see seungholee_stroke_color_style() in inc/setup.php).
	 * Color has to be baked into each SVG (not applied separately via a
	 * CSS variable/mask) because these are used as a plain
	 * background-image with box-decoration-break:clone — the only
	 * technique that correctly re-draws the stroke under EVERY wrapped
	 * line of a link's text, not just the first or last fragment.
	 * (An earlier version drew this via mask-image on a ::after
	 * pseudo-element instead, specifically to allow recoloring via a
	 * single shared --stroke-color variable — but a ::after only
	 * generates one box for the whole element, so on a link that wraps
	 * across 2+ lines the stroke could only ever appear under one of
	 * the wrapped fragments. Plain background-image + box-decoration-break
	 * doesn't have that limitation, at the cost of needing shape x color
	 * baked in ahead of time instead of composed live.)
	 * Each is stretched edge-to-edge with preserveAspectRatio="none" so
	 * one fixed-proportion stroke shape still fills whatever width a
	 * given line of text happens to need.
	 */
	--underline-v1-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C20 4 60 3 100 5 C160 7 220 4 270 6 C285 6 296 7 298 9 C296 12 270 13 220 12 C160 13 100 12 60 13 C30 13 6 12 2 9 Z' fill='%231cb0c0'/%3E%3C/svg%3E");
	--underline-v1-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C20 4 60 3 100 5 C160 7 220 4 270 6 C285 6 296 7 298 9 C296 12 270 13 220 12 C160 13 100 12 60 13 C30 13 6 12 2 9 Z' fill='%23e76b5e'/%3E%3C/svg%3E");
	--underline-v1-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C20 4 60 3 100 5 C160 7 220 4 270 6 C285 6 296 7 298 9 C296 12 270 13 220 12 C160 13 100 12 60 13 C30 13 6 12 2 9 Z' fill='%23292735'/%3E%3C/svg%3E");
	--underline-v2-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 L15 6 L35 9 L55 5 L80 8 L110 5 L140 7 L170 5 L200 7 L230 5 L255 7 L275 6 L292 8 L298 10 L298 13 L270 14 L230 13 L190 14 L150 13 L110 14 L70 13 L35 14 L10 13 Z' fill='%231cb0c0'/%3E%3C/svg%3E");
	--underline-v2-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 L15 6 L35 9 L55 5 L80 8 L110 5 L140 7 L170 5 L200 7 L230 5 L255 7 L275 6 L292 8 L298 10 L298 13 L270 14 L230 13 L190 14 L150 13 L110 14 L70 13 L35 14 L10 13 Z' fill='%23e76b5e'/%3E%3C/svg%3E");
	--underline-v2-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 L15 6 L35 9 L55 5 L80 8 L110 5 L140 7 L170 5 L200 7 L230 5 L255 7 L275 6 L292 8 L298 10 L298 13 L270 14 L230 13 L190 14 L150 13 L110 14 L70 13 L35 14 L10 13 Z' fill='%23292735'/%3E%3C/svg%3E");
	--underline-v3-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 12 Q60 4 150 8 T296 6 Q297 8 292 9 Q200 12 100 13 Q40 14 2 13 Z' fill='%231cb0c0'/%3E%3C/svg%3E");
	--underline-v3-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 12 Q60 4 150 8 T296 6 Q297 8 292 9 Q200 12 100 13 Q40 14 2 13 Z' fill='%23e76b5e'/%3E%3C/svg%3E");
	--underline-v3-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 12 Q60 4 150 8 T296 6 Q297 8 292 9 Q200 12 100 13 Q40 14 2 13 Z' fill='%23292735'/%3E%3C/svg%3E");
	--underline-v4-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10 L50 7 L100 9 L150 6 L190 8 L215 7 L230 9 L240 6 L248 9 L254 5 L259 8 L263 6 L267 9 L270 7 L273 10 L276 8 L279 11 L200 13 L120 12 L60 13 L2 13 Z' fill='%231cb0c0'/%3E%3C/svg%3E");
	--underline-v4-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10 L50 7 L100 9 L150 6 L190 8 L215 7 L230 9 L240 6 L248 9 L254 5 L259 8 L263 6 L267 9 L270 7 L273 10 L276 8 L279 11 L200 13 L120 12 L60 13 L2 13 Z' fill='%23e76b5e'/%3E%3C/svg%3E");
	--underline-v4-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10 L50 7 L100 9 L150 6 L190 8 L215 7 L230 9 L240 6 L248 9 L254 5 L259 8 L263 6 L267 9 L270 7 L273 10 L276 8 L279 11 L200 13 L120 12 L60 13 L2 13 Z' fill='%23292735'/%3E%3C/svg%3E");
	--underline-v5-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9 L10 12 L18 8 L26 11 L34 7 L42 10 L52 6 L62 9 L74 6 L86 9 L100 5 L114 9 L130 6 L146 9 L164 6 L182 9 L202 6 L222 9 L242 7 L260 9 L276 8 L290 9 L298 10 L296 13 L280 12 L260 13 L240 12 L220 13 L200 12 L180 13 L160 12 L140 13 L120 12 L100 13 L82 12 L66 13 L50 12 L36 13 L24 12 L14 13 L4 12 Z' fill='%231cb0c0'/%3E%3C/svg%3E");
	--underline-v5-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9 L10 12 L18 8 L26 11 L34 7 L42 10 L52 6 L62 9 L74 6 L86 9 L100 5 L114 9 L130 6 L146 9 L164 6 L182 9 L202 6 L222 9 L242 7 L260 9 L276 8 L290 9 L298 10 L296 13 L280 12 L260 13 L240 12 L220 13 L200 12 L180 13 L160 12 L140 13 L120 12 L100 13 L82 12 L66 13 L50 12 L36 13 L24 12 L14 13 L4 12 Z' fill='%23e76b5e'/%3E%3C/svg%3E");
	--underline-v5-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9 L10 12 L18 8 L26 11 L34 7 L42 10 L52 6 L62 9 L74 6 L86 9 L100 5 L114 9 L130 6 L146 9 L164 6 L182 9 L202 6 L222 9 L242 7 L260 9 L276 8 L290 9 L298 10 L296 13 L280 12 L260 13 L240 12 L220 13 L200 12 L180 13 L160 12 L140 13 L120 12 L100 13 L82 12 L66 13 L50 12 L36 13 L24 12 L14 13 L4 12 Z' fill='%23292735'/%3E%3C/svg%3E");
	--underline-v6-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q4 12 8 13 Q60 15 140 14 Q220 13 270 11 Q285 10 292 8 L294 6 Q290 4 270 5 Q200 6 120 6 Q60 6 20 7 Q8 7 2 8 Z' fill='%231cb0c0'/%3E%3C/svg%3E");
	--underline-v6-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q4 12 8 13 Q60 15 140 14 Q220 13 270 11 Q285 10 292 8 L294 6 Q290 4 270 5 Q200 6 120 6 Q60 6 20 7 Q8 7 2 8 Z' fill='%23e76b5e'/%3E%3C/svg%3E");
	--underline-v6-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q4 12 8 13 Q60 15 140 14 Q220 13 270 11 Q285 10 292 8 L294 6 Q290 4 270 5 Q200 6 120 6 Q60 6 20 7 Q8 7 2 8 Z' fill='%23292735'/%3E%3C/svg%3E");
}

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

html, body {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-sans);
	/*
	 * Fluid type: 1.5x today's size (24px) on wide screens, scaling down
	 * continuously to phone size and staying there below it. The phone
	 * floor is 18.4px (16px + 15%), not plain 16px — same slope/ceiling
	 * as before, just starting 15% higher at the narrow end. rem-based
	 * spacing (--gutter etc.) is unaffected since rem always tracks the
	 * (unscaled) html root font-size, not body's.
	 */
	font-size: clamp(18.4px, calc(18.4px + (100vw - 430px) * 8 / 1170), 1.5rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

h1, h2, h3, h4 {
	line-height: 1.2;
	margin: 0 0 0.6em;
}

p {
	margin: 0 0 1em;
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.empty-state {
	color: #888;
	font-style: italic;
}

/* Bilingual toggle: both languages render server-side; only one shows. */
[data-lang-content] {
	display: none;
}
html[data-lang="en"] [data-lang-content="en"] {
	display: inline;
}
html[data-lang="ko"] [data-lang-content="ko"] {
	display: inline;
}
html[data-lang="en"] [data-lang-content="en"].lang-block,
html[data-lang="ko"] [data-lang-content="ko"].lang-block {
	display: block;
}

/* Korean has no real italic letterforms — Noto Sans KR has no italic
   face, so a browser asked for one just synthetically skews the
   upright glyphs, which reads as broken rather than stylistic. This
   overrides italic wherever it's set on an ancestor (e.g. .prose,
   .gallery-single__title), for the Korean half of the bilingual pair
   only; the English half keeps whatever italic that context uses. */
[data-lang-content="ko"] {
	font-style: normal;
}

.lang-switch button {
	font-weight: 600;
	opacity: 0.4;
}
html[data-lang="en"] .lang-switch button[data-lang-switch="en"],
html[data-lang="ko"] .lang-switch button[data-lang-switch="ko"] {
	opacity: 1;
}