/* sunday.town's own pages: the landing, the terms and the privacy policy.
   The logo's colours (FlatGame BRAND.md): paper #FCF1DA, navy #2B4F6E, orange #EE6A2F, cream #F7E6C4,
   gold #E8A93A. The logo's paper is no longer the page: a page of it left every layer at 1.06 to 1.1
   contrast, so the card, the switch and the logo's own tile vanished into one yellow sheet. Paper
   now frames things (the logo tile, the footer band); reading happens on a lighter warm white; the
   navy band is the brand's evening sky, where the gold can finally be used (5.6 to 1). */
/* Myanmar text in ZinBo's fonts, the ones Pai bought for FlatGame (its BRAND.md §4 and SOURCES.md):
   Z11-MyanSans for reading, Z10-Cartoon for the landing's titles. unicode-range keeps them to the
   Myanmar block, so English and the Latin words inside Myanmar text stay in the system font. */
@font-face {
  font-family: "Z11 MyanSans";
  src: url("/site/fonts/MyanSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "Z11 MyanSans";
  src: url("/site/fonts/MyanSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "Z10 Cartoon";
  src: url("/site/fonts/Cartoon.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F, U+200B-200D, U+25CC;
}

:root {
  --paper: #fcf1da;
  --page: #fffaf1;
  --navy: #2b4f6e;
  --night: #1f3b54;
  --orange: #ee6a2f;
  --orange-deep: #c8501a;
  --gold: #e8a93a;
  --ink: #1f2b36;
  --ink-2: #5a6470;
  --line: #ebddc2;
  color-scheme: light;
}

html:not(.en-on) .en,
html.en-on .my { display: none; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Z11 MyanSans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Myanmar", "Myanmar Sangam MN", Padauk, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  /* The footer band reaches the bottom of a short page. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; }
html[lang="my"] body { line-height: 1.9; }

a { color: var(--navy); }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* The navy band: the header on every page, and the landing's hero inside it. */
.band {
  background: linear-gradient(180deg, var(--night), var(--navy));
  color: var(--paper);
  border-bottom: 3px solid var(--gold);
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.tile { border-radius: 22%; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.lang {
  font: inherit;
  font-size: 15px;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(252, 241, 218, .45);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}
.lang:hover { border-color: var(--gold); }

.hero { text-align: center; padding: 18px 0 40px; }
.hero .tile { width: min(168px, 44vw); height: auto; }
.hero h1 { color: var(--paper); font-size: 36px; margin: 18px 0 4px; }
.lead { font-size: 19px; color: rgba(252, 241, 218, .82); margin: 0; }

main { padding-top: 8px; padding-bottom: 44px; }
h1 { color: var(--navy); font-size: 30px; line-height: 1.3; margin: 24px 0 6px; }
h2 { color: var(--navy); font-size: 20px; line-height: 1.4; margin: 30px 0 8px; }
.date { color: var(--ink-2); margin-top: 0; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--orange); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(31, 59, 84, .08);
  padding: 20px 22px 24px;
  margin-top: 28px;
}
.card h2 { margin-top: 0; }
.button {
  display: inline-block;
  margin-top: 6px;
  background: var(--orange-deep);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 26px;
}
.button:hover { background: #b2440f; }

footer.band-paper {
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
}
footer .wrap { padding-top: 18px; padding-bottom: 28px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 6px; }

/* The landing's Sunday evening: the sky going from night to the last apricot light, and the flats at
   its foot (the scene is drawn in /site/index.html; its generator is dev/site/scene.py). */
.band.dusk {
  background: linear-gradient(180deg, #1f3b54 0%, #3d4466 34%, #8a6a86 58%, #d9927a 78%, #f2b880 100%);
  border-bottom: 0;
}
.dusk .hero { padding: 26px 0 18px; }
.dusk .hero h1 { margin-top: 0; text-shadow: 0 2px 14px rgba(31, 59, 84, .5); }
.dusk .lead { color: var(--paper); font-size: 21px; font-weight: 600; text-wrap: balance; }
.sub {
  color: rgba(252, 241, 218, .84);
  max-width: 560px;
  margin: 8px auto 0;
  font-size: 16px;
  text-wrap: balance;
}
.scene {
  display: block;
  width: 100%;
  height: clamp(250px, 30vw, 440px);
  margin-top: -6px;
  border-bottom: 3px solid var(--gold);
}
.scene .win { fill: #2a3440; }
.scene .win.lit { animation: light-on .9s ease-out var(--d) forwards; }
@keyframes light-on { to { fill: #ffd98a; } }
.scene .sway {
  transform-box: view-box;
  transform-origin: var(--o);
  animation: sway var(--t) ease-in-out var(--l) infinite alternate;
}
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.scene .rope {
  transform-box: view-box;
  transform-origin: var(--o);
  animation: sway 5.5s ease-in-out infinite alternate;
  animation-name: swing;
}
@keyframes swing { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.scene .bird {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bob 3.4s ease-in-out var(--l) infinite;
}
@keyframes bob { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(4deg); } }
.scene .glint { opacity: 0; animation: glint 7s ease-in-out 2s infinite; }
@keyframes glint { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .scene .win.lit { fill: #ffd98a; }
}
/* Burmese has no spaces between words: in the hero, each phrase is one piece, so a line breaks only
   between phrases, never inside a word. */
.ph { display: inline-block; }
.small { font-size: 14px; color: var(--ink-2); }
/* The landing's titles in Myanmar: Z10-Cartoon, as FlatGame's titles. */
.hero [lang="my"] .lead,
[lang="my"] .card h2 { font-family: "Z10 Cartoon", "Z11 MyanSans", system-ui, sans-serif; font-weight: 700; }