/* TwetTat, the sibling of pyawtat.nanoeye.me.
   Same token names, same layout language, TwetTat's own palette: bottle green
   on cool paper instead of saffron on cream. No web fonts: this is read on
   cheap handsets over a Thai mobile network, and a font request is a second
   round trip before the first word appears. */

:root {
  /* Brand. Ported from mobile_app/lib/theme/tt_colors.dart. */
  --green: #0b6b4a;
  --green-deep: #084a34;
  --green-bright: #14a06d;
  --green-tint: #e2f6ec;

  /* The accent shared with PyawTat. */
  --teal: #0e7385;
  --teal-soft: #e5f5f8;

  /* Ochre carries "worth a look", clay carries a shortfall. Same meanings as
     in the app, so a screenshot and the page around it agree. */
  --ochre: #b87503;
  --clay: #9a3324;
  --clay-soft: #fbe9e6;

  /* Neutrals are green-shifted, never true grey. */
  --paper: #f7faf8;
  --paper-sunk: #f1f5f3;
  --card: #ffffff;
  --line: #dbe3df;
  --line-soft: #e9eeec;
  --ink: #0d1a17;
  --ink-soft: #23332d;
  --muted: #5a6b64;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 68rem;
  /* Burmese stacked diacritics collide at Latin leading. */
  --lh-my: 1.75;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgb(13 26 23 / .05), 0 8px 24px rgb(13 26 23 / .06);
  --shadow-phone: 0 2px 6px rgb(13 26 23 / .08), 0 24px 60px rgb(13 26 23 / .18);

  /* The app itself has no dark theme: one paper surface and one brand green,
     no second contrast surface to maintain. The site follows it, and declares
     that so a browser does not invert the page on its own. */
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: "Padauk", "Noto Sans Myanmar", "Myanmar Text",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: var(--lh-my);
  -webkit-font-smoothing: antialiased;
}

/* Money and any Latin-only run. Never inside a Burmese run: Padauk has no ฿
   at all, so one there resolves through fallback at the wrong metrics. */
.lat, .money {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* height:auto is load-bearing: the images carry width/height attributes to
   reserve space against layout shift, and without this the attribute height
   wins over the scaled width and every screenshot renders at full size. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- header ---------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(247 250 248 / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.head-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
  padding-block: .5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-inline-end: auto;
}

.brand img { width: 34px; height: 34px; border-radius: 9px; }

.brand-my {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.2;
}

.brand-lat {
  display: block;
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--muted);
  font-family: system-ui, sans-serif;
}

.nav {
  display: flex;
  gap: 1.6rem;
  font-size: .95rem;
  line-height: var(--lh-my);
}

.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }

.langs { display: flex; gap: .3rem; }

.lang {
  text-decoration: none;
  font-size: .85rem;
  line-height: var(--lh-my);
  padding: .2rem .7rem;
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
}

.lang.is-on { background: var(--ink); color: var(--paper); }

/* The lockup is a name; it never breaks across lines. */
.brand-my, .brand-lat { white-space: nowrap; }

/* On a handset the in-page nav wrapped to three lines and shoved the language
   pills off the row. The page is short enough to scroll, so the links go and
   the two things that must stay are the mark and the language choice. */
@media (max-width: 720px) {
  .nav { display: none; }
  .head-row { gap: 1rem; }
  .langs { margin-inline-start: auto; }
}

/* ---- hero ------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

/* The letter the app is named for, sunk into the page. */
.hero::before {
  content: "တ";
  position: absolute;
  inset-inline-start: -7vw;
  top: 50%;
  translate: 0 -52%;
  font-size: 26vw;
  line-height: 1;
  font-weight: 700;
  color: var(--green);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  margin-block-end: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Burmese is written without spaces, so a browser will break a headline in
   the middle of a word: "သိထားပါ။" came apart as "သိ / ထားပါ။". Anything that
   must stay whole gets this. */
.keep { white-space: nowrap; }

/* The one word the page is about, marked the way the sibling marks its own. */
.mark {
  /* text-decoration, not a background band: a background on an inline element
     paints the whole line box, so at 1.35 leading the mark floated well below
     the glyphs. This one tracks the text. */
  text-decoration: underline;
  text-decoration-color: rgb(20 160 109 / .38);
  text-decoration-thickness: .16em;
  text-underline-offset: .04em;
  text-decoration-skip-ink: none;
}

.lede {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-block-start: 1.5rem;
}

.store {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.store svg { width: 22px; height: 22px; flex: none; fill: var(--ink); }
.store small {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.store b {
  display: block;
  font-size: .98rem;
  color: var(--ink);
  line-height: 1.3;
}

.micro {
  margin-block-start: 1.1rem;
  font-size: .85rem;
  color: var(--muted);
}

/* ---- phone ----------------------------------------------------------- */

.phone {
  justify-self: center;
  width: min(238px, 68vw);
  border-radius: 30px;
  padding: 8px;
  background: #14201c;
  box-shadow: var(--shadow-phone);
}

.phone img { border-radius: 23px; }

/* ---- sections -------------------------------------------------------- */

section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  /* Clears the sticky header when an anchor is jumped to. */
  scroll-margin-top: 68px;
}

.sunk { background: var(--paper-sunk); border-block: 1px solid var(--line-soft); }

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
}

.section-lede {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
}

/* ---- the gap, shown as the app shows it ------------------------------ */

.gap-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
  margin-block-start: 2.5rem;
}

@media (min-width: 860px) {
  .gap-grid { grid-template-columns: .9fr 1.1fr; }
}

.slip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.slip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .8rem;
}

.slip-row + .slip-row { border-top: 1px solid var(--line-soft); }

.slip-row span { color: var(--muted); font-size: .95rem; }
.slip-row b { font-size: 1.15rem; color: var(--ink); font-weight: 700; }

.slip-gap {
  margin-block-start: 1rem;
  background: var(--clay-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}

.slip-gap span { display: block; color: var(--clay); font-size: .9rem; }
.slip-gap b {
  display: block;
  font-size: 2.1rem;
  color: var(--clay);
  line-height: 1.3;
  font-weight: 700;
}

.gap-points { margin: 0; padding: 0; list-style: none; }

.gap-points li {
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.gap-points li:first-child { border-top: 0; padding-top: 0; }
.gap-points b { display: block; color: var(--ink); font-weight: 700; }

/* ---- a day ----------------------------------------------------------- */

.day {
  display: grid;
  gap: 0;
  margin-block-start: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) { .day { grid-template-columns: repeat(3, 1fr); } }

.beat {
  padding: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
}

.beat:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.beat:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.beat + .beat { border-top: 0; }

@media (min-width: 760px) {
  .beat:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .beat:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
  .beat + .beat { border-top: 1px solid var(--line); border-left: 0; }
}

.beat time {
  font-family: system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--teal);
  font-weight: 600;
}

.beat h3 {
  margin: .5rem 0 .4rem;
  font-size: 1.08rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.5;
}

.beat p { margin: 0; font-size: .93rem; color: var(--muted); }

/* ---- built for ------------------------------------------------------- */

.builtfor {
  display: grid;
  gap: 1.2rem;
  margin-block-start: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .builtfor { grid-template-columns: repeat(3, 1fr); }
  /* Five cards, six cells: without this the grid ends on a hole. */
  .card-wide { grid-column: span 2; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-card);
}

.card h3 { margin: 0 0 .55rem; font-size: 1.1rem; color: var(--ink); font-weight: 700; }
.card p { margin: 0; font-size: .95rem; color: var(--muted); }

.card-wide {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  border-color: transparent;
  color: #dff3e9;
}

.card-wide h3 { color: #fff; }
.card-wide p { color: #c9e7da; }

.card-tint { background: var(--teal-soft); border-color: #cfe9ee; }

/* ---- screens rail ---------------------------------------------------- */

/* Each screen sits in a bezel and the row staggers, the way the sibling
   presents its own. A bare 2:1 screenshot reads as a long strip; the same
   image inside a phone reads as a phone. */

.rail {
  display: flex;
  gap: 1.1rem;
  margin-block-start: 2.5rem;
  padding-block-end: 1rem;
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.rail figure {
  margin: 0;
  flex: none;
  width: 232px;
  scroll-snap-align: center;
}

/* Every second one drops, so the row is not a picket fence. */
.rail figure:nth-child(even) { margin-block-start: 2.2rem; }

.rail .phone-sm {
  border-radius: 26px;
  padding: 7px;
  background: #14201c;
  box-shadow: var(--shadow-card);
}

.rail img {
  border-radius: 20px;
  display: block;
}

.rail figcaption {
  margin-block-start: .85rem;
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
}

/* Room for the drop shadow and the stagger. */
.rail { padding-block: .5rem 1.5rem; }

/* ---- footer ---------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  font-size: .9rem;
  color: var(--muted);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}

.foot-row nav { display: flex; gap: 1.4rem; margin-inline-end: auto; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

/* ---- legal pages ----------------------------------------------------- */

.legal { max-width: 46rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.legal h2 { margin-block: 2.2rem .6rem; font-size: 1.2rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-inline-start: 1.2rem; }
.legal li { margin-block: .45rem; }
.legal .updated { color: var(--muted); font-size: .9rem; margin-block-start: .4rem; }

.callout {
  background: var(--green-tint);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-block: 1.4rem;
}

.callout p { margin: 0; }

/* No scroll animation on purpose. This is read on cheap handsets by someone
   checking whether they were underpaid; the page should render and sit still.
   Hover and focus states are the only motion. */