/**
 * Friends of Bulgaria - Why it matters (Context) section
 *
 * Covers the overview page and the shared sub-page template. Shared primitives
 * (.container, .btn, .eyebrow, .section-header, .donate-cta, .page-head) come
 * from the global stylesheets and about.css.
 */

/* =========================================
   Breadcrumb and sub-page heading
   ========================================= */

.breadcrumb {
  padding-top: 26px;
  font-size: 0.86rem;
  color: var(--fob-grey-3);
}

.breadcrumb a {
  color: var(--fob-red);
  font-weight: var(--fob-font-weight-semibold);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  margin: 0 8px;
}

.page-head--sub {
  padding-top: 22px;
}

.page-head--sub h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* =========================================
   Section navigation

   Sits directly under the heading as a tinted band, so a reader can move
   across the section without returning to the main menu.
   ========================================= */

.section-nav {
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.section-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 30px;
}

.section-nav__label {
  padding: 16px 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
}

.section-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-nav__list a {
  display: inline-block;
  padding: 16px 0;
  font-size: 0.92rem;
  font-weight: var(--fob-font-weight-medium);
  color: var(--fob-ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.section-nav__list a:hover {
  color: var(--fob-red);
}

.section-nav__list a[aria-current] {
  color: var(--fob-red);
  font-weight: var(--fob-font-weight-semibold);
  border-bottom-color: var(--fob-red);
}

/* =========================================
   The turning point
   ========================================= */

.context-turn {
  padding: var(--fob-section-pad) 0;
}

.context-turn__grid {
  display: grid;
  grid-template-columns: 1.45fr 0.7fr;
  gap: 56px;
  align-items: start;
}

.context-turn h2 {
  font-size: var(--fob-font-size-h2);
  margin-bottom: 20px;
}

.context-turn p {
  color: var(--fob-ink-soft);
  margin-bottom: 1.1rem;
}

.context-turn p strong {
  color: var(--fob-ink);
  font-weight: var(--fob-font-weight-semibold);
}

.findings {
  background-color: var(--fob-grey-1);
  border-left: 3px solid var(--fob-red);
  border-radius: 0 var(--fob-radius-lg) var(--fob-radius-lg) 0;
  padding: 24px 26px;
}

.findings ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.findings li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fob-ink-soft);
  padding: 9px 0;
  border-bottom: 1px solid var(--fob-line);
}

.findings li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 860px) {
  .context-turn__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =========================================
   What changed — the headline pair
   ========================================= */

.context-shift {
  padding: var(--fob-section-pad) 0;
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.context-shift h2 {
  font-size: var(--fob-font-size-h2);
  margin-bottom: 14px;
}

.context-shift__intro {
  color: var(--fob-ink-soft);
  margin-bottom: 40px;
}

.counts {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 720px;
}

.count {
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-lg);
  padding: 26px 28px;
  text-align: center;
}

.count b {
  display: block;
  font-family: var(--fob-serif);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: var(--fob-font-weight-heading);
  line-height: 1;
  color: var(--fob-red);
}

/* The current figure is the good news; green rather than red. */
.count--now b {
  color: var(--fob-green);
}

.count span {
  display: block;
  margin-top: 9px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-ink-soft);
}

.count__arrow {
  font-family: var(--fob-serif);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--fob-grey-3);
  text-align: center;
}

.context-shift__second {
  margin-top: 26px;
  color: var(--fob-ink-soft);
}

.context-shift__second strong {
  color: var(--fob-ink);
  font-weight: var(--fob-font-weight-semibold);
}

@media (max-width: 640px) {
  .counts {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .count__arrow {
    transform: rotate(90deg);
  }
}

/* =========================================
   Where those children are now

   A proportional bar: green for family-based placements, red for group
   settings, so the split reads before any of the numbers do.
   ========================================= */

.context-where {
  padding: var(--fob-section-pad) 0;
}

.context-where .section-header {
  margin-bottom: 36px;
}

.cbar {
  display: flex;
  height: 56px;
  border: 1px solid var(--fob-line);
  border-radius: 6px;
  overflow: hidden;
}

.cbar__seg {
  display: block;
  height: 100%;
}

.cbar__seg--kin {
  background-color: var(--fob-green);
}

.cbar__seg--foster {
  background-color: var(--fob-green-light);
}

.cbar__seg--resi {
  background-color: var(--fob-red);
}

.cbar__seg--inst {
  background-color: var(--fob-red-deep);
}

.clegend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 22px;
  list-style: none;
  padding: 0;
}

.clegend__item {
  border-top: 3px solid var(--fob-line);
  padding-top: 12px;
}

.clegend__item--kin {
  border-top-color: var(--fob-green);
}

.clegend__item--foster {
  border-top-color: var(--fob-green-light);
}

.clegend__item--resi {
  border-top-color: var(--fob-red);
}

.clegend__item--inst {
  border-top-color: var(--fob-red-deep);
}

.clegend b {
  display: block;
  font-family: var(--fob-serif);
  font-size: 1.7rem;
  font-weight: var(--fob-font-weight-heading);
  line-height: 1;
  color: var(--fob-ink);
}

.clegend__label {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-ink);
}

.clegend__note {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fob-ink-soft);
}

.context-where__split {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--fob-line);
  color: var(--fob-ink-soft);
}

.context-where__split strong {
  color: var(--fob-ink);
  font-weight: var(--fob-font-weight-semibold);
}

@media (max-width: 860px) {
  .clegend {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .clegend {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   What is still hard
   ========================================= */

.context-hard {
  padding: var(--fob-section-pad) 0;
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
}

.issues {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--fob-line);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-lg);
  overflow: hidden;
}

.issue {
  background-color: var(--fob-white);
  padding: 24px 26px;
}

.issue h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fob-sans);
  font-size: 1rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: normal;
  margin-bottom: 6px;
}

.issue h3::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  background-color: var(--fob-red);
}

.issue p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fob-ink-soft);
}

@media (max-width: 860px) {
  .issues {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Where we come in
   ========================================= */

.context-fit {
  padding: var(--fob-section-pad) 0;
  background-color: var(--fob-green-quote);
  color: var(--fob-white);
  text-align: center;
}

.context-fit .container {
  max-width: 860px;
}

.context-fit h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--fob-white);
  margin-bottom: 18px;
}

.context-fit p {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 26px;
}

.context-fit__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.context-fit .btn--line {
  color: var(--fob-white);
}

/* =========================================
   Sub-page prose
   ========================================= */

/* The foot of a sub-page stacked three full section paddings in a row — the
   prose's bottom, then the pager's top and bottom — leaving roughly 170px of
   empty column before the donate band. Halved at each junction; the top of the
   prose is untouched, since that spacing is doing real work. */
.context-prose {
  padding: var(--fob-section-pad) 0 var(--fob-space-xl);
}

.context-prose h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: 18px;
}

/* The old site used h6 for a section heading throughout — "Patrons of the
   Summer Dance", "Northamptonshire Astwell Benefice" — so the smaller levels
   read as the section headings they are rather than as something below body
   text, which is what a browser makes of an h6 left alone. */
.context-prose h3,
.context-prose h4,
.context-prose h5,
.context-prose h6 {
  font-family: var(--fob-sans);
  font-size: 1.05rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: normal;
  color: var(--fob-color-heading);
  line-height: var(--fob-line-height-tight);
  margin: 28px 0 8px;
}

.context-prose p {
  color: var(--fob-ink-soft);
  margin-bottom: 1.1rem;
}

.context-prose p strong {
  color: var(--fob-ink);
  font-weight: var(--fob-font-weight-semibold);
}

.context-prose ul,
.context-prose ol {
  margin: 0 0 1.1rem 1.2rem;
  color: var(--fob-ink-soft);
}

.context-prose li {
  margin-bottom: 0.4rem;
  list-style: disc;
}

.context-prose blockquote {
  border-left: 3px solid var(--fob-red);
  background-color: var(--fob-grey-1);
  border-radius: 0 var(--fob-radius-lg) var(--fob-radius-lg) 0;
  padding: 20px 24px;
  margin: 0 0 1.1rem;
  font-family: var(--fob-serif);
  font-size: 1.14rem;
  line-height: 1.45;
}

/* =========================================
   Document lists
   ========================================= */

.context-docs {
  padding: var(--fob-section-pad) 0;
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.context-docs__group + .context-docs__group {
  margin-top: 44px;
}

.context-docs__heading {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-bottom: 6px;
}

.doclist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fob-line);
}

.doclist__item {
  border-bottom: 1px solid var(--fob-line);
}

.doclist__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  text-decoration: none;
}

.doclist__link:hover .doclist__title {
  color: var(--fob-red);
  text-decoration: underline;
}

.doclist__title {
  display: block;
  font-size: 1.02rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-ink);
}

.doclist__meta {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  color: var(--fob-ink-soft);
}

.doclist__tag {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-sm);
  padding: 5px 10px;
  white-space: nowrap;
}

.doclist__tag--pdf {
  color: var(--fob-red);
  border-color: var(--fob-red-soft);
}

/* Named on the old site but never linked; shown, not hidden. */
.doclist__link--plain {
  cursor: default;
}

.doclist__link--plain .doclist__title {
  color: var(--fob-ink-soft);
}

@media (max-width: 640px) {
  .doclist__link {
    grid-template-columns: 1fr;
  }

  .doclist__tag {
    justify-self: start;
  }
}

/* =========================================
   Previous / next
   ========================================= */

.pager {
  padding: var(--fob-space-xl) 0;
}

.pager__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pager__link {
  display: block;
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-lg);
  padding: 22px 24px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.pager__link:hover {
  border-color: var(--fob-red);
}

.pager__link--next {
  text-align: right;
}

.pager__dir {
  display: block;
  margin-bottom: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
}

.pager__title {
  display: block;
  font-family: var(--fob-serif);
  font-size: 1.2rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
}

@media (max-width: 640px) {
  .pager__inner {
    grid-template-columns: 1fr;
  }

  .pager__link--next {
    text-align: left;
  }
}

/* =========================================
   Voices — first-hand accounts

   Cards cope with having very little: some of this arrived as photo captions
   rather than full accounts, so a card may carry only a line. Photo optional.
   ========================================= */

.voices {
  padding: var(--fob-section-pad) 0;
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.voices__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.voice {
  display: flex;
  flex-direction: column;
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-lg);
  overflow: hidden;
}

.voice__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--fob-grey-2);
}

.voice__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}

/* Without a photograph the card would read as an empty box; a red rule at the
   head gives it the same visual weight as one that has an image. */
.voice--no-photo .voice__body {
  border-top: 3px solid var(--fob-red);
}

.voice__where {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red);
  margin-bottom: 12px;
}

.voice__quote {
  font-family: var(--fob-serif);
  font-size: 1.24rem;
  font-weight: var(--fob-font-weight-normal);
  line-height: 1.4;
  color: var(--fob-ink);
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.voice__quote::before {
  content: "\201C";
}

.voice__quote::after {
  content: "\201D";
}

.voice__account {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fob-ink-soft);
  margin-bottom: 14px;
}

.voice__who {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--fob-line);
  font-size: 0.92rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-ink);
}

.voice__role {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  margin-top: 2px;
}

@media (max-width: 760px) {
  .voices__list {
    grid-template-columns: 1fr;
  }
}

.voice__more {
  margin-bottom: 14px;
}

/* Distinguishes a piece published elsewhere from our own accounts. */
.voice__source {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: var(--fob-font-weight-normal);
  color: var(--fob-grey-3);
}

/* =========================================
   Project Partners
   ========================================= */

.partners-aims,
.partners-sites {
  padding: var(--fob-section-pad) 0;
}

.partners-providers {
  padding: var(--fob-section-pad) 0;
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.provider-card {
  display: flex;
  flex-direction: column;
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-left: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-lg);
  padding: 24px 26px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.provider-card:hover {
  transform: translateY(-3px);
}

.provider-card__name {
  font-family: var(--fob-serif);
  font-size: 1.28rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
  margin-bottom: 6px;
}

.provider-card__note {
  flex: 1;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--fob-ink-soft);
  margin-bottom: 14px;
}

.provider-card__more {
  font-size: 0.88rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red);
}

/* The table is wide; it scrolls inside its own box rather than pushing the
   page sideways. */
.sites-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-lg);
}

.sites-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background-color: var(--fob-white);
}

.sites-table th,
.sites-table td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fob-line);
  vertical-align: top;
}

.sites-table thead th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  background-color: var(--fob-grey-1);
  white-space: nowrap;
}

.sites-table tbody th {
  font-family: var(--fob-serif);
  font-size: 1.04rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
  white-space: nowrap;
}

.sites-table td {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--fob-ink-soft);
}

.sites-table tbody tr:last-child th,
.sites-table tbody tr:last-child td {
  border-bottom: 0;
}

.sites-table tbody tr:hover th,
.sites-table tbody tr:hover td {
  background-color: var(--fob-grey-1);
}

@media (max-width: 760px) {
  .provider-grid {
    grid-template-columns: 1fr;
  }
}

/* Four items in a three-column grid leaves an empty cell showing the grid's
   background through the gap. Pairs divide evenly. */
.issues--pairs {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 860px) {
  .issues--pairs {
    grid-template-columns: 1fr;
  }
}

.site-status {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fob-font-weight-semibold);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-sm);
  padding: 4px 9px;
  white-space: nowrap;
}

.site-status--current {
  color: var(--fob-green);
  border-color: var(--fob-green);
}

.site-status--past {
  color: var(--fob-grey-3);
}

/* =========================================
   Our Supporters
   ========================================= */

.supporters-people,
.supporters-ways {
  padding: var(--fob-section-pad) 0;
}

.supporters-past {
  padding: var(--fob-section-pad) 0;
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.supporter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.supporter-card {
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-top: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-lg);
  padding: 24px 26px;
}

/* A supporter whose details have not arrived yet: plainly unfinished, so it
   cannot be mistaken for an anonymous donor and is easy to find before this
   goes live. */
.supporter-card--todo {
  border: 1px dashed var(--fob-line);
  border-top: 3px dashed var(--fob-grey-2);
  background-color: var(--fob-grey-1);
}

.supporter-card--todo .supporter-card__name,
.supporter-card--todo .supporter-card__gift {
  color: var(--fob-grey);
}

.supporter-card__name {
  font-family: var(--fob-serif);
  font-size: 1.24rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
  margin-bottom: 4px;
}

.supporter-card__role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  margin-bottom: 12px;
}

.supporter-card__gift {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--fob-ink-soft);
}

.supporters-past__heading {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-bottom: 6px;
}

.supporters-past__note {
  color: var(--fob-ink-soft);
  margin-bottom: 22px;
}

/* Names read as a row of marks rather than a bulleted list. */
.supporters-past__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.supporters-past__list li {
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-md);
  padding: 12px 20px;
  font-family: var(--fob-serif);
  font-size: 1.08rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
}

@media (max-width: 760px) {
  .supporter-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Contact
   ========================================= */

.contact-people,
.contact-where {
  padding: var(--fob-section-pad) 0;
}

.contact-where {
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-top: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-lg);
  padding: 24px 26px;
}

.contact-card__name {
  font-family: var(--fob-serif);
  font-size: 1.24rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
  margin-bottom: 4px;
}

.contact-card__role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  margin-bottom: 12px;
}

.contact-card__for {
  flex: 1;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--fob-ink-soft);
  margin-bottom: 16px;
}

/* Addresses are long; let them wrap rather than push the card wider. */
.contact-card__email {
  font-size: 0.9rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red);
  text-decoration: none;
  word-break: break-word;
}

.contact-card__email:hover {
  color: var(--fob-red-deep);
  text-decoration: underline;
}

.contact-where__grid {
  display: grid;
  grid-template-columns: 1.45fr 0.7fr;
  gap: 56px;
  align-items: start;
}

.contact-where h2 {
  font-size: var(--fob-font-size-h2);
  margin-bottom: 20px;
}

.contact-address {
  font-style: normal;
  font-family: var(--fob-serif);
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--fob-ink);
  margin-bottom: 16px;
}

.contact-address span {
  display: block;
}

.contact-phone {
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.contact-phone a {
  color: var(--fob-red);
  font-weight: var(--fob-font-weight-semibold);
  text-decoration: none;
}

.contact-phone a:hover {
  text-decoration: underline;
}

.contact-charity {
  font-size: 0.86rem;
  color: var(--fob-grey-3);
}

.contact-donate {
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-left: 3px solid var(--fob-red);
  border-radius: 0 var(--fob-radius-lg) var(--fob-radius-lg) 0;
  padding: 24px 26px;
}

.contact-donate p {
  color: var(--fob-ink-soft);
  margin-bottom: 12px;
}

.contact-donate p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-where__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =========================================
   Fundraising — ways to give
   ========================================= */

.give-methods,
.give-giftaid,
.events-upcoming,
.events-past {
  padding: var(--fob-section-pad) 0;
}

.give-giftaid,
.events-past {
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.give-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.give-card {
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-top: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-lg);
  padding: 26px 28px;
}

.give-card h3 {
  font-family: var(--fob-serif);
  font-size: 1.28rem;
  font-weight: var(--fob-font-weight-heading);
  margin-bottom: 8px;
}

.give-card p {
  color: var(--fob-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 14px;
}

.give-card p:last-child {
  margin-bottom: 0;
}

/* Account details are reference data — set them apart from the prose. */
.bank-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0;
  padding: 16px 18px;
  background-color: var(--fob-grey-1);
  border-radius: var(--fob-radius-md);
}

.bank-details dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  align-self: center;
}

.bank-details dd {
  margin: 0;
  font-family: var(--fob-serif);
  font-size: 1.04rem;
  color: var(--fob-ink);
}

.give-giftaid__grid {
  display: grid;
  grid-template-columns: 1.45fr 0.7fr;
  gap: 56px;
  align-items: start;
}

.give-giftaid h2 {
  font-size: var(--fob-font-size-h2);
  margin-bottom: 20px;
}

.give-giftaid p {
  color: var(--fob-ink-soft);
  margin-bottom: 1.1rem;
}

.give-giftaid__aside {
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-left: 3px solid var(--fob-red);
  border-radius: 0 var(--fob-radius-lg) var(--fob-radius-lg) 0;
  padding: 24px 26px;
}

.give-giftaid__sum {
  font-family: var(--fob-serif);
  font-size: 1.4rem;
  color: var(--fob-ink);
  margin-bottom: 14px;
}

.give-giftaid__sum span {
  color: var(--fob-red);
  font-weight: var(--fob-font-weight-heading);
}

/* =========================================
   Events
   ========================================= */

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fob-line);
}

.event-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--fob-line);
}

/* The date carries the list, so it is set to be read at a glance rather than
   whispered — past evenings included. */
.event-row__day {
  display: block;
  font-family: var(--fob-serif);
  font-size: 1.6rem;
  font-weight: var(--fob-font-weight-heading);
  line-height: 1.1;
  color: var(--fob-red);
}

.event-row__year {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--fob-ink);
}

/* The title is the only thing to click on the row, so it takes the site's
   link colour rather than reading as a heading that happens to be clickable. */
.event-row__title {
  font-family: var(--fob-serif);
  font-size: 1.24rem;
  font-weight: var(--fob-font-weight-heading);
  margin-bottom: 4px;
}

.event-row__title a {
  color: var(--fob-red);
  text-decoration: none;
}

.event-row__title a:hover,
.event-row__title a:focus-visible {
  color: var(--fob-red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The photograph of the evening, in the margin of its listing. */
.event-row__figure {
  float: left;
  display: block;
  width: 180px;
  margin: 4px var(--fob-space-md) var(--fob-space-sm) 0;
}

.event-row__figure img {
  display: block;
  width: 180px;
  height: 125px;
  object-fit: cover;
  border-radius: var(--fob-radius-sm);
}

/* A banner, not a photograph: shown whole rather than cropped to a sliver. */
.event-row__figure--wide img {
  height: auto;
  object-fit: fill;
}

/* Contain the float so one evening's picture cannot run into the next. */
.event-row__body::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 640px) {
  .event-row__figure,
  .event-row__figure img {
    float: none;
    width: 100%;
  }

  .event-row__figure {
    margin: 0 0 var(--fob-space-sm);
  }
}

.event-row__meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  margin-bottom: 8px;
}

.event-row__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fob-ink-soft);
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .give-grid,
  .give-giftaid__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .event-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Former patrons carry a note, so they are a list rather than name chips. */
.former-patrons {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.former-patrons li {
  padding: 12px 0;
  border-bottom: 1px solid var(--fob-line);
}

.former-patrons li:first-child {
  border-top: 1px solid var(--fob-line);
}

.former-patrons__name {
  display: block;
  font-family: var(--fob-serif);
  font-size: 1.08rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
}

.former-patrons__note {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--fob-ink-soft);
}


/* The project entries, when a page lists them above its own text. */
.project-list {
  padding: var(--fob-section-pad) 0 0;
}


/* A pointer to what was written about the evening afterwards. The report is a
   news item and lives there; reprinting it here said everything twice. */
.event-report {
  padding: var(--fob-space-lg) 0 0;
}

.event-report__link {
  display: block;
  padding: var(--fob-space-md) var(--fob-space-lg);
  background-color: var(--fob-grey-1);
  border-left: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-md);
  text-decoration: none;
}

.event-report__label {
  display: block;
  font-size: var(--fob-font-size-small);
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: var(--fob-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fob-grey);
}

.event-report__title {
  display: block;
  margin-top: var(--fob-space-xs);
  font-family: var(--fob-serif);
  font-size: 1.15rem;
  font-weight: var(--fob-font-weight-heading);
  line-height: var(--fob-line-height-tight);
  color: var(--fob-red);
}

.event-report__link:hover .event-report__title,
.event-report__link:focus-visible .event-report__title {
  color: var(--fob-red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The pointer to that account, from the listing. */
.event-row__report {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: var(--fob-font-weight-semibold);
}

.event-row__report a {
  color: var(--fob-red);
  text-decoration: none;
}

.event-row__report a:hover,
.event-row__report a:focus-visible {
  color: var(--fob-red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* An invitation, set out as it is on the live site: centred, each line its own
   short phrase. Only the invitations are centred there; the older write-ups
   are ordinary prose and stay ranged left. */
.single-event__invitation {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.single-event__invitation p {
  margin: 0 0 var(--fob-space-sm);
}

.single-event__invitation p:last-child {
  margin-bottom: 0;
}

.single-event__invitation ul,
.single-event__invitation ol {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--fob-space-sm);
}

/* Needs the extra class to outweigh .context-prose p > img, which floats an
   imported picture 500px wide down the left — wrong for an invitation, where
   the picture belongs on the centre line with the words. */
.context-prose .single-event__invitation img {
  float: none;
  display: block;
  width: auto;
  /* Held by height rather than width, so a portrait — Poli Genova on the 2016
     gala page — comes down to a sensible size while a wide sponsors strip
     still runs the measure. */
  max-height: 320px;
  max-width: 100%;
  height: auto;
  margin: var(--fob-space-md) auto;
}


/* A page that folds itself at the More tag. The reader gets the opening and
   opens the rest if they want it; with JavaScript off it still works, since
   the browser does the disclosure itself. */
.prose-more {
  margin-top: var(--fob-space-lg);
}

.prose-more__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--fob-space-xs);
  min-height: 44px;
  padding: 0 var(--fob-space-md);
  font-size: 0.9rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red);
  background-color: transparent;
  border: 1.5px solid var(--fob-red);
  border-radius: var(--fob-radius-sm);
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle without this. */
.prose-more__toggle::-webkit-details-marker {
  display: none;
}

.prose-more__toggle:hover,
.prose-more__toggle:focus-visible {
  background-color: var(--fob-red);
  color: var(--fob-white);
}

.prose-more__toggle::after {
  content: "\2193";
  font-size: 0.95em;
}

.prose-more[open] .prose-more__toggle::after {
  content: "\2191";
}

.prose-more__label--open,
.prose-more[open] .prose-more__label--closed {
  display: none;
}

.prose-more[open] .prose-more__label--open {
  display: inline;
}

.prose-more__body {
  margin-top: var(--fob-space-lg);
}


/* Rules that came across inside imported prose, dividing one short section
   from the next. The browser's own margins left the next heading sitting on
   the line, so the space below it is opened up. */
.context-prose hr {
  border: 0;
  border-top: 1px solid var(--fob-line);
  margin: var(--fob-space-lg) 0 var(--fob-space-xl);
  clear: both;
}


/* Organisations with a logo: the picture, the name as the link, and the
   address beneath it. It arrived as the old site's table, with the bare URL
   standing in for the name. */
.charity-list {
  display: grid;
  gap: var(--fob-space-md);
  margin-top: var(--fob-space-lg);
  border-top: 1px solid var(--fob-line);
}

.charity-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--fob-space-lg);
  align-items: center;
  padding: var(--fob-space-md) var(--fob-space-sm) var(--fob-space-md) 0;
  border-bottom: 1px solid var(--fob-line);
}

.charity-row__logo img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
}

.charity-row__name {
  display: block;
  font-size: 1.02rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red);
  text-decoration: none;
  line-height: var(--fob-line-height-tight);
}

.charity-row__name:hover,
.charity-row__name:focus-visible {
  color: var(--fob-red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.charity-row__site {
  display: block;
  margin-top: 3px;
  font-size: 0.84rem;
  color: var(--fob-grey);
}

@media (max-width: 560px) {
  .charity-row {
    grid-template-columns: 90px 1fr;
    gap: var(--fob-space-md);
  }
}


/* A passage set out on a centre line, from the [fob_centre] shortcode. Held to
   a readable measure so the lines do not run the full width of the column. */
.prose-centre {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.prose-centre ul,
.prose-centre ol {
  list-style: none;
  padding: 0;
}

.context-prose .prose-centre img,
.prose .prose-centre img {
  float: none;
  display: block;
  max-width: 100%;
  max-height: 340px;
  width: auto;
  height: auto;
  margin: var(--fob-space-md) auto;
}


/* A news page centred with [fob_centre]: its title and date follow the body,
   rather than standing ranged left above a centred article. */
.single-news--centred .single-news__header {
  text-align: center;
}

.single-news--centred .single-news__meta {
  justify-content: center;
}


/* =========================================
   An event set out as an invitation

   The imported invitations centred every line at the same weight, so the
   date, the price and the charity number all competed. This gives the same
   facts an order: what it is, when and where, how much and how to book, then
   the evening, then the small print. Chosen per event — the accounts of past
   evenings keep their plain text.
   ========================================= */

.event-invite {
  padding: var(--fob-section-pad) 0;
}

.event-invite__card {
  /* The full width of the page it sits on, edge to edge with the heading
     above it. The narrow, centred shape is what the printed invitation
     wants, not the page. */
  max-width: 100%;
  margin: 0;
  background: var(--fob-grey-1);
  border: 1px solid rgba(38, 36, 33, 0.12);
  border-radius: var(--fob-radius-lg);
  overflow: hidden;
  text-align: center;
}

/* The band is decorative, and shallow enough not to crowd the words. */
.event-invite__band {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: cover;
  object-position: center top;
}

/* The same band, turned over, so the pattern hangs towards the card at the
   head and stands up towards it at the foot. */
.event-invite__band--foot {
  transform: scaleY(-1);
}

.event-invite__inner {
  padding: var(--fob-space-xl) var(--fob-space-lg);
}

.event-invite__lead {
  margin: 0 0 var(--fob-space-xs);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fob-ink-soft);
}

.event-invite__title {
  margin: 0 0 var(--fob-space-lg);
  font-family: var(--fob-font-heading);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--fob-red);
}

.event-invite__when {
  margin-bottom: var(--fob-space-lg);
}

.event-invite__date {
  margin: 0;
  font-size: 1.12rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-ink);
}

.event-invite__time::before {
  content: " · ";
  color: var(--fob-ink-soft);
}

.event-invite__place {
  margin: var(--fob-space-xs) 0 0;
  color: var(--fob-ink-soft);
}

/* The one thing a reader is here to do. */
.event-invite__tickets {
  padding: var(--fob-space-md) 0 var(--fob-space-lg);
  border-top: 1px solid rgba(38, 36, 33, 0.1);
  border-bottom: 1px solid rgba(38, 36, 33, 0.1);
  margin-bottom: var(--fob-space-lg);
}

.event-invite__cta {
  margin-bottom: var(--fob-space-sm);
}

.event-invite__price {
  margin: 0;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-ink);
}

.event-invite__price-note {
  margin: var(--fob-space-xs) 0 0;
  font-size: 0.92rem;
  color: var(--fob-ink-soft);
}

.event-invite__block {
  margin-bottom: var(--fob-space-lg);
}

.event-invite__heading {
  margin: 0 0 var(--fob-space-sm);
  font-size: 0.78rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fob-green);
}

.event-invite__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-invite__list li,
.event-invite__host {
  margin: 0 0 var(--fob-space-xs);
  color: var(--fob-ink);
}

.event-invite__list li:last-child,
.event-invite__host:last-child {
  margin-bottom: 0;
}

.event-invite__footnote {
  padding-top: var(--fob-space-md);
  border-top: 1px solid rgba(38, 36, 33, 0.1);
  font-size: 0.85rem;
  color: var(--fob-ink-soft);
}

.event-invite__footnote p {
  margin: 0 0 var(--fob-space-xs);
}

.event-invite__footnote p:last-child {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .event-invite__inner {
    padding: var(--fob-space-lg) var(--fob-space-md);
  }

  .event-invite__band {
    height: 38px;
  }
}


/* =========================================
   Giving, with the Gift Aid declaration first

   A donate button on its own loses the claim: people give, mean to make the
   declaration afterwards, and don't. So the question comes first and the
   steps follow one at a time. Without JavaScript they are all on the page in
   the same order, which still reads correctly.
   ========================================= */

.donate-flow {
  margin-top: var(--fob-space-md);
}

.donate-flow__question {
  margin: 0 0 var(--fob-space-xs);
  font-family: var(--fob-font-heading);
  font-size: 1.1rem;
  color: var(--fob-color-heading);
}

.donate-flow__why,
.donate-flow__note {
  margin: 0 0 var(--fob-space-md);
  font-size: 0.95rem;
  color: var(--fob-ink-soft);
}

.donate-flow__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fob-space-sm);
}

.donate-flow__step {
  margin-top: var(--fob-space-md);
}

.donate-flow__heading {
  margin: 0 0 var(--fob-space-xs);
  font-size: 0.78rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fob-green);
}

/* The declaration sits in its own panel, so it reads as a step rather than
   as the page carrying on. */
.donate-flow__step--giftaid {
  padding: var(--fob-space-md);
  background: var(--fob-grey-1);
  border-radius: var(--fob-radius-lg);
}

.donate-flow__thanks {
  margin: 0 0 var(--fob-space-sm);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-green);
}


/* =========================================
   The Gift Aid declaration, and forms like it

   Contact Form 7 brings its own bare markup: an unstyled submit button, list
   items for the checkboxes and a response box outlined in bright blue. These
   rules are scoped to .fob-form so the contact form is left as it is.
   ========================================= */

.fob-form__intro {
  margin: 0 0 var(--fob-space-lg);
  color: var(--fob-ink-soft);
}

.fob-form__field {
  margin-bottom: var(--fob-space-md);
}

.fob-form__field > label {
  display: block;
  margin-bottom: var(--fob-space-xs);
  font-size: 0.92rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
}

.fob-form__field .required {
  color: var(--fob-red);
}

.fob-form__hint {
  display: block;
  margin-top: var(--fob-space-xs);
  font-size: 0.85rem;
  color: var(--fob-ink-soft);
}

/* CF7 wraps every control in a span of its own, which otherwise sits inline
   and leaves the field hanging beside its label. */
.fob-form .wpcf7-form-control-wrap {
  display: block;
}

/* The two declarations. CF7 gives each a list item and puts the box inside
   the label; this lines the text up in a column beside it rather than
   wrapping underneath. */
.fob-form__field--check .wpcf7-list-item {
  display: block;
  margin: 0 0 var(--fob-space-sm);
}

.fob-form__field--check .wpcf7-list-item label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fob-space-sm);
  align-items: start;
  font-size: 0.95rem;
  line-height: var(--fob-line-height-base);
  color: var(--fob-ink);
  cursor: pointer;
}

.fob-form__field--check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--fob-red);
}

.fob-form__note {
  margin: 0 0 var(--fob-space-lg);
  font-size: 0.85rem;
  color: var(--fob-ink-soft);
}

/* The submit button, which CF7 renders as a bare input. */
.fob-form input[type="submit"] {
  display: inline-block;
  width: auto;
  min-height: 44px;
  padding: var(--fob-space-sm) var(--fob-space-lg);
  font-family: var(--fob-font-primary);
  font-size: 1rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-white);
  background: var(--fob-red);
  border: 2px solid var(--fob-red);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fob-form input[type="submit"]:hover,
.fob-form input[type="submit"]:focus {
  background: var(--fob-red-deep);
  border-color: var(--fob-red-deep);
}

.fob-form .wpcf7-spinner {
  margin-left: var(--fob-space-sm);
}

/* The spam trap: out of sight, out of the tab order, and not announced. */
.fob-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The declaration group. */
.fob-form__declare {
  margin: 0 0 var(--fob-space-md);
  padding: 0;
  border: 0;
}

.fob-form__legend {
  padding: 0;
  margin-bottom: var(--fob-space-xs);
  font-size: 0.92rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
}

.fob-form__declare .fob-form__hint {
  margin-bottom: var(--fob-space-sm);
}

/* CF7 draws its reply box whether or not it has anything to say, which left
   an empty outline under the button. Its own rules are more specific than a
   two-class selector, so these match its shape. */
.wpcf7 form .wpcf7-response-output:empty {
  display: none;
}

/* What the form says back, in the site's own colours rather than CF7's. */
.wpcf7 form .wpcf7-response-output {
  margin: var(--fob-space-md) 0 0;
  padding: var(--fob-space-sm) var(--fob-space-md);
  border: 1px solid var(--fob-green);
  border-left-width: 4px;
  border-radius: 4px;
  background: rgba(10, 125, 83, 0.06);
  color: var(--fob-ink);
  font-size: 0.95rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--fob-red);
  background: rgba(168, 34, 46, 0.06);
}

.fob-form .wpcf7-not-valid-tip {
  margin-top: var(--fob-space-xs);
  font-size: 0.85rem;
  color: var(--fob-red);
}

.fob-form .wpcf7-not-valid {
  border-color: var(--fob-red);
}


/* The two lines an invitation should not bury: who the evening is with, and
   where the money goes. They were in the small print, which is where a
   reader stops looking. */
.event-invite__with {
  margin: var(--fob-space-lg) 0;
  padding: var(--fob-space-md) var(--fob-space-lg);
  border-top: 2px solid var(--fob-red-soft);
  border-bottom: 2px solid var(--fob-red-soft);
}

.event-invite__with p {
  margin: 0 0 var(--fob-space-sm);
  font-size: 1.02rem;
  line-height: var(--fob-line-height-base);
  color: var(--fob-ink);
}

.event-invite__with p:last-child {
  margin-bottom: 0;
}

/* One line about Gift Aid beside the ticket, where the paragraph that suits
   Ways to give would crowd the card. */
.event-invite__giftaid {
  margin: var(--fob-space-sm) 0 0;
  font-size: 0.88rem;
  color: var(--fob-ink-soft);
}

/* The ticket choice and its button, side by side where there is room. */
.event-invite__tickets .paypal-buttons__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fob-space-sm);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--fob-space-sm);
}

.event-invite__tickets .paypal-buttons__label {
  width: 100%;
  font-size: 0.78rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fob-green);
}

.event-invite__tickets .paypal-buttons__select {
  width: auto;
  min-width: 15rem;
  max-width: 100%;
}


/* =========================================
   Buying a ticket, step by step

   Choose the ticket, then go to PayPal. Gift Aid is asked on the donation
   route only.
   ========================================= */

.ticket-flow {
  margin-top: var(--fob-space-lg);
  padding-top: var(--fob-space-lg);
  text-align: left;
}

.event-invite .ticket-flow {
  text-align: center;
}

.ticket-flow__heading {
  margin: 0 0 var(--fob-space-xs);
  font-family: var(--fob-font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--fob-color-heading);
}

.ticket-flow__link {
  margin: 0 0 var(--fob-space-md);
  font-size: 0.92rem;
}

.ticket-flow__choice {
  margin-bottom: var(--fob-space-md);
}

.ticket-flow__label {
  display: block;
  margin: 0 0 var(--fob-space-xs);
  font-size: 0.92rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
}

.ticket-flow__select {
  width: auto;
  min-width: 16rem;
  max-width: 100%;
}

.event-invite .ticket-flow__select {
  margin-inline: auto;
}

.ticket-flow__small {
  margin: var(--fob-space-sm) 0 0;
  font-size: 0.85rem;
  color: var(--fob-ink-soft);
}

.ticket-flow__step {
  margin-top: var(--fob-space-md);
}

/* Between the tickets and the donate button on Ways to give. */
.give-card__rule {
  margin: var(--fob-space-lg) 0;
  border: 0;
  border-top: 1px solid rgba(38, 36, 33, 0.12);
}