/* Self-hosted fonts (subset to the latin + khmer ranges this site actually uses — en/km only). Each is the variable-weight file, so one file per family/style covers every weight the CSS asks for. Source Sans 3 and Noto Sans Khmer are preloaded in since they're the default body font for the two supported languages; Pacifico/Metal are footer-only accents and load lazily. */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans Khmer"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/noto-sans-khmer-khmer.woff2") format("woff2"); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; } @font-face { font-family: "Pacifico"; font-style: normal; font-weight: 400; /* swap, not optional — these aren't preloaded, so `optional` misses its ~100ms window on a cold cache and the fallback sticks for the whole view */ font-display: swap; src: url("/fonts/pacifico-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Metal"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/metal-khmer.woff2") format("woff2"); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Design tokens ───────────────────────────────────────────────── Single source of truth for color, status, and radius. Pages should reference these vars rather than hardcoding hex values. */ :root { /* Brand / actions */ --primary: #cc8a6c; --primary-hover: #b06f52; --primary-rgb: 204, 138, 108; /* keep in sync with --primary, for tinted shadows/overlays */ /* Text */ --text: #111; --text-soft: #374151; --text-muted: #6b7280; /* Surfaces */ --surface: #fff; --bg: #f9f9f9; --bg-subtle: #f5f5f5; /* Borders */ --border: #e5e7eb; --border-strong: #d1d5db; --divider: #f0f0f0; /* Status */ --success-bg: #e6f4ea; --success-fg: #1e7e34; --error-bg: #fdecea; --error-fg: #c0392b; /* Radius */ --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --radius-pill: 999px; /* Footer — terracotta top into warm charcoal */ --footer-top: var(--primary); --footer-bottom: #333; /* Engraved footer text — matches the logo ink (#4a4a4a) */ --footer-ink: #4a4a4a; --footer-ink-rgb: 74, 74, 74; /* Signature / script accent — swap the first name to restyle */ --font-script: "Pacifico", cursive; --font-script-km: "Metal", cursive; /* Dropdown chevron — the native select arrow is replaced site-wide so its distance from the right edge is ours to control. Change it here and every dropdown follows. */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); --select-arrow-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); --select-arrow-inset: 0.75rem; /* gap between the chevron and the right edge */ } body { font-family: "Source Sans 3", "Noto Sans Khmer", "Optima", "Candara", sans-serif; font-size: 1rem; color: var(--text); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; } button { font-family: inherit; border: none; cursor: pointer; } /* ── Dropdowns ───────────────────────────────────────────────────── One look for every