/* 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);
}

/* Maintenance notice */

/* Temporary, and the first thing on the front page, so a reader learns
   registration is down before reaching the link that would fail them.
   Drawn as a panel with an accent edge so it cannot be taken for part
   of the banner beneath it. */
.maintenance {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--surface);
  font-weight: var(--weight-strong);
  text-align: center;
}

/* 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.

   One size on every page. The emblem used to be larger on the front
   page than below it, and since it sits in the same place on both, the
   difference read as the page jumping under a reader moving between
   them. What it says does not change from page to page, so neither
   does its size.

   It sits between the two sizes it replaced. Larger is what the front
   page can carry and the pages below it cannot: register, volunteer
   and refund are a line of placeholder text each, and an emblem big
   enough to announce an assembly leaves them nothing but emblem. */
.logo {
  width: 12rem;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
  vertical-align: middle;
}

.site {
  margin: 0 0 0.3rem;
  color: var(--ink-muted);
  font-weight: var(--weight-strong);
}

/* When the assembly is, under the site's name on every page below the
   front one. A reader books a hotel room from whichever page they
   happened to land on, and telephones a hotel from it too, so the
   nights they are booking have to be in front of them there rather
   than one page away.

   Set like the line above it rather than like the dates on the front
   page. There the dates are the announcement and carry the accent;
   here they stand in the header on every page, and a colour that means
   "this is the thing" on five pages at once stops meaning it anywhere.
   The two lines read as one block - what this is, and when - with the
   wider gap falling after them, before the page's own title. */
.when {
  margin: 0 0 0.9rem;
  color: var(--ink-muted);
  font-weight: var(--weight-strong);
}

/* 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;
}

/* Where to be, which is the one thing the venue page exists to answer.
   It sits centred under the title rather than ranged in the column: an
   address is three lines a reader takes in at once, not prose they
   read into, and centring is how every invitation and every map pin
   has ever set one.

   Prominence comes from the accent and the emphasis weight, the same
   way the dates carry it on the front page, and it stays at the
   reading size - it is not a heading, and size here is reserved for
   structure. The space beneath it is wider than a paragraph's, so the
   first section below reads as a section rather than as the next
   line. */
.address {
  margin: 0 0 2.75rem;
  color: var(--accent);
  font-weight: var(--weight-strong);
  text-align: center;
}

/* The announcement that opens the front page: the two ways to
   register, online and by mail, in a panel of their own. Drawn like
   the top bar, so it reads as something to act on rather than as more
   of the prose below it, and stood off from the banner so it does not
   look like the countdown's last line.

   The two ways are set alike, in the emphasis weight at the reading
   size. Neither is a heading, and setting one plainer than the other
   would rank them when the committee takes both. */
.registration {
  margin: 1.5rem 0 2.75rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--surface);
  font-weight: var(--weight-strong);
  text-align: center;
}

.registration .online {
  margin: 0 0 1.5rem;
}

/* Names the flyer below it, so it closes up against the flyer rather
   than standing off as a paragraph of its own. */
.registration .mail-in {
  margin: 0 0 0.75rem;
}

/* Narrower than the column, so the preview reads as a page you can
   open rather than as the page you are on. The hairline gives a white
   flyer an edge against the panel, light or dark. */
.flyer {
  margin: 0;
  text-align: center;
}

.flyer img {
  width: 20rem;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  vertical-align: middle;
}

/* 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 list inside an item belongs to the line above it - the rates under
   Westin Parking are that item, itemised, not three more items beside
   it. So it closes up against its line instead of carrying the gap
   that separates one statement from the next, and its own items sit
   nearer each other than the statements outside do. Left to the rules
   above, the nested list ends on a paragraph's worth of space and the
   item after it reads as belonging to nothing. */
main li ul {
  margin: 0.35rem 0 0;
}

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

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;
  }
}