/* PRAASA 2027 - Western Washington Area 72 */

:root {
  --bg: #ffffff;
  --surface: #f2f5f9;
  --ink: #16202b;
  --ink-muted: #4a5765;
  --accent: #10508f;
  --rule: #d3dbe4;
  --measure: 44rem;

  /* Three sizes and one emphasis weight for the whole page: a size to
     read at, a size for the headings you scan for, and the title. Only
     three rules set a size at all - everything else inherits, so there
     is no way for an element to drift off the scale.

     Size is reserved for structure. A line that matters because of
     what it says rather than where it sits - the dates, the countdown
     - says so in weight and colour and stays at the reading size. */
  --text-base: 1.125rem;
  --text-md: 1.375rem;
  --text-lg: 2.25rem;
  --weight-strong: 600;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161d;
    --surface: #18212b;
    --ink: #e7edf4;
    --ink-muted: #a9b6c4;
    --accent: #8dbdf2;
    --rule: #2b3743;
  }
}

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

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

body {
  margin: 0 auto;
  padding: 1.25rem 1.25rem 4rem;
  max-width: var(--measure);
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Top bar */

/* The menu and the language picker sit in one band ahead of the
   artwork, but never on one row. They are different kinds of thing -
   places to go, and which language you are reading in - so the band
   gives each its own row at every width. The old layout let them share
   a row until the window got too narrow and then reflowed, which meant
   the picker aligned left or right depending on how much room there
   was, and a menu long enough to wrap broke wherever it happened to
   land. A menu of six or seven items would have done that on a desktop
   too. */
.topbar {
  margin-bottom: 2rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--surface);
}

.topbar ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Navigation menu */

/* Plain words, spaced apart, with the current one underlined in the
   accent. A menu of seven will not sit on one row on a phone and only
   just does on a desktop, so it has to wrap - and wrapped words read
   as a menu that continues, where wrapped buttons read as a pile. The
   underline is what says which page you are on; nothing is dimmed to
   say it, because dimming is the convention for unavailable. */
.menu a,
.menu [aria-current] {
  display: block;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
}

.menu a:hover {
  border-bottom-color: var(--rule);
}

.menu [aria-current] {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: var(--weight-strong);
}

/* Language picker */

/* A setting rather than another place to go. It keeps its own row
   under a hairline so a reader never has to pick it out from among the
   pages - two navigations competing in one row is the commonest way a
   bar like this goes wrong. Both languages are named in their own
   words, which is the one thing every guide on this agrees about. */
.lang {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
}

.lang ul {
  justify-content: flex-end;
}

.lang a,
.lang [aria-current] {
  display: block;
  padding: 0.1rem 0;
}

.lang [aria-current] {
  font-weight: var(--weight-strong);
}

/* Banner */

.banner {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

/* Sized in rem so the emblem scales with the reader's own font size, and
   capped at the column so a narrow screen never has to scroll sideways.
   It centres on the banner's own text alignment like everything else
   here; vertical-align keeps it off the baseline, which would otherwise
   leave a gap under it. */
.logo {
  width: 15rem;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
  vertical-align: middle;
}

/* The banner says two things, in this order: which gathering this is,
   and when it happens. The only wide gap in the stack falls between
   them, so the grouping a reader sees is the grouping the content has.
   Everything else sits close to its neighbour. */

h1 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.2;
  font-weight: var(--weight-strong);
}

/* Below the title rather than above it: it expands an acronym, and an
   expansion that arrives before the name it explains is just a longer
   name the reader has no use for yet. */
.eyebrow {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  line-height: 1.4;
  text-wrap: balance;
}

.host {
  margin: 0.15rem 0 0;
  color: var(--ink-muted);
  text-wrap: balance;
}

.dates {
  margin: 1rem 0 0;
  color: var(--accent);
  font-weight: var(--weight-strong);
}

/* Figures that change under the reader, set in tabular numerals so the
   line does not jitter sideways each time a digit rolls over. */
.countdown {
  margin: 0.15rem 0 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-strong);
}

/* Content */

main {
  padding-top: 0.5rem;
}

section + section {
  margin-top: 2.5rem;
}

h2 {
  margin: 2rem 0 1rem;
  font-size: var(--text-md);
  line-height: 1.25;
  font-weight: var(--weight-strong);
}

/* A paragraph break has to be wider than the leading, or the space that
   separates two paragraphs reads as no more than the space between two
   lines of one, and the break stops registering as a break. */
p {
  margin: 0 0 1.75rem;
}

/* Scoped to the prose. These are rules about how a list of statements
   reads; a navigation list is a row of destinations and wants none of
   them. Left unscoped, the spacing between bullets reaches the top bar
   and pushes every item after the first out of line with it. */
main ul {
  margin: 0 0 1.75rem;
  padding-left: 1.25rem;
}

main li + li {
  margin-top: 0.85rem;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* Footer */

footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
}

footer p {
  margin: 0;
}

/* A phone column cannot carry the reading size: at 390px it was
   holding under 40 characters a line, short enough that the eye spends
   its time returning rather than reading, and centred banner lines
   were dropping a single word onto a line of its own. The type comes
   down to the browser's own default and the leading tightens with it.
   This is the same rank of text set for a smaller page, not a fourth
   size. */
@media (max-width: 30rem) {
  body {
    padding: 1rem 1rem 3rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}