/* Without this, every width here is content-box: the flyout's 430px became
   470px with padding, and the signup field's width:100% overflowed its
   column. */
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }
a { color: #AE2012; }
a:hover { color: #15110C; }

/* app.css sets `h1, h2, h3 { color: var(--heading) }` for the inner pages,
   which is navy — and navy on the near-black band made "Nobody told them to
   do this" all but invisible. Every heading on this page should take the
   colour of whatever it sits on instead: ivory inside the dark band, ink
   everywhere else, including in the dialogs. One rule, eight headings. */
.broadsheet h1,
.broadsheet h2,
.broadsheet h3 { color: inherit; }

/* The nav band: five links and the JOIN US button on one rule-bounded line.
   The first link's negative margin puts its text, not its hover field, on
   the column edge. */
.navband {
  grid-area: nav;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
  border-top: 3px double #15110C;
  border-bottom: 1px solid #15110C;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.navlink {
  padding: 9px 15px;
  color: #15110C;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.navlink:first-child { margin-left: -15px; }
.navlink:hover,
.navlink:focus-visible {
  background: #EBE3D2;
  color: #AE2012;
}
/* The one nav item with a glyph: a red play mark, so the video reads as a
   thing to press rather than another section to read. */
.navwatch { display: inline-flex; align-items: center; gap: 7px; }
.navwatch svg { color: #AE2012; }

.joinbtn {
  margin-left: auto;
  padding: 9px 16px;
  background: #AE2012;
  color: #FBF8F1;
  cursor: pointer;
  transition: background 140ms ease;
}
.joinbtn:hover,
.joinbtn:focus-visible {
  background: #15110C;
  color: #FBF8F1;
}

/* The front, as one grid. Three equal columns on a desktop: the masthead, the
   nav band and the headline take the first two, and the event box takes the
   third from the top of the page down, so it starts level with the logo and
   runs through the nav rules into the lead story. The rules stop dead at the
   column gap — the box breaks the horizontal structure instead of obeying it.
   The three lead paragraphs sit in the row beneath, one per column, so the
   third always starts below the box: a taller box pushes the row down rather
   than covering it. Two columns on a tablet (the story beside the box) and
   one on a phone, below. */

/* The account bar (app.css) on the front page: .front's column exactly, so
   its words and button sit on the masthead's and the event box's edges, and
   the masthead's 24px of top air doubled beneath it. */
.broadsheet .account-bar { margin-bottom: 24px; }
.broadsheet .account-bar-inner { max-width: 1180px; padding-inline: 32px; }

.front {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  grid-template-areas:
    "mast mast box"
    "nav  nav  box"
    "lead lead box"
    "p1   p2   p3";
}

/* Pushed right, so the title and the strapline end on the same vertical as
   the JOIN US button. The title is sized from the room it actually has
   (container units on .mastline), never from the viewport, so it holds one
   line at every width: it measures about 9.8em, so 9.6cqi leaves it a little
   air. The strapline is 0.3 of the title's size, which is the ratio at which
   the two share one measure; it justifies to close the last few pixels, and
   its negative right margin offsets the trailing letter-space. */
.masthead {
  grid-area: mast;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0 14px;
}
.mastline {
  flex: 1 1 auto;
  min-width: 0;
  container-type: inline-size;
  display: flex;
  justify-content: flex-end;
}
.mastblock { width: fit-content; max-width: 100%; }
.masttitle {
  font-family: 'Playfair Display', serif;
  font-size: min(50px, 9.6cqi);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-align: right;
  white-space: nowrap;
}
.maststrap {
  margin: 0.87em -0.18em 0 0;
  font-size: min(15px, 2.88cqi);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6A6254;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
}
.maststrap span { white-space: nowrap; }

.lead { grid-area: lead; padding: 28px 0 24px; }
.leadkicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #AE2012;
}
.lead h1 {
  margin: 12px 0 16px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.028em;
}
.leaddek {
  max-width: 46ch;
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.3;
  color: #3C372E;
}
/* On a desktop the wrapper steps aside and each paragraph takes a column of
   the front; on narrower screens it becomes one column of running text. */
.leadtext { display: contents; }
.leadtext p { margin: 0; font-size: 15px; line-height: 1.62; color: #3C372E; }
.leadtext p:nth-child(1) { grid-area: p1; }
.leadtext p:nth-child(2) { grid-area: p2; }
.leadtext p:nth-child(3) { grid-area: p3; }

.eventbox {
  grid-area: box;
  align-self: start;
  margin: 26px 0 24px;
  border: 1px solid #15110C;
  background: #F5F0E4;
  scroll-margin-top: 20px;
}

/* Panellist names in the callout jump to their own entry below. They stay
   set as names, with a hairline rule to say they are clickable. */
.panelname {
  color: #15110C;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #C9BFA8;
}
.panelname:hover,
.panelname:focus-visible { color: #AE2012; border-bottom-color: #AE2012; }

/* Quote portraits: circular, cropped to the face via per-image
   object-position. All freely licensed; credits run under the block. */
.face {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid #CFC7B6;
  background: #E6DFCE;
}

/* So an anchored name does not land hard against the top of the window. */
.panelcard { scroll-margin-top: 24px; }

/* The panel opens as a dialog centred in the viewport, driven by a hidden
   checkbox at the top of the page. Not :target and not component state: this
   runtime handles in-artboard '#' links itself without setting the URL hash,
   so :target never matches, and a checkbox is the one mechanism that needs
   nothing from the script at all. Every small flyout icon beside a panellist's
   name is a <label> for it, as are the scrim and the close button. */
/* The radios sit at the top of the document, but clicking a label focuses
   its radio, and the browser scrolls a focused control into view — which
   threw the page back to the masthead whenever the primer was opened from
   further down. position: fixed keeps them inside the viewport at all times,
   so there is nothing to scroll to. Sibling selectors go by DOM order, not
   layout, so the dialogs still match. */
.dlgtoggle {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
/* While any dialog is open the page under it holds still. Otherwise a wheel
   or swipe over a dialog with nothing left to scroll moved the page behind
   it instead. The gutter stays reserved, so the page does not shift sideways
   when its scrollbar goes. */
html { scrollbar-gutter: stable; }
html:has(.dlgtoggle:checked:not(#dlg-none)) { overflow: hidden; }

/* The small flyout icon that sits to the right of each name. */
.flyicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 3px;
  vertical-align: -3px;
  color: #AE2012;
  cursor: pointer;
  border: 1px solid #CFC7B6;
  background: #FBF8F1;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.flyicon:hover { background: #AE2012; color: #FBF8F1; border-color: #AE2012; }
.flyicon svg { display: block; }

.paneldlg {
  display: none;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 24px;
}
/* One rule per dialog. The radios are siblings of every .paneldlg, so the
   checked one shows its own and nothing else can be checked at the same time. */
#watch-open:checked ~ .paneldlg.d-watch { display: grid; }
#panel-open:checked ~ .paneldlg.d-panel { display: grid; }
#join-open:checked ~ .paneldlg.d-join { display: grid; }
#primer-open:checked ~ .paneldlg.d-primer { display: grid; }
#volunteer-open:checked ~ .paneldlg.d-volunteer { display: grid; }
#educate-open:checked ~ .paneldlg.d-educate { display: grid; }
#organize-open:checked ~ .paneldlg.d-organize { display: grid; }
#notices-open:checked ~ .paneldlg.d-notices { display: grid; }
#events-open:checked ~ .paneldlg.d-events { display: grid; }
#confirm-open:checked ~ .paneldlg.d-confirm { display: grid; }
#welcome-open:checked ~ .paneldlg.d-welcome { display: grid; }
#remove-open:checked ~ .paneldlg.d-remove { display: grid; }
#check-open:checked ~ .paneldlg.d-check { display: grid; }
#notfound-open:checked ~ .paneldlg.d-notfound { display: grid; }
/* What we keep is a checkbox, not one of the radios, so it opens over Join
   us and closing it leaves Join us where it was. Later in the DOM and one
   z-index up, so it is the one on top. */
#privacy-open:checked ~ .paneldlg.d-privacy { display: grid; z-index: 110; }

/* Join us dialog. Plain ivory, like the panel — nothing here needs a colour
   field of its own. Its job is to make the case for joining: the four things
   we do, then the one field that starts it. */
.joinbody h2 {
  margin: 0 0 8px;
  font-family: 'Playfair Display', serif;
  font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12;
}
/* Primer dialog: a numbered reading, watching and listening list. Wider than
   the others because every row is a title plus a source. */
.d-primer .paneldlg-box { width: min(880px, 100%); }
.primergrp { margin-top: 20px; }
.primergrp:first-of-type { margin-top: 0; }
/* Black rather than the red used for kickers elsewhere: these sit directly on
   their own rule, and red on black read as two competing signals. */
.primerhd {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #15110C;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid #15110C;
}
/* No rule and no gap between items — they read as one block of lines, with
   the only rule under each group heading. The flex row keeps the number
   hanging outside the text, which a plain <br> list would not. */
.primeritem {
  display: flex; gap: 12px;
  font-size: 13.5px; line-height: 1.5;
}
.primernum {
  flex: none; width: 22px;
  font-weight: 700; color: #6A6254;
  font-variant-numeric: tabular-nums;
}
.primeritem a { font-weight: 600; text-decoration: none; }
.primeritem a:hover, .primeritem a:focus-visible { text-decoration: underline; }
.primermeta { color: #6A6254; }
/* Anything that opens the primer. Set as a link, clickable as a label. */
.primerlink {
  color: #AE2012; cursor: pointer;
  font: inherit; font-weight: 600;
  border-bottom: 1px solid #DCC7C2;
}
.primerlink:hover { color: #15110C; border-bottom-color: #15110C; }

/* Wider than the panel dialog: these carry two columns of blocks plus a form,
   and should not need a scrollbar to show them. */
.d-join .paneldlg-box,
.d-notices .paneldlg-box { width: min(840px, 100%); }
/* Events (EventsList.razor): the kinds as small pills, then one event per
   row on the same hairlines as the four ways in Join us. */
.d-events .paneldlg-box { width: min(760px, 100%); }
/* Joining's dialogs (CheckEmailDialog, ConfirmJoinDialog, WelcomeDialog,
   RemoveDialog) and Not found: the short ones are narrower than Join us. */
.d-confirm .paneldlg-box,
.d-remove .paneldlg-box,
.d-notfound .paneldlg-box { width: min(600px, 100%); }
.d-welcome .paneldlg-box, .d-check .paneldlg-box { width: min(760px, 100%); }
.d-confirm .joinform, .d-welcome .joinform, .d-remove .joinform, .d-check .joinform,
.d-notfound .joinform { margin-top: 18px; padding-top: 16px; border-top-color: #CFC7B6; }
.d-confirm .joinway { margin-top: 14px; }
/* The quiet way out beside the main button: a link, never a second button. */
.confirm-alt, .signup .confirm-alt {
  display: inline; margin: 0;
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: #4A443A; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.confirm-alt:hover, .confirm-alt:focus-visible,
.signup .confirm-alt:hover, .signup .confirm-alt:focus-visible { color: #AE2012; }
.eventsbody .joinlede { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: #4A443A; }
.evfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.evfilter a {
  padding: 4px 11px; border: 1px solid #CFC7B6; border-radius: 999px;
  font-size: 12.5px; line-height: 1.4; text-decoration: none; color: #4A443A;
}
.evfilter a:hover, .evfilter a:focus-visible { border-color: #15110C; color: #15110C; }
.evfilter a[aria-current="page"] { background: #15110C; border-color: #15110C; color: #FBF8F1; }
.evlist { list-style: none; margin: 0; padding: 0; }
.evlist > li { padding: 12px 0; border-top: 1px solid #CFC7B6; }
.evlist > li:last-child { border-bottom: 1px solid #CFC7B6; }
.evlist h3 {
  margin: 0 0 4px;
  font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 800; line-height: 1.2;
}
.evlist h3 a { color: #15110C; text-decoration: none; }
.evlist h3 a:hover, .evlist h3 a:focus-visible { color: #AE2012; text-decoration: underline; }
.evmeta { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; font-size: 13.5px; color: #4A443A; }
.evroom { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #AE2012; }
.evtags { margin: 4px 0 0; font-size: 12.5px; color: #6A6254; }
.evempty, .evaside { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: #4A443A; }
.evlink { color: #AE2012; font-weight: 600; text-decoration: underline; cursor: pointer; }
.evlink:hover { color: #15110C; }
.joinbody .joinlede { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: #4A443A; }
/* Two columns, so the four ways fit the dialog without it scrolling. Each
   one carries its own rule, so the pairs read as a block. */
.joinways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 15px;
}
.joinway { padding-top: 12px; border-top: 1px solid #CFC7B6; }
@media (max-width: 620px) { .joinways { grid-template-columns: 1fr; } }
.joinway-k {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #AE2012; margin-bottom: 4px;
}
.joinway p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4A443A; }
.joinway p code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; color: #15110C; }
.joinform { margin-top: 22px; padding-top: 18px; border-top: 1px solid #15110C; }
.joinform-ask { margin: 0 0 14px; font-size: 14px; font-weight: 600; line-height: 1.55; color: #15110C; }
.paneldlg-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(21, 17, 12, 0.55);
}
.paneldlg-box {
  position: relative;
  width: min(560px, 100%);
  /* The viewport less .paneldlg's padding, not a percentage: inside the
     centring grid a percentage resolves against nothing, and a long dialog
     ran off the bottom of a phone with no way to scroll to its button. dvh
     where it is known, so a phone's address bar does not hide the bottom. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: #FBF8F1;
  border: 1px solid #15110C;
  box-shadow: 0 18px 50px rgba(21, 17, 12, 0.4);
  animation: dlg-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* A short laptop screen gets the dialog closer to its edges, so Join us
   still fits without scrolling. */
@media (max-height: 760px) {
  .paneldlg { padding-block: 12px; }
  .paneldlg-box { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.paneldlg-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #15110C;
  color: #FBF8F1;
  /* padding-left matches .paneldlg-body, so the title starts on the same
     vertical as the text under it. */
  padding: 11px 11px 11px 24px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.paneldlg-x {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  color: #FBF8F1;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
}
.paneldlg-x:hover, .paneldlg-x:focus-visible { background: #AE2012; color: #FBF8F1; border-color: #AE2012; }
/* contain: reaching the end of a long dialog does not hand the scroll on. */
.paneldlg-body { overflow: auto; overscroll-behavior: contain; padding: 22px 24px 24px; }

.flyname { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.flyrole { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #AE2012; margin: 3px 0 6px; }
.flybio { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4A443A; }

/* Watch dialog. The poster is drawn here rather than fetched from YouTube, so
   opening the dialog costs the reader nothing and tells Google nothing. It is
   a 16:9 field of ink with a red play button; the player replaces it in the
   same box, so nothing shifts when it starts. The ring around the button
   pulses slowly, the only thing on the page that asks to be pressed. */
.d-watch .paneldlg-box { width: min(880px, 100%); }
.watchframe { position: relative; aspect-ratio: 16 / 9; background: #15110C; }
.watchposter,
.watchvideo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watchposter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: #FBF8F1;
  text-decoration: none;
}
.watchposter[hidden] { display: none; }
.watchposter:hover { color: #FBF8F1; }
.watchposter:focus-visible { outline: 3px solid #E8714F; outline-offset: -6px; }
.watchkicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #E8714F;
}
.watchtitle {
  max-width: 20ch;
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.watchplay {
  position: relative;
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  /* Optically centre the triangle, whose mass sits left of its box. */
  padding-left: 5px;
  background: #AE2012;
  color: #FBF8F1;
  transition: background 140ms ease, color 140ms ease;
}
.watchplay::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #E8714F;
  animation: watch-pulse 2.4s ease-out infinite;
}
@keyframes watch-pulse {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.55); }
}
.watchposter:hover .watchplay,
.watchposter:focus-visible .watchplay { background: #FBF8F1; color: #AE2012; }
.watchcta { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.watchmeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6A6254;
}
/* A phone gives the poster about 190px of height: room for the title and the
   button, not the lines either side of them. */
@media (max-width: 560px) {
  .watchkicker, .watchcta { display: none; }
  .watchplay { width: 58px; height: 58px; }
  .watchplay svg { width: 20px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .paneldlg-box { animation: none; }
  .watchplay::after { animation: none; display: none; }
}

/* Mailing list. Lives in the Join us dialog, on ivory. 46px minimum target
   height on the field and the button. */
.signup { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.signup label {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #AE2012; margin-bottom: 6px;
}
.signup input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #15110C;
  background: #FBF8F1;
  color: #15110C;
  font: inherit;
  font-size: 15px;
}
.signup input::placeholder { color: #8C8276; }
.signup input:focus-visible { outline: 3px solid #AE2012; outline-offset: 2px; }
.signup button, .signupbtn {
  display: inline-block;
  text-decoration: none;
  min-height: 46px;
  padding: 10px 24px;
  border: 1px solid #15110C;
  background: #15110C;
  color: #FBF8F1;
  font: inherit;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
/* The button is a mailto, which does nothing at all for a reader with no mail
   client set up, or inside a sandboxed preview. The address is therefore also
   printed in plain, selectable text beside it — there is always a way through. */
.signuprow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.signupalt { font-size: 13px; line-height: 1.5; color: #4A443A; }
.signupalt b { color: #15110C; font-weight: 600; }

/* 10 + 26 + 10 = the 46px minimum target height, since an anchor does not
   centre its text the way a button does. */
.signupbtn { line-height: 26px; }
.signup button:hover, .signup button:focus-visible,
.signupbtn:hover, .signupbtn:focus-visible { background: #AE2012; border-color: #AE2012; color: #FBF8F1; }
.signup-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: #6A6254; }

/* The join form in the Join us dialog (JoinForm.razor), with ManyHands on. */
/* It borrows .signup's field and button; the labels keep .signup's small
   red capitals, the ticks below go back to ordinary text. */
/* Compact on purpose: on a laptop the whole dialog should fit without a
   scroll bar, so name and email share a row and the small print sits
   beside the button. */
/* The same hairline as the rules between the four ways above it. */
.d-join .joinform { margin-top: 18px; padding-top: 16px; border-top-color: #CFC7B6; }
/* A label, so it opens What we keep with no script, but it reads as a link:
   .signup's small red capitals on labels do not apply to it. */
.signup .joinnote-link {
  display: inline; margin: 0;
  font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #15110C; text-decoration: underline; cursor: pointer;
}
.signup .joinnote-link:hover { color: #AE2012; }

/* What we keep: the privacy page's Markdown, set in the dialog's type.
   Narrower and shorter than Join us, so it plainly sits on top of it. */
.d-privacy .paneldlg-box {
  width: min(680px, 100%);
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
}
.privacybody h2 {
  margin: 22px 0 6px; padding-top: 12px; border-top: 1px solid #CFC7B6;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #AE2012;
}
.privacybody p, .privacybody li { font-size: 14px; line-height: 1.6; color: #4A443A; }
.privacybody p { margin: 0 0 10px; }
.privacybody ul { margin: 0 0 10px; padding-left: 1.2em; }
.privacybody li { margin-bottom: 5px; }
.privacybody strong { color: #15110C; }
.privacybody a { color: #15110C; font-weight: 600; }
.privacyback { margin-top: 20px; }
.joinfields { display: grid; gap: 12px; }
@media (min-width: 620px) {
  .joinfields { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .joinfields > :not(label) { grid-column: 1 / -1; }
}
.joinfields > label { display: grid; gap: 6px; margin: 0; align-content: start; }
.joinfields .vol-interests label { text-transform: none; letter-spacing: 0; margin: 0; }
.joinfields .vol-interests { border: 0; margin: 0; padding: 0; display: grid; gap: 6px 16px; }
@media (min-width: 480px) { .joinfields .vol-interests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .joinfields .vol-interests { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.joinfields .signuprow { flex-wrap: nowrap; }
@media (max-width: 479px) { .joinfields .signuprow { flex-wrap: wrap; } }
.joinnote { font-size: 12.5px; line-height: 1.5; color: #6A6254; }
.joinfields .vol-interests legend {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #AE2012; padding: 0; margin-bottom: 8px;
}
.joinfields .vol-interests label { display: flex; gap: 9px; align-items: flex-start; }
.joinfields .vol-interests label > span { font-size: 14px; font-weight: 400; color: #4A443A; }
.joinfields .vol-interests input { width: 18px; min-height: 0; height: 18px; margin: 1px 0 0; padding: 0; flex: none; accent-color: #AE2012; }
.joinfields .validation-message, .joinerror {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: #AE2012;
}
.joinfields .signuprow { margin-top: 2px; }
/* Join always looks pressable. A gray button read as a broken one, and said
   nothing about what was missing; pressing it instead lets the browser point
   at the empty field ("required", and the name's pattern refuses only
   spaces). The server checks the same again. */
.joindone { padding: 16px 18px; border-left: 4px solid #AE2012; background: #F3EEE3; }
.joindone p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #4A443A; }
.joindone .joindone-head { margin-bottom: 6px; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: #15110C; }

/* Resource box, a sibling of the event box in treatment. */
.speed { border: 1px solid #15110C; background: #F5F0E4; scroll-margin-top: 20px; }
.speedhead { background: #15110C; color: #FBF8F1; padding: 9px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.speedcol + .speedcol { border-left: 1px solid #CFC7B6; }
.speeditem { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #4A443A; }
.speeditem:last-child { margin-bottom: 0; }
.speeditem b { display: block; font-size: 14px; color: #15110C; font-weight: 700; }

/* The logo file carries about 17% dead margin on each side and 13-15% top and
   bottom inside its own viewBox. Scaling it just scales the emptiness, so the
   mark is cropped to its true bounding box (x 211-1049, y 183-1104 of 1254):
   the window is the artwork's real size, and the image is enlarged and offset
   behind it. --s scales the window and the offsets together, for smaller
   screens. */
.mark {
  --s: 1;
  position: relative;
  flex: none;
  width: calc(219px * var(--s));
  height: calc(240px * var(--s));
  overflow: hidden;
}
.mark img {
  position: absolute;
  top: calc(-48px * var(--s));
  left: calc(-55px * var(--s));
  width: calc(327px * var(--s));
  height: calc(327px * var(--s));
  filter: brightness(0);
}

/* The four figures under the lead. Rules run between neighbours only, so the
   band reads as one strip at four across, a two-by-two block on a tablet and
   a list on a phone; each layout redraws its own rules. The figure is sized
   from its own cell (container units), so "They knew" never breaks. */
.statband { border-top: 1px solid #15110C; border-bottom: 1px solid #15110C; background: #F5F0E4; }
.stats {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat { container-type: inline-size; padding: 24px 26px; border-left: 1px solid #CFC7B6; }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }
.statnum {
  font-family: 'Playfair Display', serif;
  font-size: min(42px, 20cqi);
  font-weight: 900;
  color: #AE2012;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.stattext { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: #4A443A; }

/* Tablet. The masthead and headline run full width, and the lead story sits
   beside the event box. The logo steps down a size. Below 1024px two thirds
   of the page is too narrow for the nav on one line, so this is where the
   three columns give way. */
@media (max-width: 1023px) {
  .front {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "mast mast"
      "nav  nav"
      "lead lead"
      "text box";
  }
  .leadtext { display: block; grid-area: text; }
  .leadtext p + p { margin-top: 16px; }
  .eventbox { margin: 0; }
  .mark { --s: 0.8; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; padding-right: 26px; border-left: 0; }
  .stat:nth-child(even) { padding-left: 26px; padding-right: 0; border-left: 1px solid #CFC7B6; }
  .stat:nth-child(n+3) { border-top: 1px solid #CFC7B6; }
}

/* Under 680px the six nav items no longer fit one line, and wrapping them
   strands JOIN US on a line of its own. They become a three-by-two grid
   instead, JOIN US as the last cell. */
@media (max-width: 679px) {
  .navband {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }
  .navlink, .joinbtn { margin: 0; padding: 13px 4px; text-align: center; }
  .navlink:first-child { margin-left: 0; }
  .navwatch { justify-content: center; }
  .navband > :nth-child(-n+3) { border-bottom: 1px solid #CFC7B6; }
}

/* Phone. One column; the nameplate stacks and centres, the way a paper's does
   on its narrow editions. The strapline may wrap here, between phrases, so it
   centres rather than justifies. */
@media (max-width: 639px) {
  .front {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mast" "nav" "lead" "text" "box";
  }
  .eventbox { margin-top: 28px; }

  .masthead { flex-direction: column; gap: 14px; }
  .mark { --s: 0.62; }
  .mastline { width: 100%; justify-content: center; }
  .masttitle { text-align: center; }
  .maststrap {
    margin-right: 0;
    font-size: max(10px, 2.88cqi);
    letter-spacing: 0.12em;
    text-align: center;
    text-align-last: center;
    white-space: normal;
  }

  .lead h1 { font-size: clamp(32px, 9.6vw, 40px); }
  .lead h1 br { display: none; }

  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats .stat { padding: 20px 0; border-left: 0; border-top: 0; }
  .stats .stat + .stat { border-top: 1px solid #CFC7B6; }
}

@media (max-width: 400px) {
  .navband { letter-spacing: 0.06em; }
}