/* Shared styles for thonchey.com */

:root {
    --paper: #f3ecdf;
    --ink: #1f1b16;
    --muted: #6e6457;
    --rule: #d8cdb9;
    --accent: #a3271f;
    --on-ink: #f3ecdf;
    --display: 'Koulen', sans-serif;
    --body: 'Kantumruy Pro', system-ui, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #171410;
        --ink: #ece3d2;
        --muted: #a39887;
        --rule: #39322a;
        --accent: #d65a4c;
        --on-ink: #171410;
    }
}
:root[data-theme="dark"] {
    --paper: #171410;
    --ink: #ece3d2;
    --muted: #a39887;
    --rule: #39322a;
    --accent: #d65a4c;
    --on-ink: #171410;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
html[lang="km"] body { line-height: 1.9; }
a { color: inherit; }
ul { list-style: none; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* Header */
header { padding: 28px 0; }
header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.mark { font-family: var(--display); font-size: 26px; letter-spacing: .04em; text-decoration: none; line-height: 1; }
.mark small { font-size: 15px; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
nav { display: flex; align-items: baseline; gap: 24px; font-size: 15px; }
nav a { text-decoration: none; color: var(--muted); }
nav a:hover { color: var(--ink); }
.lang { display: flex; gap: 2px; font-size: 14px; }
.lang button {
    font: inherit; background: none; border: 0; cursor: pointer;
    color: var(--muted); padding: 2px 6px;
}
.lang button[aria-pressed="true"] { color: var(--accent); font-weight: 600; }

/* Hero */
.hero { padding-top: 96px; padding-bottom: 72px; }
.hero h1 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(44px, 8vw, 84px); line-height: 1.05; letter-spacing: .01em;
    max-width: 12ch;
}
html[lang="km"] .hero h1 { line-height: 1.35; max-width: 14ch; }
.hero p { margin-top: 24px; max-width: 34em; color: var(--muted); font-size: 19px; }
.hero a.more { display: inline-block; margin-top: 36px; font-weight: 500; text-underline-offset: 6px; }

/* Divider: one Khmer-inspired kbach strip */
.kbach {
    height: 16px; opacity: .85;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M16 1.5c2.6 3.4 3.6 6.4 0 10.5c-3.6-4.1-2.6-7.1 0-10.5z'/%3E%3Cpath d='M0 15Q8 5 16 15Q24 5 32 15' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x left center / 32px 16px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M16 1.5c2.6 3.4 3.6 6.4 0 10.5c-3.6-4.1-2.6-7.1 0-10.5z'/%3E%3Cpath d='M0 15Q8 5 16 15Q24 5 32 15' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x left center / 32px 16px;
}

/* Sections */
section { padding: 72px 0; }
.eyebrow {
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
}
html[lang="km"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }
h2 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.2; }

/* Two groups: business, games */
.group + .group { padding-top: 0; }
.group + .group .group-grid { border-top: 1px solid var(--rule); padding-top: 72px; }
.group-grid { display: grid; grid-template-columns: 120px 1fr; gap: 24px; }
.num {
    font-family: var(--display); font-size: 56px; line-height: 1; color: var(--accent);
    position: sticky; top: 32px; align-self: start;
}
.product { padding: 40px 0; }
.product:first-of-type { padding-top: 32px; }
.product + .product { border-top: 1px solid var(--rule); }
.product h3 { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.1; }
.product .pitch { margin-top: 12px; font-size: 19px; max-width: 30em; }
.product ul { margin-top: 16px; color: var(--muted); }
.product li { padding-left: 20px; position: relative; }
.product li::before { content: "—"; position: absolute; left: 0; color: var(--rule); }

.actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.btn {
    display: inline-block; padding: 10px 20px; text-decoration: none; font-weight: 500;
    background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.link { font-weight: 500; text-underline-offset: 5px; }
.link:hover { color: var(--accent); }
.soon { color: var(--muted); font-size: 15px; border: 1px dashed var(--rule); padding: 9px 16px; }

.ip {
    margin-top: 20px; display: inline-flex; align-items: center;
    border: 1px solid var(--rule); font-family: var(--mono); font-size: 15px;
}
.ip code { padding: 8px 14px; }
.copy {
    font: 500 14px var(--body); cursor: pointer;
    background: none; color: var(--ink); border: 0; border-left: 1px solid var(--rule);
    padding: 8px 14px; min-width: 84px;
}
.copy:hover { color: var(--accent); }
.ip-note { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

/* About */
.about p:not(.eyebrow) { margin-top: 20px; max-width: 36em; font-size: 20px; }

/* Contact */
.contact > p { margin-top: 12px; color: var(--muted); }
.contact dl { margin-top: 32px; display: grid; grid-template-columns: 160px 1fr; gap: 14px 24px; }
.contact dt { color: var(--muted); }
.contact dd a { text-underline-offset: 4px; margin-right: 18px; }
.contact dd a:hover { color: var(--accent); }

footer { padding: 40px 0 56px; font-size: 14px; color: var(--muted); }
footer .wrap {
    display: flex; justify-content: space-between; gap: 16px; padding-top: 24px;
    background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 48px) 1px no-repeat;
}
footer a { text-underline-offset: 4px; }

/* Game page */
.back { text-decoration: none; color: var(--muted); }
.back:hover { color: var(--ink); }
.hero .eyebrow { margin-top: 0; font-size: 13px; }
.hero .actions { margin-top: 36px; }
.hero .note { margin-top: 16px; font-size: 15px; }
.features { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.features div { border-top: 1px solid var(--rule); padding-top: 20px; }
.features h3 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.2; }
.features p { margin-top: 8px; color: var(--muted); }
.shots { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.shots img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px; }
.privacy-note { margin-top: 12px; color: var(--muted); }
.privacy-note a { text-underline-offset: 4px; }
.privacy-note a:hover { color: var(--accent); }

/* Legal pages: both languages are in the markup, the switch shows one */
html[lang="km"] .lang-en,
html:not([lang="km"]) .lang-km { display: none; }
.legal { padding-top: 72px; padding-bottom: 96px; }
.legal article { max-width: 40em; }
.legal h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 56px); line-height: 1.15; }
.legal h2 { font-size: 24px; margin-top: 40px; }
.legal p { margin-top: 16px; }
.legal p.eyebrow { margin-top: 0; }
.legal strong { font-weight: 600; }
.legal a { text-underline-offset: 4px; }
.legal a:hover { color: var(--accent); }

@media (max-width: 640px) {
    body { font-size: 16px; }
    header .wrap { flex-wrap: wrap; }
    nav { gap: 16px; width: 100%; justify-content: space-between; }
    .hero { padding-top: 56px; padding-bottom: 48px; }
    section { padding: 56px 0; }
    .group-grid { grid-template-columns: 1fr; gap: 8px; }
    .num { font-size: 40px; position: static; }
    .product { padding: 32px 0; }
    .group + .group .group-grid { padding-top: 56px; }
    .product h3 { font-size: 34px; }
    .contact dl { grid-template-columns: 1fr; gap: 2px; }
    .contact dd { margin-bottom: 14px; }
    footer .wrap { flex-direction: column; }
    .features { grid-template-columns: 1fr; gap: 24px; }
    .legal { padding-top: 48px; padding-bottom: 64px; }
    .shots {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%;
        overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
    }
    .shots img { scroll-snap-align: start; }
}