:root {
  color-scheme: light dark;

  /* Radix steps carry fixed meanings, which is why they are worth using:
     1-2 app background · 3 subtle component · 6 border · 9 solid · 11 readable
     accent text · 12 body text. The same names hold in dark mode. */
  --bg:            var(--sand-1);
  --bg-subtle:     var(--sand-2);
  --surface:       var(--sand-1);
  --surface-hover: var(--sand-3);
  --line:          var(--sand-6);
  --line-soft:     var(--sand-4);
  --text:          var(--sand-12);
  --text-muted:    var(--sand-11);
  --text-dim:      var(--sand-10);
  --accent:        var(--orange-9);
  --accent-hover:  var(--orange-10);
  --accent-text:   var(--orange-11);
  --accent-bg:     var(--orange-3);
  --accent-line:   var(--orange-6);
  --danger-text:   var(--tomato-11);
  --danger-bg:     var(--tomato-3);
  --danger-line:   var(--tomato-7);
  --on-accent:     #fff;

  /* Lao and French both need real glyph coverage; Phetsarath and Saysettha are
     the fonts actually installed on Lao machines. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Noto Sans Lao", "Phetsarath OT", "Saysettha OT", "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 52rem;
  --wrap-wide: 72rem;
  --flyer-ratio: 4 / 5;
}

* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size-1);
  line-height: var(--font-lineheight-3);
}
h1, h2, h3 { line-height: var(--font-lineheight-1); font-weight: var(--font-weight-7); margin: 0; }
a { color: var(--accent-text); text-underline-offset: 2px; }
/* height:auto is load-bearing: the width/height attributes we emit to reserve
   layout space would otherwise pin the height and defeat aspect-ratio. */
img { max-width: 100%; height: auto; display: block; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--size-3); top: var(--size-3); z-index: 10; background: var(--surface);
  padding: var(--size-2) var(--size-3); border-radius: var(--radius-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-1); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--size-3); }
.wrap.wide { max-width: var(--wrap-wide); }
main { padding-block: var(--size-7) var(--size-9); }

/* ------------------------------- site chrome ------------------------------- */
header.site {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 5;
}
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-2) var(--size-5);
  padding-block: var(--size-3); }
.brand { font-weight: var(--font-weight-7); font-size: var(--font-size-2); color: var(--text);
  text-decoration: none; letter-spacing: -0.01em; }
header nav { display: flex; gap: var(--size-4); flex-wrap: wrap; font-size: var(--font-size-0);
  margin-inline-start: auto; align-items: center; }
header nav a { color: var(--text-muted); text-decoration: none; }
header nav a:hover { color: var(--text); }
header nav a.cta { color: var(--accent-text); font-weight: var(--font-weight-6); }
.langs { display: flex; gap: var(--size-1); font-size: var(--font-size-0); }
.langs a { color: var(--text-dim); text-decoration: none; padding: var(--size-1) var(--size-2);
  border-radius: var(--radius-2); line-height: 1; }
.langs a:hover { background: var(--surface-hover); color: var(--text); }
.langs a[aria-current] { background: var(--accent-bg); color: var(--accent-text);
  font-weight: var(--font-weight-6); }

footer.site { border-top: 1px solid var(--line-soft); color: var(--text-muted);
  font-size: var(--font-size-0); padding-block: var(--size-5) var(--size-8); }
footer.site p { margin-block: var(--size-1); }

/* ---------------------------------- hero ----------------------------------- */
.hero { margin-bottom: var(--size-5); }
.hero h1 { font-size: var(--font-size-5); letter-spacing: -0.02em; }
.hero p { color: var(--text-muted); margin-block: var(--size-2) 0; max-width: 34rem; }

.search { display: flex; gap: var(--size-2); margin-block: var(--size-5) var(--size-3); flex-wrap: wrap; }
.search input[type=search] { flex: 1 1 16rem; }
.search input, .search select, .search button, .eventform input, .eventform select, .eventform textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-2);
  padding: var(--size-2) var(--size-3);
}
.search button, button.primary {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
  font-weight: var(--font-weight-6); cursor: pointer;
}
.search button:hover, button.primary:hover { background: var(--accent-hover); }

.ranges { display: flex; align-items: center; gap: var(--size-3); margin-bottom: var(--size-5); }
.rangechips { display: flex; gap: var(--size-2); flex-wrap: wrap; flex: 1; }
.rangechip {
  font-size: var(--font-size-0); text-decoration: none; color: var(--text-muted);
  border: 1px solid var(--line); border-radius: var(--radius-round, 99px);
  padding: var(--size-1) var(--size-3); white-space: nowrap; background: var(--surface);
}
.rangechip:hover { border-color: var(--accent-line); color: var(--text); }
.rangechip.on { background: var(--accent-bg); border-color: var(--accent-line);
  color: var(--accent-text); font-weight: var(--font-weight-6); }
.viewtoggle { text-decoration: none; color: var(--text-muted); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: var(--size-1) var(--size-2); line-height: 1.4; }
.count { color: var(--text-dim); font-size: var(--font-size-0); margin-block: 0 var(--size-4); }

/* --------------------------------- timeline -------------------------------- */
.day { margin-bottom: var(--size-7); }
.dayhead {
  display: flex; align-items: baseline; gap: var(--size-2);
  font-size: var(--font-size-0); font-weight: var(--font-weight-6);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--size-3); padding-block: var(--size-2);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 3.4rem; background: var(--bg); z-index: 2;
}
.dayhead em { font-style: normal; color: var(--accent-text); background: var(--accent-bg);
  padding: 0 var(--size-2); border-radius: 99px; letter-spacing: 0.02em; }

ul.events { list-style: none; margin: 0; padding: 0; }
ul.events.list { display: flex; flex-direction: column; gap: var(--size-2); }
ul.events.grid { display: grid; gap: var(--size-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.cardlink { display: flex; gap: var(--size-4); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-3); padding: var(--size-3);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.cardlink:hover { border-color: var(--line); box-shadow: var(--shadow-3); }

.thumb { flex: 0 0 6.5rem; }
.grid .cardlink { flex-direction: column; gap: var(--size-3); padding: var(--size-2); }
.grid .thumb { flex: none; }
.grid .what { padding-inline: var(--size-2); padding-bottom: var(--size-2); }

.flyer { width: 100%; aspect-ratio: var(--flyer-ratio); object-fit: cover;
  border-radius: var(--radius-2); background: var(--bg-subtle); }
/* An event with no flyer still needs a face, so it gets a stable generated one. */
.flyer.placeholder {
  display: grid; place-items: center;
  background:
    linear-gradient(145deg,
      hsl(var(--h) 55% 62%) 0%,
      hsl(calc(var(--h) + 40) 50% 46%) 100%);
}
.flyer.placeholder span { color: #fff; font-weight: var(--font-weight-7);
  font-size: var(--font-size-4); letter-spacing: -0.03em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.grid .flyer.placeholder span { font-size: var(--font-size-6); }

.what { display: flex; flex-direction: column; gap: var(--size-1); }
.when { display: flex; align-items: center; gap: var(--size-2); flex-wrap: wrap;
  margin: 0; font-size: var(--font-size-0); color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.chip { font-size: var(--font-size-00); text-transform: uppercase; letter-spacing: .05em;
  background: var(--accent-bg); color: var(--accent-text); border-radius: 99px;
  padding: 0 var(--size-2); font-weight: var(--font-weight-6); }
.chip.warn { background: var(--danger-bg); color: var(--danger-text); }
.title { font-size: var(--font-size-2); letter-spacing: -0.01em; }
.cardlink:hover .title { color: var(--accent-text); }
.venue { margin: 0; font-size: var(--font-size-1); color: var(--text); }
.meta { margin: 0; font-size: var(--font-size-0); color: var(--text-muted); }
.seriesline { margin: var(--size-1) 0 0; font-size: var(--font-size-0); color: var(--text-dim); }
.seriesline strong { color: var(--accent-text); font-weight: var(--font-weight-6); }
.empty { color: var(--text-muted); padding-block: var(--size-7); text-align: center; }
.feednote { color: var(--text-muted); font-size: var(--font-size-0);
  border-top: 1px solid var(--line-soft); padding-top: var(--size-4); margin-top: var(--size-8); }

/* ------------------------------- event detail ------------------------------ */
.detail { display: grid; gap: var(--size-6); grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start; }
.detail .poster { position: sticky; top: 5rem; }
/* The full flyer is never cropped here — on a poster the text IS the content. */
.detail .poster img { width: 100%; height: auto; border-radius: var(--radius-3);
  box-shadow: var(--shadow-3); background: var(--bg-subtle); }
.detail .poster .flyer.placeholder { aspect-ratio: var(--flyer-ratio); border-radius: var(--radius-3); }
.detail .poster .flyer.placeholder span { font-size: var(--font-size-8); }
.crumb { font-size: var(--font-size-0); margin: 0 0 var(--size-3); }
.detail h1 { font-size: var(--font-size-4); letter-spacing: -0.02em; margin-bottom: var(--size-2); }
.detailwhen { font-size: var(--font-size-2); margin: 0 0 var(--size-4); }
.detailwhen .rel { color: var(--accent-text); }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--size-2) var(--size-4);
  margin: 0 0 var(--size-5); padding: var(--size-4); background: var(--bg-subtle);
  border: 1px solid var(--line-soft); border-radius: var(--radius-3); font-size: var(--font-size-1); }
dl.facts dt { color: var(--text-muted); font-size: var(--font-size-0); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; gap: var(--size-3); flex-wrap: wrap; margin-bottom: var(--size-5); }
.btn { text-decoration: none; border-radius: var(--radius-2); padding: var(--size-2) var(--size-4);
  border: 1px solid var(--line); color: var(--text); font-size: var(--font-size-0);
  font-weight: var(--font-weight-6); background: var(--surface); }
.btn.solid { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn:hover { border-color: var(--accent-line); }
.desc { max-width: 38rem; }
.desc p { margin-block: 0 var(--size-3); }
ul.dates { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column;
  gap: var(--size-1); font-size: var(--font-size-0); }
ul.dates li { display: flex; gap: var(--size-3); padding: var(--size-2) 0;
  border-bottom: 1px solid var(--line-soft); color: var(--text-muted); }
ul.dates li time { color: var(--text); font-variant-numeric: tabular-nums; }
.rawlinks { font-size: var(--font-size-0); color: var(--text-dim); margin-top: var(--size-7); }
.pendingnote, .langnote { background: var(--accent-bg); color: var(--accent-text);
  border-radius: var(--radius-2); padding: var(--size-2) var(--size-3);
  font-size: var(--font-size-0); }

/* ---------------------------------- forms ---------------------------------- */
.prose { max-width: 38rem; }
.prose h1 { font-size: var(--font-size-4); margin-bottom: var(--size-3); }
.prose h2 { font-size: var(--font-size-2); margin-block: var(--size-6) var(--size-2); }
.prose p { margin-block: 0 var(--size-3); color: var(--text-muted); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--font-size-0); }
.prose td, .prose th, table.list td, table.list th {
  border-bottom: 1px solid var(--line-soft); padding: var(--size-2); text-align: start;
  vertical-align: top; }
pre { background: var(--bg-subtle); border: 1px solid var(--line-soft);
  border-radius: var(--radius-2); padding: var(--size-3); overflow-x: auto;
  font-size: var(--font-size-0); }
code { font-family: var(--mono); font-size: 0.9em; }

.eventform { display: flex; flex-direction: column; gap: var(--size-4);
  max-width: 40rem; margin-top: var(--size-5); }
.eventform.narrow { max-width: 22rem; }
.eventform label, .flabel { display: flex; flex-direction: column; gap: var(--size-1);
  font-size: var(--font-size-0); color: var(--text-muted); font-weight: var(--font-weight-6); }
.eventform input, .eventform select, .eventform textarea { width: 100%;
  font-weight: var(--font-weight-4); color: var(--text); }
.eventform textarea { resize: vertical; line-height: var(--font-lineheight-3); }
.eventform .row { display: flex; gap: var(--size-4); flex-wrap: wrap; }
.eventform .row > label { flex: 1 1 13rem; }
.hint { font-weight: var(--font-weight-4); color: var(--text-dim); }
fieldset.acct { border: 1px solid var(--line-soft); border-radius: var(--radius-3);
  padding: var(--size-4); display: flex; flex-direction: column; gap: var(--size-4);
  background: var(--bg-subtle); }
fieldset.acct legend { font-size: var(--font-size-0); color: var(--text-muted);
  padding-inline: var(--size-2); font-weight: var(--font-weight-6); }
.eventform > button { align-self: flex-start; padding: var(--size-3) var(--size-6);
  border-radius: var(--radius-2); border: 0; font-size: var(--font-size-1); }

.flyerfield { display: flex; flex-direction: column; gap: var(--size-2); }
.flyerrow { display: flex; gap: var(--size-4); align-items: flex-start; }
.flyerpreview { flex: 0 0 7rem; aspect-ratio: var(--flyer-ratio); border-radius: var(--radius-2);
  border: 1px dashed var(--line); background: var(--bg-subtle);
  display: grid; place-items: center; overflow: hidden; color: var(--text-dim);
  font-size: var(--font-size-5); }
.flyerpreview img { width: 100%; height: 100%; object-fit: cover; }
.flyercontrols { flex: 1; display: flex; flex-direction: column; gap: var(--size-3); }
.flyercontrols input[type=file] { font-size: var(--font-size-0); color: var(--text-muted); }
.removeimg { flex-direction: row !important; align-items: center; gap: var(--size-2); }
.removeimg input { width: auto; }

.error { background: var(--danger-bg); color: var(--danger-text);
  border: 1px solid var(--danger-line); padding: var(--size-3);
  border-radius: var(--radius-2); max-width: 40rem; }
.ok { color: var(--accent-text); }
.tokenlink { background: var(--bg-subtle); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: var(--size-3); overflow-wrap: anywhere;
  font-family: var(--mono); font-size: var(--font-size-0); }
.danger { margin-top: var(--size-8); }
.danger button { background: transparent; color: var(--danger-text);
  border: 1px solid var(--danger-line); border-radius: var(--radius-2);
  padding: var(--size-2) var(--size-4); cursor: pointer; font: inherit; }

table.list { border-collapse: collapse; width: 100%; font-size: var(--font-size-0);
  margin-top: var(--size-4); }
table.list form { display: inline; }
table.list button, table.list select { font: inherit; font-size: var(--font-size-0);
  padding: var(--size-1) var(--size-2); border-radius: var(--radius-2);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }

/* ---------------------------------- admin ---------------------------------- */
.adminpage { max-width: none; }
table.list.admin { table-layout: auto; }
table.list.admin td { vertical-align: middle; }
tr.gone td { opacity: .5; }
tr.gone a { text-decoration: line-through; }
.admincell { white-space: nowrap; display: flex; gap: var(--size-2); align-items: center; }
.btnlink, table.list .btnlink { text-decoration: none; border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: var(--size-1) var(--size-2); color: var(--text);
  font-size: var(--font-size-0); background: var(--surface); }
.btnlink:hover { border-color: var(--accent-line); }
table.list button.warn { color: var(--danger-text); border-color: var(--danger-line); }
.tokenfield { font-family: var(--mono); font-size: var(--font-size-00);
  border: 1px solid var(--line-soft); border-radius: var(--radius-2);
  padding: var(--size-1) var(--size-2); background: var(--bg-subtle);
  color: var(--text-muted); width: 100%; min-width: 12rem; }

/* ------------------------------ markdown editor ---------------------------- */
.mdfield { display: flex; flex-direction: column; gap: var(--size-2); }
.mdbar { display: flex; gap: var(--size-1); flex-wrap: wrap; }
.mdbar button { font: inherit; font-size: var(--font-size-0); cursor: pointer;
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: var(--size-1) var(--size-3); line-height: 1.4; }
.mdbar button:hover { border-color: var(--accent-line); color: var(--text); }
.desc h2, .desc h3, .desc h4 { margin-block: var(--size-5) var(--size-2); font-size: var(--font-size-2); }
.desc ul, .desc ol { padding-inline-start: var(--size-5); margin-block: 0 var(--size-3); }
.desc li { margin-block: var(--size-1); }
.desc blockquote { margin: 0 0 var(--size-3); padding-inline-start: var(--size-4);
  border-inline-start: 3px solid var(--line); color: var(--text-muted); }
.desc code { background: var(--bg-subtle); padding: 0 var(--size-1); border-radius: var(--radius-1); }

/* -------------------------------- responsive ------------------------------- */
@media (max-width: 48rem) {
  .detail { grid-template-columns: 1fr; }
  .detail .poster { position: static; max-width: 20rem; }
}
@media (max-width: 34rem) {
  .hero h1 { font-size: var(--font-size-4); }
  .thumb { flex-basis: 5rem; }
  .cardlink { gap: var(--size-3); }
  .bar { gap: var(--size-2); }
  header nav { width: 100%; margin-inline-start: 0; justify-content: space-between;
    gap: var(--size-2); }
  .dayhead { top: 5.6rem; }
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dt { margin-top: var(--size-2); }
  .flyerrow { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }