html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
:root {
  --bg-deep: #111417;
  --bg-elevated: #202429;
  --brand-red: #e42a31;
  --brand-cream: #f4f0e8;
  --brand-gold: #f7ca72;
  --ink: #25272a;
  --muted: #66696b;
  --font-display: "Space Grotesk", "IBM Plex Sans Thai", sans-serif;
  --font-body: "IBM Plex Sans Thai", sans-serif;
  font-family: var(--font-body);
  font-synthesis: none;
  color: var(--brand-cream);
  background: var(--bg-deep);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; min-height: 100vh; background: var(--bg-deep); color: var(--brand-cream); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 5px; }
[hidden] { display: none !important; }

.site-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px max(28px, calc((100vw - 1320px) / 2));
  background: var(--brand-cream);
  color: #1b1d20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: #fff; }
.brand-mark img { width: 45px; height: 45px; object-fit: contain; }
.brand-name { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-name strong { font: 700 19px var(--font-display); letter-spacing: -.045em; }
.brand-name small { font: 700 9px var(--font-display); letter-spacing: .23em; }
.back-link { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.back-link:hover { color: #bd252b; }
.eyebrow { display: flex; align-items: center; gap: 9px; font: 600 11px/1.7 var(--font-body); margin: 0 0 15px; }
.eyebrow > span { width: 8px; height: 8px; background: var(--brand-red); transform: rotate(45deg); }
.page-footer { max-width: 1250px; padding: 25px 28px; margin: auto; display: flex; justify-content: space-between; gap: 16px; color: #969b9d; font-size: 11px; }
.page-footer a:hover { color: var(--brand-cream); }
.page-footer > span { font: 600 10px var(--font-display); letter-spacing: .12em; }

@media (max-width: 760px) {
  .site-header { padding: 16px 22px; min-height: 72px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-mark img { width: 38px; height: 38px; }
  .brand-name strong { font-size: 16px; }
  .brand-name small { font-size: 8px; }
  .back-link { font-size: 11px; }
  .page-footer { padding: 24px 22px; flex-direction: column; align-items: center; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }