/*
  The public pages, wearing the app's clothes.

  Same palette as apps/mobile/src/theme.ts, same rule about the serif: it is for
  headings and the wordmark and nothing else, because in the app it is reserved
  for exhibition titles — the content, the thing that belongs on a wall label.
  Everything a reader navigates by is the system font.

  Kept as plain CSS with no build step. These pages have to be editable by
  somebody who is not currently holding this repo's toolchain in their head,
  and they change about twice a year.
*/

:root {
  --background: #faf9f7;
  --surface: #ffffff;
  --ink: #1a1917;
  --ink-soft: #57544d;
  --ink-faint: #736e66;
  --line: #e5e2dc;
  --line-strong: #908e8b;
  --accent: #8c4a2f;
  --accent-soft: #f2e7e1;
  --on-accent: #ffffff;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #141311;
    --surface: #1d1b18;
    --ink: #f2efe9;
    --ink-soft: #b6b0a6;
    --ink-faint: #948f85;
    --line: #2e2b26;
    --line-strong: #746c60;
    --accent: #d98e6a;
    --accent-soft: #33251e;
    /* NEVER white on accent in dark mode — 2.62:1, fails AA. See theme.ts. */
    --on-accent: #141311;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  /* No literal line-height on text that scales — the app's rule, and browsers
     honour a unitless ratio the same way. */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

header.site {
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  padding-bottom: 16px;
}

.wordmark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
}

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.3;
  margin: 40px 0 8px;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 24px 0 4px;
}

.standfirst {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

p,
li {
  color: var(--ink-soft);
}

p {
  margin: 0 0 16px;
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

li {
  margin-bottom: 6px;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* A block a venue is meant to copy. Selectable, scrollable, never wrapped in a
   way that would change what it means. */
pre {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

p > code,
li > code {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 6px;
}

.note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 24px;
}

.note p:last-child {
  margin-bottom: 0;
}

.caption {
  font-size: 15px;
  color: var(--ink-faint);
  margin: 0 0 24px;
}

dl {
  margin: 0 0 16px;
}

dt {
  color: var(--ink);
  font-weight: 600;
  margin-top: 16px;
}

dd {
  margin: 2px 0 0;
  color: var(--ink-soft);
}

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding-top: 16px;
  font-size: 15px;
  color: var(--ink-faint);
}

footer.site a {
  margin-right: 16px;
  display: inline-block;
}

.updated {
  font-size: 15px;
  color: var(--ink-faint);
  margin-top: 40px;
}