:root {
  --bg: #f7f3f1;
  --ink: #2a1618;
  --muted: #6d534e;
  --card: #fffdfb;
  --line: #eadfd8;
  --wine: #4a1524;
  --gold: #c4844a;
  --link: #8a3a32;
  --max: 1040px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans Khmer", "Leelawadee UI", "Khmer UI", "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.85;
}
a { color: var(--link); }
img { max-width: 100%; height: auto; display: block; }
.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  background: #fff;
  color: #111;
  padding: 6px 10px;
}
.skip:focus { top: 10px; }
.top {
  background: var(--wine);
  color: #fff6f4;
  border-bottom: 5px solid var(--gold);
}
.top a { color: #fff6f4; text-decoration: none; }
.top-in, .wrap {
  width: min(var(--max), calc(100% - 28px));
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 4px;
}
.brand b {
  font-size: 28px;
  letter-spacing: 0.08em;
  background: var(--gold);
  color: var(--wine);
  padding: 0 8px 2px;
}
.brand span { color: #f0d4c8; font-size: 14px; }
.nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
}
.nav a {
  flex: 0 0 auto;
  border: 1px solid rgba(196, 132, 74, 0.65);
  border-radius: 999px;
  padding: 4px 12px;
}
.nav a:hover { background: var(--gold); color: var(--wine); }
.kicker { color: var(--link); font-size: 14px; margin: 22px 0 6px; }
h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.3; margin: 0 0 10px; }
.lede { color: var(--muted); margin-top: 0; }
figure { margin: 16px 0; }
figcaption { color: var(--muted); font-size: 15px; margin-top: 6px; }
.hero-figure img, .shot img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #f3e8e4;
}
.shot { display: grid; gap: 14px; }
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 18px 18px;
  margin: 16px 0;
}
h2 { font-size: 26px; margin: 22px 0 8px; }
h3 { font-size: 18px; color: var(--link); margin: 18px 0 8px; }
.words {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.words li {
  background: #f8efe9;
  border-radius: 12px;
  padding: 8px 10px;
}
.words b { color: var(--wine); }
details { border-top: 1px solid var(--line); padding: 8px 0; }
summary { cursor: pointer; font-weight: 700; }
footer { color: var(--muted); padding: 8px 0 32px; font-size: 14px; }
@media (min-width: 800px) {
  .words { grid-template-columns: 1fr 1fr; }
  .shot { grid-template-columns: 1fr 1fr; align-items: center; }
  .shot.solo { grid-template-columns: 1fr; }
}
@media (max-width: 389px) {
  .brand { align-items: flex-start; flex-direction: column; }
}