/*
 * Site styles, refined direction (29 Sep 2026): the homepage, Events,
 * Chapters and About. Event detail pages still use the Webflow styles. Direction B read as playful; this
 * one aims for a mid-range brand: navy leads, the yellow is a precise accent
 * rather than a background, generous white space, large photographs with
 * near-square corners, lighter headings and quiet, tailored details.
 * Headings: Bricolage Grotesque at a light weight; body: Hind. Everything is
 * scoped to .fa-r (set on <main>), so the header, footer and event detail
 * pages are unaffected.
 */

.fa-r {
  --fa-yellow: #fcb815;
  --fa-navy: #1b1548;
  --fa-ink: #1b1548;
  --fa-muted: #55516e;    /* on white: 7.9:1 */
  --fa-soft: #f4f4f7;     /* neutral tinted toward the navy */
  --fa-rule: #dcdbe5;
  --fa-on-navy: rgba(255, 255, 255, 0.82);  /* on navy: about 12:1 */
  --fa-display: 'Bricolage Grotesque', 'Hind', sans-serif;
  --fa-body: Hind, sans-serif;
  --fa-ease: cubic-bezier(0.25, 1, 0.5, 1);

  color: var(--fa-ink);
  font-family: var(--fa-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.fa-r figure {
  margin: 0;
}

.fa-r img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fa-r p {
  margin: 0 0 1em;
}

.fa-r section {
  padding-top: clamp(72px, 10vw, 136px);
  padding-bottom: clamp(72px, 10vw, 136px);
}

.fa-r-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}

/* ---- Type ---------------------------------------------------------------- */

.fa-r-display,
.fa-r-h2 {
  margin: 0;
  color: inherit;
  font-family: var(--fa-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
}

.fa-r-display {
  font-size: clamp(2.875rem, 4.5vw + 1rem, 5rem);
  line-height: 1.02;
}

.fa-r-h2 {
  font-size: clamp(2rem, 2.2vw + 1rem, 3rem);
  line-height: 1.08;
}

/* The English line under each French heading: a translation, set small. */
.fa-r .fa-r-sub {
  margin: 10px 0 0;
  color: var(--fa-muted);
  font-size: 1.0625rem;
  font-weight: 500;
}

.fa-r .fa-r-lead {
  font-family: var(--fa-display);
  font-size: clamp(1.375rem, 0.8vw + 1rem, 1.75rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.fa-r strong {
  font-weight: 600;
}

/* ---- Buttons and links --------------------------------------------------- */

.fa-r-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
}

.fa-r-btn {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 12px 28px;
  border-radius: 4px;
  background-color: var(--fa-yellow);
  color: var(--fa-navy);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 180ms var(--fa-ease);
}

.fa-r-btn:hover {
  background-color: #ffc93d;
}

/* A quiet link: text, a hairline yellow underline, an arrow. */
.fa-r-textlink {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--fa-yellow);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.fa-r-textlink::after {
  content: "\00a0\2192";
  display: inline-block;
  transition: transform 180ms var(--fa-ease);
}

.fa-r-textlink:hover::after {
  transform: translateX(3px);
}

.fa-r a:focus-visible {
  outline: 2px solid var(--fa-yellow);
  outline-offset: 4px;
}

.fa-r-intro a:focus-visible,
.fa-r-series a:focus-visible,
.fa-r-gallery a:focus-visible {
  outline-color: var(--fa-navy);
}

/* ---- Hero: navy panel, photograph to the edge ---------------------------- */

.fa-r .fa-r-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: min(760px, 88vh);
  padding: 90px 0 0;       /* the Webflow header is fixed, ~90px tall */
  background-color: var(--fa-navy);
  color: #fff;
}

.fa-r-hero__panel {
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 72px);
}

.fa-r-hero__text {
  max-width: 30rem;
  margin-left: auto;
}

.fa-r .fa-r-hero__en {
  margin-top: 24px;
  color: var(--fa-on-navy);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  line-height: 1.55;
}

/* A short yellow rule: the one bright mark in the hero besides the button. */
.fa-r-display::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 28px;
  background-color: var(--fa-yellow);
}

.fa-r-hero .fa-r-textlink {
  color: #fff;
}

.fa-r-hero__photo {
  position: relative;
  min-height: 360px;
}

.fa-r-hero__photo img {
  position: absolute;
  inset: 0;
  object-position: 40% 50%;
}

/* ---- Who we are ---------------------------------------------------------- */

.fa-r-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
}

.fa-r-intro__body {
  max-width: 40rem;
}

.fa-r-intro__body p:not(.fa-r-lead) {
  color: var(--fa-muted);
}

/* ---- The three series: cards --------------------------------------------
   White cards on the soft grey section: a real photo from the series, the
   pictogram set on the photo's lower edge, then when / name / description.
   No border and no drop shadow; the card reads by its white against grey. */

.fa-r-series {
  background-color: var(--fa-soft);
}

.fa-r .fa-series__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 5vw, 56px);
}

.fa-r .fa-series__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  background-color: #fff;
}

.fa-r .fa-series__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.fa-r .fa-series__body {
  position: relative;
  padding: 44px 28px 32px;
}

/* The pictogram sits across the photo's lower edge, in a white ring. */
.fa-r .fa-series__icon {
  position: absolute;
  top: -28px;
  left: 24px;
  width: 56px;
  height: 56px;
  padding: 4px;
  border-radius: 16px;
  background-color: #fff;
  box-sizing: content-box;
}

.fa-r .fa-series__when {
  margin: 0 0 6px;
  color: var(--fa-muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

.fa-r .fa-series__name {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--fa-display);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.fa-r .fa-series__desc {
  margin: 0;
  color: var(--fa-muted);
  line-height: 1.6;
}

/* ---- Gallery ------------------------------------------------------------- */

.fa-r-gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.fa-r-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: clamp(420px, 44vw, 560px);
}

.fa-r-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}

.fa-r-shot--main {
  grid-row: span 2;
}

.fa-r-shot img {
  transition: transform 600ms var(--fa-ease);
}

.fa-r-shot:hover img {
  transform: scale(1.03);
}

/* Captions sit on a soft gradient at the foot of each photograph. */
.fa-r-shot__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 14px;
  background: linear-gradient(to top, rgba(27, 21, 72, 0.85), rgba(27, 21, 72, 0));
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- City groups --------------------------------------------------------- */

.fa-r-groups {
  background-color: var(--fa-navy);
  color: #fff;
}

.fa-r-groups .fa-r-sub,
.fa-r .fa-r-groups__note {
  color: var(--fa-on-navy);
}

.fa-r .fa-r-groups__note {
  max-width: 28rem;
  margin-top: 24px;
}

.fa-r-groups__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.fa-r-groups__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.fa-r-group {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "city arrow" "where arrow";
  align-items: center;
  column-gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
}

.fa-r-group::after {
  content: "\2192";
  grid-area: arrow;
  color: var(--fa-yellow);
  font-size: 1.375rem;
  transition: transform 180ms var(--fa-ease);
}

.fa-r-group__city {
  grid-area: city;
  font-family: var(--fa-display);
  font-size: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
}

.fa-r-group__where {
  grid-area: where;
  color: var(--fa-on-navy);
  font-size: 0.9375rem;
}

.fa-r-group:hover .fa-r-group__city {
  color: var(--fa-yellow);
}

.fa-r-group:hover::after {
  transform: translateX(4px);
}

/* ---- Small screens ------------------------------------------------------- */

@media (max-width: 899px) {
  .fa-r .fa-r-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .fa-r-hero__text {
    margin-left: 0;
  }

  .fa-r-hero__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .fa-r-intro__grid,
  .fa-r-groups__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fa-r .fa-series__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
  }

  .fa-r-gallery__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
  }

  .fa-r-shot {
    aspect-ratio: 4 / 3;
  }

  .fa-r-shot--main {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fa-r-btn,
  .fa-r-textlink::after,
  .fa-r-group::after,
  .fa-r-shot img {
    transition: none;
  }

  .fa-r-textlink:hover::after,
  .fa-r-group:hover::after,
  .fa-r-shot:hover img {
    transform: none;
  }
}

/* ======================================================================
   Inner pages: Events, Chapters, About
   ====================================================================== */

.fa-r-section--soft {
  background-color: var(--fa-soft);
}

/* Page hero: the homepage hero, shorter, with the English title under the
   French one. */
.fa-r .fa-r-hero--page {
  min-height: min(620px, 76vh);
}

.fa-r .fa-r-hero__sub {
  margin: 14px 0 0;
  color: #fff;
  font-family: var(--fa-display);
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem);
  font-weight: 400;
  line-height: 1.3;
}

.fa-r-hero--page .fa-r-display::after {
  display: none;
}

.fa-r-hero--page .fa-r-hero__sub::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 24px;
  background-color: var(--fa-yellow);
}

.fa-r-hero--page .fa-r-hero__en {
  margin-top: 24px;
}

.fa-r-h3 {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--fa-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
}

.fa-r-inline {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--fa-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.fa-r-btn--outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fa-navy);
}

.fa-r-btn--outline:hover {
  background-color: var(--fa-navy);
  color: #fff;
}

/* Lists with a short yellow dash. */
.fa-r-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 36px;
}

.fa-r-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fa-muted);
}

.fa-r-list li {
  position: relative;
  padding-left: 22px;
}

.fa-r-list li + li {
  margin-top: 10px;
}

.fa-r-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 2px;
  background-color: var(--fa-yellow);
}

/* Three columns divided by hairlines (series on Events, values on About). */
.fa-r-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--fa-rule);
}

.fa-r-col {
  padding: 36px 32px 8px 0;
}

.fa-r-col + .fa-r-col {
  padding-left: 32px;
  border-left: 1px solid var(--fa-rule);
}

.fa-r .fa-r-col__icon {
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
}

.fa-r .fa-r-col__when {
  margin: 0 0 6px;
  color: var(--fa-muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

.fa-r-col__name {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--fa-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fa-r-col p:not(.fa-r-col__when) {
  color: var(--fa-muted);
}

.fa-r .fa-r-col__note {
  font-size: 0.9375rem;
}

.fa-r-col__note a {
  color: var(--fa-navy);
  text-decoration: underline;
  text-decoration-color: var(--fa-yellow);
  text-underline-offset: 3px;
}

/* ---- Events: next events ------------------------------------------------- */

.fa-r .w-dyn-empty.fa-r-empty {
  margin-top: 32px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 6px;
  background-color: var(--fa-soft);
}

.fa-r .fa-r-empty__lead {
  max-width: 40rem;
  margin-bottom: 24px;
  font-family: var(--fa-display);
  font-size: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
  line-height: 1.35;
}

.fa-r-empty__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.fa-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

/* ---- Events: filters and archive ----------------------------------------- */

.fa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}

.fa-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fa-filter {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--fa-rule);
  border-radius: 999px;
  background-color: #fff;
  color: var(--fa-navy);
  font-family: var(--fa-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 150ms var(--fa-ease), border-color 150ms var(--fa-ease), color 150ms var(--fa-ease);
}

.fa-filter:hover {
  border-color: var(--fa-navy);
}

.fa-filter.mixitup-control-active {
  border-color: var(--fa-navy);
  background-color: var(--fa-navy);
  color: #fff;
}

.fa-filter:focus-visible {
  outline: 2px solid var(--fa-navy);
  outline-offset: 2px;
}

.fa-past-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.fa-past {
  overflow: hidden;
  border-radius: 6px;
  background-color: #fff;
}

.fa-past__link {
  display: block;
  height: 100%;
  color: var(--fa-navy);
  text-decoration: none;
}

.fa-past__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--fa-navy);
}

.fa-past__media img {
  transition: transform 500ms var(--fa-ease);
}

.fa-past__link:hover .fa-past__media img {
  transform: scale(1.04);
}

.fa-past__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.fa-r .fa-past__fallback img {
  width: 72px;
  height: 72px;
}

.fa-past__body {
  padding: 18px 20px 22px;
}

.fa-past__series {
  margin: 0 0 4px;
  padding: 0;
  font-family: var(--fa-display);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.25;
}

.fa-r .fa-past__date,
.fa-r .fa-past__place {
  margin: 0;
  color: var(--fa-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fa-past__link:hover .fa-past__series {
  text-decoration: underline;
  text-decoration-color: var(--fa-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.fa-past__link:focus-visible {
  outline: 2px solid var(--fa-navy);
  outline-offset: 3px;
}

/* ---- Chapters: city cards ------------------------------------------------ */

.fa-r-cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 5vw, 56px);
}

.fa-r-city {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--fa-soft);
  color: var(--fa-navy);
  text-decoration: none;
}

.fa-r-city__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.fa-r-city__photo img {
  transition: transform 500ms var(--fa-ease);
}

.fa-r-city:hover .fa-r-city__photo img {
  transform: scale(1.04);
}

.fa-r-city__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 28px 30px;
}

.fa-r-city__name {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--fa-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.fa-r-city__body p {
  color: var(--fa-muted);
}

.fa-r-city__cta {
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--fa-yellow);
  font-weight: 600;
}

.fa-r-city__cta::after {
  content: "\00a0\2192";
  display: inline-block;
  transition: transform 180ms var(--fa-ease);
}

.fa-r-city:hover .fa-r-city__cta::after {
  transform: translateX(3px);
}

.fa-r-city:focus-visible {
  outline: 2px solid var(--fa-navy);
  outline-offset: 3px;
}

/* ---- About: photo strip, people, partners -------------------------------- */

.fa-r-strip {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 4px;
}

.fa-r-strip img {
  object-position: 50% 40%;
}

.fa-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.fa-person__link {
  color: var(--fa-navy);
  text-decoration: none;
}

.fa-r .fa-person__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.fa-person__name {
  margin: 14px 0 0;
  padding: 0;
  font-family: var(--fa-display);
  font-size: 1.125rem;
  font-weight: 500;
}

.fa-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--fa-rule);
}

.fa-partner__link {
  display: block;
}

.fa-r .fa-partner__logo {
  width: auto;
  height: 64px;
  max-width: 180px;
  object-fit: contain;
}

/* Keep French hyphenated pairs (rendez-vous, sommes-nous) on one line. */
.fa-nowrap {
  white-space: nowrap;
}

/* ---- Inner pages on small screens ---------------------------------------- */

@media (max-width: 899px) {
  .fa-r-cols,
  .fa-r-cities {
    grid-template-columns: minmax(0, 1fr);
  }

  .fa-r-col,
  .fa-r-col + .fa-r-col {
    padding: 28px 0;
    border-left: 0;
    border-bottom: 1px solid var(--fa-rule);
  }

  .fa-r-cities {
    max-width: 34rem;
  }

  .fa-r-lists {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .fa-r-strip {
    aspect-ratio: 4 / 3;
  }
}

/* Phones: two archive cards per row, so 66 get-togethers stay browsable. */
@media (max-width: 599px) {
  .fa-past-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .fa-past__body {
    padding: 12px 12px 14px;
  }

  .fa-past__series {
    font-size: 1rem;
  }

  .fa-r .fa-past__date,
  .fa-r .fa-past__place {
    font-size: 0.8125rem;
  }

  .fa-r .fa-past__fallback img {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fa-filter,
  .fa-past__media img,
  .fa-r-city__photo img,
  .fa-r-city__cta::after {
    transition: none;
  }

  .fa-past__link:hover .fa-past__media img,
  .fa-r-city:hover .fa-r-city__photo img,
  .fa-r-city:hover .fa-r-city__cta::after {
    transform: none;
  }
}

/* ======================================================================
   Event detail pages (/event/<slug>)
   ====================================================================== */

.fa-r .fa-r-event__series {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--fa-on-navy);
  font-weight: 600;
}

.fa-r .fa-r-event__icon {
  width: 36px;
  height: 36px;
}

/* Event names are longer than page titles. */
.fa-r .fa-r-display--event {
  font-size: clamp(2.25rem, 2.6vw + 1rem, 3.75rem);
  line-height: 1.06;
}

.fa-r-hero__photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fa-navy-3, #2a2460);
}

.fa-r .fa-r-hero__photo--none img {
  position: static;
  width: 120px;
  height: 120px;
}

.fa-r-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
}

.fa-r-photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--fa-navy);
}

.fa-r-photo img {
  transition: transform 500ms var(--fa-ease);
}

.fa-r-photo:hover img {
  transform: scale(1.04);
}

.fa-r-photo:focus-visible {
  outline: 2px solid var(--fa-navy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fa-r-photo img {
    transition: none;
  }

  .fa-r-photo:hover img {
    transform: none;
  }
}

/* Light variant of the city groups block, for event pages, where it can
   follow the navy hero directly. */
.fa-r-groups--light {
  background-color: #fff;
  color: var(--fa-navy);
  border-top: 1px solid var(--fa-rule);
}

.fa-r-groups--light .fa-r-sub,
.fa-r .fa-r-groups--light .fa-r-groups__note,
.fa-r-groups--light .fa-r-group__where {
  color: var(--fa-muted);
}

.fa-r-groups--light .fa-r-groups__list,
.fa-r-groups--light .fa-r-group {
  border-color: var(--fa-rule);
}

.fa-r-groups--light .fa-r-group {
  color: var(--fa-navy);
}

.fa-r-groups--light .fa-r-group::after {
  color: var(--fa-navy);
}

.fa-r-groups--light .fa-r-group:hover .fa-r-group__city {
  color: var(--fa-navy);
  text-decoration: underline;
  text-decoration-color: var(--fa-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.fa-r-groups--light a:focus-visible {
  outline-color: var(--fa-navy);
}

/* 404: a single navy panel under the header. */
.fa-r .fa-r-notfound {
  min-height: min(640px, 80vh);
  display: flex;
  align-items: center;
  padding: calc(90px + clamp(48px, 7vw, 96px)) 0 clamp(64px, 8vw, 112px);
  background-color: var(--fa-navy);
  color: #fff;
}

.fa-r-notfound .fa-r-display::after {
  display: none;
}

.fa-r-notfound .fa-r-hero__sub::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 24px;
  background-color: var(--fa-yellow);
}

.fa-r .fa-r-notfound .fa-r-hero__en {
  max-width: 34rem;
  margin-top: 24px;
}

.fa-r-notfound .fa-r-textlink {
  color: #fff;
}