:root {
  color-scheme: light;
  --blue-950: #072a68;
  --blue-900: #083e91;
  --blue-700: #075ac2;
  --blue-100: #e9f6ff;
  --gold: #d8a536;
  --gold-light: #ffe5a0;
  --white: #fff;
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 280px; }
body {
  min-width: 280px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--blue-950);
  background: radial-gradient(circle at 50% 8%, #4fb7ee 0, #137bd0 32%, #064fae 66%, #063782 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 25%, #ffffff4a 0 2px, transparent 3px), radial-gradient(circle at 85% 16%, #ffffff73 0 2px, transparent 3px), radial-gradient(circle at 79% 70%, #ffffff52 0 3px, transparent 4px);
  background-size: 180px 190px, 220px 240px, 290px 250px;
  opacity: .55;
}
img { max-width: 100%; }
.background-art { display: none; position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.has-background-art .background-art { display: block; }
.page-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 990px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.hero { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 30px); width: 100%; margin: 16px 0 24px; color: #fff; text-align: left; }
.anniversary-badge { display: grid; place-items: center; flex: 0 0 auto; width: clamp(70px, 17vw, 110px); aspect-ratio: 1; border: 2px solid var(--gold-light); border-radius: 50%; background: linear-gradient(140deg, #ffffff33, #ffffff0a); box-shadow: 0 7px 25px #001b5b42, inset 0 0 0 5px #ffffff25; line-height: .85; }
.anniversary-badge strong { align-self: end; font: 800 clamp(33px, 8vw, 53px)/.85 Georgia, serif; }
.anniversary-badge span { align-self: start; margin-top: 5px; font-size: clamp(9px, 2.2vw, 12px); font-weight: 800; letter-spacing: .12em; }
.hero-copy { min-width: 0; }
.eyebrow { margin: 0 0 3px; color: var(--gold-light); font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; letter-spacing: .04em; }
.title-art { display: none; width: min(100%, 550px); max-height: 140px; object-fit: contain; object-position: left center; }
.has-title-art .title-art { display: block; }
.has-title-art .title-fallback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.title-fallback { margin: 0; font-size: clamp(23px, 5.5vw, 44px); line-height: 1.12; letter-spacing: -.025em; text-shadow: 0 3px 14px #00194e60; }
.title-fallback span { display: block; color: #fff5d5; font: 700 clamp(25px, 5.9vw, 49px)/1.08 Georgia, serif; }
.hero-subtitle { margin: 7px 0 0; font-size: clamp(11px, 2.8vw, 15px); font-weight: 600; }

.countdown-board { position: relative; width: min(100%, 790px); padding: clamp(18px, 4vw, 34px); border: 4px solid #e3b24d; border-radius: 28px; background: linear-gradient(145deg, #fff, #edf8ff 58%, #fff); box-shadow: 0 6px 0 #a57519, 0 22px 54px #001d6580, inset 0 0 0 3px #fff6d0; text-align: center; }
.countdown-board::before { content: "✦"; position: absolute; z-index: 1; top: -17px; left: 50%; transform: translateX(-50%); color: #b77f12; font-size: 23px; text-shadow: 0 1px #fff; }
.frame-art { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.has-frame-art .countdown-board { background: transparent; border-color: transparent; box-shadow: none; }
.has-frame-art .countdown-board::before { display: none; }
.has-frame-art .frame-art { display: block; }
.board-content { position: relative; z-index: 1; }
.board-kicker { margin: 0 0 2px; color: #9a7023; font-size: clamp(9px, 2vw, 12px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.board-heading h2 { margin: 0; color: #063782; font-size: clamp(23px, 6vw, 51px); font-weight: 900; line-height: 1.3; }
.gold-divider { display: block; margin: 1px auto clamp(11px, 2.5vw, 22px); color: #c99427; font-size: 18px; }
.gold-divider::before, .gold-divider::after { content: ""; display: inline-block; width: clamp(30px, 10vw, 90px); height: 2px; margin: 0 8px 5px; background: linear-gradient(90deg, transparent, #d2a844); }
.gold-divider::after { transform: rotate(180deg); }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.8vw, 16px); }
.count-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: clamp(95px, 17vw, 156px); padding: 7px 2px; border: 2px solid #d4a632; border-radius: clamp(12px, 2vw, 20px); background: linear-gradient(160deg, #fff 30%, #dbedfd 100%); box-shadow: inset 0 3px 12px #fff, 0 4px 10px #0b3d7e16; }
.count-number { display: block; color: #063b96; font: 800 clamp(34px, 10vw, 84px)/1 Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: -.08em; text-shadow: 1px 2px 0 #fff; }
.count-label { margin-top: 5px; color: #0a469b; font-size: clamp(12px, 3.2vw, 24px); font-weight: 800; line-height: 1.15; white-space: nowrap; }
.has-frame-art .count-item { border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; }
.event-info { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.5vw, 20px); min-height: 62px; margin-top: clamp(14px, 3vw, 24px); padding: 7px 12px; border: 2px solid #d4a632; border-radius: 18px; background: #ffffffd9; color: #083e91; font-size: clamp(12px, 2.6vw, 20px); font-weight: 800; }
.event-info-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.info-icon { color: #b5811d; font: 700 clamp(18px, 4vw, 28px)/1 Georgia, serif; }
.event-info-separator { width: 2px; height: 30px; background: #0a4d9a; opacity: .45; }
.has-frame-art .event-info { border-color: transparent; background: transparent; }
.event-started { display: grid; place-items: center; min-height: clamp(95px, 17vw, 156px); margin: 0; color: #063b96; font-size: clamp(22px, 5vw, 36px); font-weight: 900; line-height: 1.35; }
.event-started[hidden] { display: none; }
.countdown-board[data-complete="true"] .countdown-grid { display: none; }

.mascot-area { position: relative; align-self: flex-end; display: flex; align-items: flex-end; justify-content: center; width: clamp(145px, 34vw, 260px); min-height: clamp(125px, 30vw, 220px); margin: -4px max(2%, 8px) 0 0; }
.mascot-fallback { display: flex; flex-direction: column; justify-content: center; align-items: center; width: clamp(115px, 25vw, 185px); aspect-ratio: 1; border: 4px solid #b9e7ff; border-radius: 50%; background: linear-gradient(145deg, #4ab5f1, #0066c9); box-shadow: 0 10px 24px #0032706b; color: #fff; font-size: clamp(11px, 3vw, 18px); font-weight: 900; transform: rotate(-7deg); }
.fallback-heart { color: #fff0b8; font-size: clamp(48px, 11vw, 88px); line-height: 1; }
.mascot-art { display: none; width: 100%; max-height: 270px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 9px 12px #00265a66); }
.has-mascot-art .mascot-art { display: block; }
.has-mascot-art .mascot-fallback { display: none; }
.speech-wrap { position: absolute; z-index: 2; right: 75%; bottom: 48%; width: clamp(125px, 32vw, 235px); }
.speech-fallback { display: block; padding: 10px 13px; border: 2px solid #d8a536; border-radius: 22px; background: #fffdf5; box-shadow: 0 5px 12px #00336c38; color: #093e8e; font-size: clamp(12px, 3.1vw, 18px); font-weight: 800; text-align: center; white-space: nowrap; }
.speech-fallback::after { content: ""; position: absolute; right: 11px; bottom: -9px; width: 14px; height: 14px; border-right: 2px solid #d8a536; border-bottom: 2px solid #d8a536; background: #fffdf5; transform: rotate(45deg); }
.speech-fallback span { color: #1688e7; }
.speech-art { display: none; width: 100%; filter: drop-shadow(0 5px 10px #00265a4a); }
.has-speech-art .speech-art { display: block; }
.has-speech-art .speech-fallback { display: none; }
.townhall-section { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; margin-top: auto; padding: 20px 0 4px; text-align: center; }
.townhall-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; width: min(100%, 360px); min-height: 54px; padding: 11px 24px; border: 2px solid #fff5d3; border-radius: 999px; background: linear-gradient(145deg, #ffe6a5, #dcaa42); box-shadow: 0 5px 0 #a6721b, 0 12px 24px #00276368; color: #073c88; font-size: clamp(17px, 4vw, 21px); font-weight: 900; line-height: 1.25; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.townhall-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #a6721b, 0 15px 28px #00276368; }
.townhall-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #a6721b, 0 5px 13px #00276368; }
.townhall-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.townhall-arrow { font: 700 24px/1 Arial, sans-serif; }
.townhall-note { margin: 6px 0 0; color: #e4f4ff; font-size: 12px; font-weight: 700; }
.footer-note { margin: 12px 0 0; color: #dbf2ff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-align: center; }
.noscript-note { position: fixed; right: 10px; bottom: 10px; left: 10px; z-index: 3; padding: 10px; border-radius: 8px; background: #fff; color: #063782; text-align: center; }

@media (max-width: 430px) {
  .page-shell { padding-right: 12px; padding-left: 12px; }
  .hero { margin-top: 8px; margin-bottom: 20px; }
  .countdown-board { padding: 22px 13px 15px; border-radius: 20px; }
  .board-kicker { font-size: 9px; }
  .event-info { min-height: 53px; }
  .mascot-area { margin-top: 8px; }
}
@media (max-width: 340px) {
  .event-info { gap: 5px; padding-right: 4px; padding-left: 4px; font-size: 11px; }
  .event-info-item { gap: 3px; }
  .count-number { font-size: 31px; }
  .count-label { font-size: 11px; }
}
/* Fit the complete composition into a typical laptop or desktop browser window. */
@media (min-width: 600px) and (max-height: 950px) {
  .page-shell { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .hero { gap: 16px; margin: 0 0 10px; }
  .anniversary-badge { width: clamp(58px, 11vh, 82px); }
  .anniversary-badge strong { font-size: clamp(28px, 6.5vh, 43px); }
  .title-fallback { font-size: clamp(23px, 4.5vh, 34px); }
  .title-fallback span { font-size: clamp(25px, 4.8vh, 38px); }
  .hero-subtitle { margin-top: 4px; font-size: 12px; }
  .countdown-board { width: min(100%, 680px); padding: 18px 22px 16px; border-width: 3px; }
  .board-heading h2 { font-size: clamp(24px, 5vh, 40px); }
  .gold-divider { margin: 0 auto 8px; font-size: 14px; }
  .count-item { min-height: clamp(72px, 16vh, 115px); }
  .count-number { font-size: clamp(38px, 8vh, 68px); }
  .count-label { font-size: clamp(13px, 3vh, 20px); }
  .event-info { min-height: 50px; margin-top: 12px; font-size: clamp(12px, 2.5vh, 17px); }
  .mascot-area { width: clamp(120px, 22vh, 170px); min-height: clamp(90px, 17vh, 125px); margin-top: 6px; }
  .mascot-fallback { width: min(100%, 125px); }
  .fallback-heart { font-size: 58px; }
  .mascot-art { max-height: 140px; }
  .speech-wrap { right: 75%; bottom: 45%; width: clamp(100px, 16vw, 160px); }
  .speech-fallback { padding: 8px; font-size: 12px; }
  .townhall-section { padding-top: 8px; }
  .townhall-button { width: min(100%, 300px); min-height: 44px; padding: 8px 18px; font-size: 17px; }
  .townhall-note { margin-top: 4px; font-size: 11px; }
  .footer-note { margin-top: 6px; font-size: 10px; }
}
@media (min-width: 600px) and (max-height: 650px) {
  .page-shell { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .hero { margin-bottom: 4px; }
  .anniversary-badge { width: 56px; }
  .anniversary-badge strong { font-size: 30px; }
  .title-fallback { font-size: 24px; }
  .title-fallback span { font-size: 27px; }
  .countdown-board { padding: 12px 18px 10px; }
  .board-heading h2 { font-size: 30px; }
  .gold-divider { margin-bottom: 4px; }
  .count-item { min-height: 82px; }
  .count-number { font-size: 48px; }
  .count-label { font-size: 14px; }
  .event-info { min-height: 44px; margin-top: 8px; }
  .mascot-area { width: 105px; min-height: 75px; margin-top: 2px; }
  .mascot-fallback { width: 75px; }
  .fallback-heart { font-size: 36px; }
  .mascot-art { max-height: 90px; }
  .speech-wrap { width: 110px; }
  .townhall-section { padding-top: 4px; }
  .townhall-button { min-height: 40px; }
  .footer-note { margin-top: 4px; }
}
/* Short phones need tighter spacing while keeping all content visible. */
@media (max-width: 599px) and (max-height: 700px) {
  .page-shell { padding: max(6px, env(safe-area-inset-top)) 10px max(6px, env(safe-area-inset-bottom)); }
  .hero { gap: 8px; margin: 0 0 7px; }
  .anniversary-badge { width: 50px; border-width: 1px; }
  .anniversary-badge strong { font-size: 25px; }
  .anniversary-badge span { font-size: 8px; }
  .eyebrow { font-size: 9px; }
  .title-fallback { font-size: 18px; }
  .title-fallback span { font-size: 19px; }
  .hero-subtitle { margin-top: 2px; font-size: 9px; }
  .countdown-board { padding: 12px 9px 9px; border-width: 2px; border-radius: 14px; }
  .board-kicker { font-size: 8px; }
  .board-heading h2 { font-size: clamp(18px, 4.7vw, 24px); }
  .gold-divider { margin: 0 auto 4px; font-size: 12px; }
  .gold-divider::before, .gold-divider::after { width: 20px; margin: 0 3px 3px; }
  .countdown-grid { gap: 4px; }
  .count-item { min-height: 65px; padding: 3px 1px; border-width: 1px; border-radius: 8px; }
  .count-number { font-size: clamp(27px, 8vw, 34px); }
  .count-label { margin-top: 2px; font-size: 10px; }
  .event-info { gap: 5px; min-height: 42px; margin-top: 7px; padding: 3px; font-size: 10px; }
  .event-info-item { gap: 3px; }
  .event-info-separator { height: 20px; }
  .info-icon { font-size: 15px; }
  .mascot-area { width: 95px; min-height: 70px; margin: 0 3px 0 0; }
  .mascot-fallback { width: 72px; border-width: 2px; font-size: 9px; }
  .fallback-heart { font-size: 34px; }
  .mascot-art { max-height: 85px; }
  .speech-wrap { right: 76%; bottom: 34%; width: 103px; }
  .speech-fallback { padding: 5px 7px; border-width: 1px; border-radius: 12px; font-size: 10px; }
  .townhall-section { gap: 0; padding-top: 4px; }
  .townhall-button { width: min(100%, 240px); min-height: 40px; padding: 7px 14px; border-width: 1px; font-size: 15px; }
  .townhall-note { margin-top: 3px; font-size: 10px; }
  .footer-note { margin-top: 3px; font-size: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mascot-area { animation: float 4s ease-in-out infinite; }
  @keyframes float { 50% { transform: translateY(-5px); } }
}