/* Anything But AI: a plain page with real paintings. */

:root {
  --bg: #ffffff;
  --text: #141414;
  --muted: #5f5f5f;
  --rule: #dcdcdc;
  --link: #1a0dab;
  --visited: #681da8;
  --frame: rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --text: #e6e6e6;
    --muted: #a3a3a3;
    --rule: #333333;
    --link: #8ab4f8;
    --visited: #c58af9;
    --frame: transparent;
  }
}
:root[data-theme="dark"] {
  --bg: #121212;
  --text: #e6e6e6;
  --muted: #a3a3a3;
  --rule: #333333;
  --link: #8ab4f8;
  --visited: #c58af9;
  --frame: transparent;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 19px/1.6 "Libre Caslon Text", Georgia, "Times New Roman", serif;
}

/* One left-aligned column of text; pictures are allowed to run wider. */
.page {
  padding: 72px 16px 56px clamp(16px, 10vw, 128px);
}
.page > *,
.paintings > h2,
.paintings > p,
.day > :not(.feature) { max-width: 640px; }
.page > .day { max-width: 880px; }
.page > .paintings { max-width: 980px; }

h1 { font-size: 34px; line-height: 1.15; margin: 0 0 18px; }
h2 { font-size: 22px; line-height: 1.3; margin: 0 0 14px; }
p { margin: 0 0 16px; }

a { color: var(--link); }
a:visited { color: var(--visited); }

.small { font-size: 15px; color: var(--muted); }
cite { font-style: italic; }

section { margin-top: 64px; }
.intro p:last-child { margin-bottom: 0; }

/* ---------- today ---------- */

.feature { margin: 0 0 56px; }
.feature img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  box-shadow: 0 0 0 1px var(--frame);
}
.feature figcaption { margin-top: 14px; max-width: 640px; }
.feature .cite { margin-bottom: 2px; }
.feature .small { margin-bottom: 12px; }

.verse span {
  display: block;
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.original { color: var(--muted); }
.reading .cite { margin-bottom: 4px; }
.day-nav { margin-top: 24px; }

/* ---------- gallery ---------- */

.gallery {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  columns: 3;
  column-gap: 28px;
}
.gallery li {
  break-inside: avoid;
  margin: 0 0 28px;
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--frame);
}
.gallery p { margin: 8px 0 0; line-height: 1.45; }

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

footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); }
footer p { margin: 0; }

@media (max-width: 760px) {
  .gallery { columns: 2; column-gap: 16px; }
  .gallery li { margin-bottom: 20px; }
}

@media (max-width: 600px) {
  body { font-size: 18px; }
  .page { padding-top: 44px; }
  h1 { font-size: 29px; }
  section { margin-top: 48px; }
  .feature { margin-bottom: 40px; }
  .feature img { max-height: none; }
}