/* The events, /events and one event's own page (lib/events-view.mjs), linked after site.css by those pages alone, so no
   other page changes. The model is Cooper Hewitt's events: the date is the head of each row, the facts sit in ruled
   label-and-value lines; one action, New America's. The directory's space system and rules: his paragraphs' 27 px line
   (--lh), a line and a half (--g) under a head and between the parts of a block, two lines (--r) between blocks, four
   (--s) under the last; a blue rule over a list and a hairline under each row. */
.ev { --lh: 27px; --g: 40.5px; --r: 54px; --s: 108px; }
@media (max-width: 1100px) { .ev { --s: 81px; } }
body.ev > header.site { padding-top: var(--head-top); }

/* ---- the list --------------------------------------------------------------------------------------------------------- */
.ehead { padding-top: calc(var(--r) - 8.4px - 9.8px); }
.ehead h1 { color: var(--blue); font-size: 56px; line-height: 1.05; }
.eline { margin-top: 22px; max-width: 24em; font: 500 21px/1.45 "Libre Franklin", sans-serif; text-wrap: pretty; }
.emain { padding-top: var(--r); padding-bottom: var(--s); }
.elabel { font: 600 16px/1.4 "Libre Franklin", sans-serif; color: #000; }
.elabel.was { margin-top: var(--r); }
.elist { list-style: none; margin-top: calc(var(--lh) / 2); border-top: 2px solid var(--blue); }
.erow { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 32px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.edate { display: flex; flex-direction: column; align-items: flex-start; align-self: start; color: var(--blue); text-decoration: none; }
.edate .emon, .edate .ewk { font: 600 15px/18px "Libre Franklin", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.edate .eday { font: 700 64px/58px "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; margin: 6px 0 4px; }
.edate .ewk { color: var(--quiet); }
.ebody { align-self: start; }
.ename { font-size: 30px; line-height: 34px; color: var(--blue); text-wrap: balance; }
.ename a { color: inherit; text-decoration: none; }
.ename a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ewhen { margin-top: 10px; font: 600 18px/26px "Libre Franklin", sans-serif; }
.ewhere { margin-top: 2px; font: 400 18px/26px "Libre Franklin", sans-serif; color: var(--quiet); }
.erow > .btn { white-space: nowrap; }
/* the past: the same rows, a step behind */
.past .erow { padding: 20px 0; grid-template-columns: 112px minmax(0, 1fr); }
.past .edate .eday { font-size: 40px; line-height: 38px; }
.past .ename { font-size: 22px; line-height: 27px; }
.past .ewhen, .past .ewhere { font-size: 16px; line-height: 23px; }
.past .ewhen { margin-top: 6px; font-weight: 400; color: var(--quiet); }
.eempty { border-top: 2px solid var(--blue); padding-top: var(--g); }
.enone { font: 700 30px/34px "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.eto { margin-top: 10px; font: 500 21px/1.45 "Libre Franklin", sans-serif; }
.eempty .btn { margin-top: 24px; }

/* ---- one event --------------------------------------------------------------------------------------------------------- */
.epage { padding-top: calc(var(--r) - 9px); padding-bottom: var(--s); }
.epage > * { max-width: 760px; }
.eback { font: 600 16px/1.4 "Libre Franklin", sans-serif; }
.eback a { color: var(--blue); text-underline-offset: 4px; }
.ebig { margin-top: var(--g); display: flex; flex-direction: column; align-items: flex-start; color: var(--blue); }
.ebig .ewk { font: 600 18px/22px "Libre Franklin", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.ebig .ed { font: 700 104px/96px "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; margin-top: 8px; }
.ebig .et { font: 700 40px/44px "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; margin-top: 4px; }
.epage h1.ename { margin-top: var(--g); font-size: 40px; line-height: 46px; color: #000; }
.efacts { margin-top: var(--g); border-top: 2px solid var(--blue); }
.efacts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 32px; padding: 18px 0 19px; border-bottom: 1px solid var(--rule); }
.efacts dt { font: 600 16px/27px "Libre Franklin", sans-serif; color: var(--quiet); }
.efacts dd { font: 400 18px/27px "Libre Franklin", sans-serif; }
.efacts dd a[href^="mailto"], .efacts dd a[href^="tel"] { color: var(--blue); text-underline-offset: 4px; }
.efacts .emap { display: inline-block; margin-left: 12px; font-weight: 600; color: var(--blue); text-underline-offset: 4px; }
.eact { margin-top: var(--g); display: flex; flex-wrap: wrap; align-items: center; column-gap: 32px; row-gap: 20px; }
.eact .btn { padding-inline: 38px; }
.ecal { font: 600 17px/1.4 "Libre Franklin", sans-serif; color: var(--blue); text-underline-offset: 4px; }
.epassed { margin-top: var(--g); font: 600 18px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); }
.gone h1 { color: var(--blue); font-size: 44px; line-height: 1.1; margin-bottom: 28px; }

/* ---- a desktop's short window: the event's page in one screen ------------------------------------------------------- */
@media (min-width: 1101px) and (max-height: 960px) {
  .ebig { margin-top: var(--lh); }
  .ebig .ed { font-size: 88px; line-height: 82px; }
  .epage h1.ename, .efacts, .eact { margin-top: var(--lh); }
}

/* ---- a phone: one screen an event ------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .ev { --g: 27px; --r: 40.5px; }
  .ehead { padding-top: calc(var(--r) - 8.1px - 7px); }
  .ehead h1 { font-size: 40px; }
  .eline { font-size: 18px; margin-top: 14px; }
  .erow { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; row-gap: 20px; padding: 22px 0 24px; align-items: start; }
  .erow > .btn { grid-column: 2; justify-self: start; }
  .edate .emon, .edate .ewk { font-size: 13px; line-height: 16px; }
  .edate .eday { font-size: 44px; line-height: 40px; margin: 4px 0 3px; }
  .ename { font-size: 24px; line-height: 28px; }
  .ewhen { margin-top: 8px; font-size: 16px; line-height: 23px; }
  .ewhere { font-size: 16px; line-height: 23px; }
  .past .erow { grid-template-columns: 64px minmax(0, 1fr); padding: 16px 0; }
  .past .edate .eday { font-size: 32px; line-height: 30px; }
  .past .ename { font-size: 19px; line-height: 24px; }
  .past .ewhen, .past .ewhere { font-size: 15px; line-height: 21px; }
  .enone { font-size: 24px; line-height: 28px; }
  .eto { font-size: 18px; }
  .epage { padding-top: calc(var(--r) - 9px); }
  .ebig { margin-top: 16px; }
  .ebig .ewk { font-size: 15px; line-height: 18px; }
  .ebig .ed { font-size: 58px; line-height: 54px; margin-top: 6px; }
  .ebig .et { font-size: 28px; line-height: 32px; }
  .epage h1.ename { margin-top: 18px; font-size: 26px; line-height: 31px; }
  .efacts { margin-top: 18px; }
  /* 72 px holds the longest label, "Speakers", inside its own column (the deploy's check, November 11, 2026) */
  .efacts > div { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; padding: 9px 0 10px; }
  .efacts dt { font-size: 14px; line-height: 23px; }
  .efacts dd { font-size: 16px; line-height: 23px; }
  .eact { margin-top: 20px; row-gap: 14px; }
  .eact .btn { width: 100%; text-align: center; }
  .eact .ecal { width: 100%; text-align: center; }
}

/* ---- the RSVP on the event's own page (lib/events-view.mjs rsvpBlock), November 11, 2026 ----------------------------------
   Mobilize's event page: the sign-up beside the facts. On a desktop the page is the home page's sign-up row (the words, then
   the form in a 400 px column, 80 px apart, site.css .in); the form's fields are the sign-up's own (52 px, the blue rule
   under each, the label in 600 14 px above). On a phone it follows the facts, cut to fit the first screen. */
.ecols { display: block; }
.ersvp { margin-top: var(--g); border-top: 2px solid var(--blue); padding-top: 22px; scroll-margin-top: 24px; }
.rgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; }
.rf { display: block; min-width: 0; }
.rf.rname, .rf.remail, .rf.rnote { grid-column: 1 / -1; }
.rf > span { display: block; font: 600 14px/1.4 "Libre Franklin", sans-serif; margin-bottom: 6px; }
.rf > span i { font-style: normal; font-weight: 400; color: var(--quiet); margin-left: 4px; }
.rf input, .rf select { display: block; width: 100%; height: 52px; border: 0; border-bottom: 2px solid var(--blue); background-color: #fff; padding: 0 14px; border-radius: 0; font: 400 17px/1 "Libre Franklin", sans-serif; color: #000; }
.rf input[aria-invalid], .rf select[aria-invalid] { border-color: #B3261E; }
.rcheck { display: flex; gap: 12px; align-items: center; margin-top: 20.4px; font: 500 16px/1.4 "Libre Franklin", sans-serif; cursor: pointer; }
.rcheck input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
.ract { margin-top: 20.4px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 14px; }
.ract .btn { padding-inline: 38px; }
.rstatus { margin-top: 12px; font: 500 15px/1.45 "Libre Franklin", sans-serif; color: #B3261E; }
.rstatus:empty { display: none; }
.rtrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rwho { font: 400 18px/27px "Libre Franklin", sans-serif; }
.rwho b { font-weight: 700; }
.rmember .rcheck { margin-top: 14px; }
/* the thanks in the form's place: one head, the day and time with the arrive line, the calendar, and the change of mind */
.rdone:focus { outline: none; }
.rhead { font: 700 30px/34px "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); text-wrap: balance; }
.rwhen { margin-top: 14px; font: 400 18px/27px "Libre Franklin", sans-serif; }
.rwhen b { font-weight: 700; }
.rline { margin-top: 10px; font: 400 18px/27px "Libre Franklin", sans-serif; }
.rmail { color: var(--quiet); font-size: 16px; line-height: 24px; }
.rcal { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; row-gap: 4px; font: 600 17px/1.4 "Libre Franklin", sans-serif; }
.rcal span { flex-basis: 100%; color: #000; }
.rcal a { color: var(--blue); text-underline-offset: 4px; }
.rturn { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.rout .rturn { border-top: 0; padding-top: 0; }
.rcancel { border: 0; background: none; padding: 0; cursor: pointer; font: 600 16px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); text-decoration: underline; text-underline-offset: 4px; }
.rcancel:hover { color: var(--blue); }

@media (min-width: 1101px) {
  .withrsvp .ecols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr; column-gap: 80px; align-items: start; }
  .withrsvp .eabout { max-width: 760px; grid-column: 1; grid-row: 1; }
  /* the rest of the facts run on under When and Where as one list; the form stands beside both */
  .withrsvp .emore { max-width: 760px; grid-column: 1; grid-row: 2; margin-top: 0; border-top: 0; }
  .withrsvp .ersvp { grid-column: 2; grid-row: 1 / span 2; }
  .withrsvp > * { max-width: none; }
  /* the form's rule stands on the line the big date's head starts on */
  .withrsvp .ersvp { margin-top: var(--g); position: sticky; top: 24px; }
}
@media (min-width: 1101px) and (max-height: 960px) {
  .withrsvp .ersvp { margin-top: var(--lh); }
}

/* a tablet: the form under the facts, at the facts' width */
@media (max-width: 1100px) { .withrsvp .ersvp { max-width: 760px; } .withrsvp .emore { max-width: 760px; } }

/* a phone: the facts and the form in the first screen. The big date and the When row say the same thing, so the row
   goes; the fields stand two to a row where they fit (phone and how many), the labels in their own 13 px */
@media (max-width: 760px) {
  .withrsvp .eback { display: none; }
  .withrsvp .ebig { margin-top: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .withrsvp .ebig .ewk { flex-basis: 100%; }
  .withrsvp .ebig .ed { font-size: 40px; line-height: 42px; margin-top: 2px; }
  .withrsvp .ebig .et { font-size: 22px; line-height: 26px; margin-top: 0; }
  .withrsvp h1.ename { margin-top: 10px; font-size: 22px; line-height: 27px; }
  .withrsvp .efacts { margin-top: 12px; }
  .withrsvp .emore { margin-top: 24px; }   /* clear of the form's button */
  .withrsvp .efacts .fwhen { display: none; }
  .withrsvp .efacts > div { padding: 7px 0 8px; }
  .withrsvp .efacts dd, .withrsvp .efacts dt { font-size: 15px; line-height: 21px; }
  .withrsvp .efacts .fpress { display: none; }   /* the footer's Press line carries it on a phone */
  .ersvp { margin-top: 0; border-top: 0; padding-top: 10px; }
  .rgrid { gap: 8px 12px; }
  /* the label set inside its field, small, over what is typed: a phone's form in one screen */
  .rf { position: relative; }
  .rf > span { position: absolute; left: 12px; top: 6px; margin: 0; font-size: 12px; line-height: 15px; color: var(--quiet); pointer-events: none; }
  .rf > span i { margin-left: 3px; }
  .rf input, .rf select { height: 50px; padding: 17px 12px 0; font-size: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
  .rcheck { margin-top: 17px; font-size: 15px; gap: 10px; }
  .ract { margin-top: 14px; row-gap: 10px; }
  .ract .btn { width: 100%; text-align: center; padding: 16px 20px; }
  .ract .ecal { display: none; }
  .rhead { font-size: 24px; line-height: 28px; }
  .rwhen, .rline, .rwho { font-size: 16px; line-height: 23px; }
  .rmail { font-size: 15px; line-height: 21px; }
  .rcal { font-size: 16px; margin-top: 14px; }
  .rturn { margin-top: 16px; padding-top: 14px; }
  .rout .ract .btn { width: 100%; }
}