/* Lamakaan's colours: white-washed walls, the terracotta of its tiles and
   steps, the green of its trees, the blue of the sky and the table tiles */
:root {
  --paper: #fdfcfa;       /* white-wash */
  --ink: #2a2420;
  --muted: #6b625b;
  --rule: #e6ddd2;
  --wall: #ad4e2c;        /* terracotta: the header band */
  --wall-ink: #ffffff;
  --date: #a4472a;
  --accent: #3b6b2a;      /* the trees: links and buttons */
  --on-accent: #ffffff;
  --leaf: #2c4a22;        /* the trees: the footer band */
  --leaf-ink: #eef5ef;
  --sky: #4b9ad3;
  --sky-light: #b9dcf3;
  --sky-wash: #e8f3fb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161917;
    --ink: #ebe5dc;
    --muted: #a59c92;
    --rule: #333a35;
    --wall: #84391f;
    --wall-ink: #fbefe4;
    --date: #e8a184;
    --accent: #a3d68f;
    --on-accent: #10251a;
    --leaf: #1f3519;
    --leaf-ink: #e2efe4;
    --sky: #7fbfe8;
    --sky-light: #9fd0f0;
    --sky-wash: #172a36;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 Georgia, "Times New Roman", serif;
}
a { color: var(--accent); }
img, iframe { max-width: 100%; height: auto; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* sky above the walls */
header.site { background: var(--wall); color: var(--wall-ink); padding: 18px 0 10px; border-top: 6px solid var(--sky); }
header.site .brandrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
header.site .brand { color: var(--wall-ink); display: block; line-height: 0; }
header.site .brand svg { display: block; height: 23px; width: auto; }
header.site .tagline { color: var(--wall-ink); font-size: 15px; }
@media (max-width: 480px) { header.site .brand svg { height: 20px; } }
header.site nav { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: system-ui, sans-serif; font-size: 15px; }
header.site nav a { color: var(--wall-ink); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
header.site nav a:hover, header.site nav a[aria-current] { border-bottom-color: var(--sky-light); }

.columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-top: 28px; padding-bottom: 40px; }
@media (max-width: 820px) { .columns { grid-template-columns: minmax(0, 1fr); } }
.page-title { font-size: 1.9rem; margin: 0 0 16px; }
main h1:not(.page-title) { font-size: 1.5rem; }
aside { font-size: 15px; border-left: 1px solid var(--rule); padding-left: 24px; }
@media (max-width: 820px) { aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 16px; } }
aside h3 { font-family: system-ui, sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 24px 0 8px; }
aside h3:first-child { margin-top: 0; }

/* the events list */
.lm_navbar { font-family: system-ui, sans-serif; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.lm_event { border-top: 1px solid var(--rule); padding: 18px 0; }
.lm_title { font-size: 1.25rem; font-weight: bold; }
/* the picture sits on the right, scaled to fit, and the text flows around it */
.lm_event::after { content: ""; display: block; clear: both; }
.lm_image img { float: right; width: auto; height: auto; max-width: 45%; margin: 4px 0 12px 22px; border-radius: 3px; }
@media (max-width: 600px) { .lm_image img { float: none; display: block; max-width: 100%; margin: 10px 0; } }
.lm_approved_date { font-family: system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--date); }
.lm_organizer_name { color: var(--muted); font-style: italic; }
.lm_description { margin-top: 6px; overflow-wrap: anywhere; }
aside .lm_event { padding: 10px 0; }
aside .lm_title { font-size: 1rem; }
aside .lm_description { font-size: 14px; }
aside .lm_image { display: none; }

.announcement { border-left: 4px solid var(--sky); background: var(--sky-wash); padding: 4px 18px; margin: 0 0 22px; border-radius: 0 4px 4px 0; }
.announcement h2, .announcement h3 { margin-top: 12px; }

/* /announcement, the manager's editor */
form.announce, form.announce-login { display: flex; flex-direction: column; gap: 8px; font-family: system-ui, sans-serif; font-size: 15px; max-width: 640px; }
form.announce textarea, form.announce input, form.announce-login input { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; font: inherit; background: transparent; color: var(--ink); }
form.announce textarea { font: 15px/1.5 ui-monospace, monospace; resize: vertical; }
form.announce input[type=date] { max-width: 200px; }
form.announce-login input { max-width: 320px; }
form.announce-login .button { align-self: flex-start; }
.announce-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.announce-hint { color: var(--muted); font-size: 14px; margin: 0; }
.announce-msg { border-left: 4px solid var(--accent); padding: 6px 12px; font-family: system-ui, sans-serif; }
.button { padding: 8px 16px; border: 0; border-radius: 4px; background: var(--accent); color: var(--on-accent); font: inherit; cursor: pointer; }
.button.quiet { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.link { background: none; border: 0; padding: 0; margin-top: 24px; color: var(--accent); text-decoration: underline; font: 15px system-ui, sans-serif; cursor: pointer; }

form.subscribe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; font-family: system-ui, sans-serif; font-size: 15px; }
form.subscribe label { flex-basis: 100%; }
form.subscribe input[type=email] { flex: 1 1 220px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; font: inherit; background: transparent; color: var(--ink); }
form.subscribe .button { padding: 8px 16px; border: 0; border-radius: 4px; background: var(--accent); color: var(--on-accent); font: inherit; cursor: pointer; }

/* the trees below */
footer.site { background: var(--leaf); color: var(--leaf-ink); padding: 24px 0 32px; font-size: 15px; }
footer.site h3 { margin-top: 0; }
footer.site a { color: var(--sky-light); }

/* price lists (the cafe menu): name on the left, price on the right */
main table { border-collapse: collapse; width: 100%; max-width: 420px; margin: 0 0 18px; font-size: 16px; }
main thead:has(th:empty) { display: none; }
main td { padding: 5px 4px; border-bottom: 1px solid var(--rule); }
main td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--date); font-weight: 600; }
main h3 { margin: 22px 0 6px; }

/* photographs in pages (the cafe) */
main figure { margin: 0 0 20px; }
main figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
main figcaption { font: 14px system-ui, sans-serif; color: var(--muted); margin-top: 5px; }
main img.portrait { float: right; width: 150px; height: auto; margin: 4px 0 12px 20px; border-radius: 4px; }
.dish { margin: 0 0 22px; }
.dish::after { content: ""; display: block; clear: both; }
.dish img { float: right; width: 45%; max-width: 340px; height: auto; margin: 4px 0 10px 22px; border-radius: 4px; }
@media (max-width: 600px) {
  .dish img { float: none; display: block; width: 100%; max-width: none; margin: 0 0 8px; }
  main img.portrait { width: 110px; }
}
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0 0 28px; }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; }

/* the archive: a year by month table of past events, and the videos */
.archive-scroll { overflow-x: auto; margin: 0 0 6px; }
main table.archive-years { max-width: none; width: 100%; font: 14px system-ui, sans-serif; }
main table.archive-years th { font-weight: 600; color: var(--muted); padding: 4px 3px; text-align: center; }
main table.archive-years tr > th:first-child { text-align: left; color: var(--ink); padding-right: 8px; }
main table.archive-years td { text-align: center; padding: 4px 3px; color: inherit; font-weight: normal; }
main table.archive-years td a { display: block; text-decoration: none; border-radius: 3px; background: var(--sky-wash); }
main table.archive-years td a:hover { background: var(--sky-light); }
.archive-hint { color: var(--muted); font-size: 14px; }
ul.videos { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
ul.videos a { display: block; color: var(--ink); text-decoration: none; position: relative; }
ul.videos img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--rule); }
ul.videos .video-title { display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; }
ul.videos a:hover .video-title { color: var(--accent); text-decoration: underline; }
ul.videos .video-length { position: absolute; right: 6px; top: 6px; background: rgba(0, 0, 0, .75); color: #fff; font: 12px system-ui, sans-serif; padding: 1px 5px; border-radius: 3px; }