/*
  The privacy policy page. Every colour is a token from base.css.

  This file sits at the site root beside base.css rather than inside privacy/,
  because some hosts serve privacy/index.html at /privacy with no trailing slash,
  and from there a sibling reference would resolve against the root and miss.
*/

.site-header {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  text-decoration: underline;
}

.page h1 {
  font-size: 2.25rem;
  margin: 1.5rem 0 0.5rem;
}

.meta {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

.lede {
  font-size: 1.125rem;
}

/*
  The event table opens on a click. The sentence above it is the promise, and
  the eighteen rows are there for anyone who wants to hold us to it, without
  eighteen rows of machine names in the middle of a page people read on a phone.

  A details element, so this costs no script on a site that has none, and the
  rows stay in the page for a screen reader or a search engine to reach. It
  hides nothing from anyone determined: it shortens the page for a person.
*/
.event-list {
  margin: 0 0 1.5rem;
}

.event-list > summary {
  cursor: pointer;
  color: var(--lamp-ink);
  padding: 0.35rem 0;
  width: fit-content;
}

.event-list > summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.event-list[open] > summary {
  margin-bottom: 0.75rem;
}

/* Printed, the table is part of the document rather than something to click. */
@media print {
  .event-list::details-content {
    content-visibility: visible;
  }
}

/* The events table scrolls inside its own frame at phone width, never the page. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background: var(--surface);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}

th {
  font-weight: 600;
}

tr:last-child td {
  border-bottom: none;
}