/* Temporary maintenance page: same colours and fonts as the new website. */
@font-face { font-family: "IBM Plex Sans Thai Looped"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-thai-looped-400-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai Looped"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-thai-looped-400-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: "IBM Plex Sans Thai Looped"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-thai-looped-600-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai Looped"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-thai-looped-600-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: "Trirong"; font-weight: 700; font-display: swap; src: url("fonts/trirong-700-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Trirong"; font-weight: 700; font-display: swap; src: url("fonts/trirong-700-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; }

:root { --ngoen: #16308f; --luek: #0a1648; --sai: #a9d2f6; --fong: #d9ebfb; --mok: #f2f8fe; --kwao: #ff8a3d; --ink: #141d45; --hin: #56608a; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative; min-height: 100vh; margin: 0; padding: clamp(20px, 6vw, 72px) 16px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  overflow-x: hidden; background: var(--mok); color: var(--ink);
  font: 400 1.0625rem/1.75 "IBM Plex Sans Thai Looped", "Noto Sans Thai Looped", system-ui, sans-serif;
}
.river { position: fixed; inset: 0 0 0 auto; width: min(60vw, 640px); height: 100%; pointer-events: none; }
.card {
  position: relative; width: min(100%, 620px); padding: clamp(24px, 5vw, 44px);
  background: #fff; border-radius: 22px; box-shadow: 0 24px 60px -30px rgb(10 22 72 / .45);
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.mark { flex: none; display: block; width: 64px; height: 64px; }
.brand b { display: block; font: 700 1.2rem/1.35 "Trirong", Georgia, serif; color: var(--ngoen); }
.brand small { display: block; font-size: .86rem; line-height: 1.4; color: var(--hin); }
h1 { margin: 0; font: 700 clamp(2rem, 6vw, 2.9rem)/1.3 "Trirong", Georgia, serif; color: var(--ngoen); }
.lead { margin: 10px 0 22px; color: var(--ink); }
.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.contact li { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #e3ebf6; }
.contact span { font-weight: 600; color: var(--hin); }
.contact a { color: var(--ngoen); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact a:focus-visible { outline: 3px solid var(--kwao); outline-offset: 2px; border-radius: 4px; }
.notice { margin-top: 24px; padding: 14px 18px; border-radius: 14px; background: #fff4ec; color: #6b3104; }
.notice h2 { margin: 0 0 4px; font: 600 1rem/1.5 "IBM Plex Sans Thai Looped", system-ui, sans-serif; color: #6b3104; }
.notice p { margin: 0; font-size: .97rem; line-height: 1.7; }
footer { position: relative; font-size: .88rem; color: var(--hin); }
@media (max-width: 480px) {
  .contact li { grid-template-columns: 1fr; gap: 0; }
  .river { width: 90vw; opacity: .55; }
}