/* Gallery archive landing pages and topic cards. */
.topic-hero {
  min-height:540px;
  padding:70px max(4.5vw,calc((100vw - 1310px)/2)) 90px;
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:8vw;
  align-items:end
}
.topic-hero h1 {
  margin:24px 0 0;
  font:500 clamp(72px,9vw,132px)/.76 var(--font-display);
  letter-spacing:-.045em;
  text-transform:uppercase
}
.topic-hero h1 em {
  color:var(--red);
  font-style:normal
}
.topic-hero>div:last-child p {
  color:#5f6774;
  line-height:1.75
}
.topic-content {
  padding:95px max(4.5vw,calc((100vw - 1310px)/2)) 120px;
  background:var(--cream)
}
.topic-heading {
  display:grid;
  grid-template-columns:.35fr 1fr .6fr;
  gap:5vw;
  align-items:start;
  margin-bottom:55px
}
.topic-heading h2 {
  margin:0;
  font:500 clamp(48px,5.6vw,80px)/.9 var(--font-display);
  letter-spacing:-.035em;
  text-transform:uppercase
}
.topic-heading>p {
  margin:0;
  color:#68707e;
  line-height:1.7
}
.topic-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid #ccc7bd
}
.topic-card {
  min-height:210px;
  padding:22px 22px 22px 0;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:25px;
  border-bottom:1px solid #ccc7bd
}
.topic-card:nth-child(odd) {
  border-right:1px solid #ccc7bd
}
.topic-card:nth-child(even) {
  padding-left:22px
}
.topic-card img {
  height:166px;
  object-fit:cover;
  background:var(--ink)
}
.topic-card small {
  color:var(--red);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase
}
.topic-card h3 {
  margin:10px 0;
  font-size:1.25rem
}
.topic-card p {
  color:#6d7581;
  font-size:.75rem;
  line-height:1.6
}
.topic-card .text-link {
  display:inline-block;
  margin-top:9px
}

/*
 * Meeting cards have two useful destinations: the photograph opens that exact
 * slide, while the text link opens the month at its first gallery. Keeping the
 * links separate avoids inaccessible nested links.
 */
.meeting-topic-card .topic-card-image {
  position:relative;
  display:block;
  min-width:0;
  height:166px;
  overflow:hidden;
  background:var(--ink)
}
.meeting-topic-card .topic-card-image img {
  width:100%;
  height:100%;
  transition:transform .35s ease,opacity .35s ease
}
.meeting-topic-card .topic-card-image-action {
  position:absolute;
  right:8px;
  bottom:8px;
  left:8px;
  padding:7px 9px;
  background:rgba(16,27,51,.92);
  color:#fff;
  font-size:.5rem;
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
  transform:translateY(calc(100% + 10px));
  transition:transform .25s ease
}
.meeting-topic-card .topic-card-image:hover img,
.meeting-topic-card .topic-card-image:focus-visible img {
  transform:scale(1.045);
  opacity:.86
}
.meeting-topic-card .topic-card-image:hover .topic-card-image-action,
.meeting-topic-card .topic-card-image:focus-visible .topic-card-image-action {
  transform:translateY(0)
}
.meeting-topic-card .topic-card-image:focus-visible {
  outline:4px solid var(--yellow);
  outline-offset:-4px
}
.topic-return {
  padding:85px max(4.5vw,calc((100vw - 1310px)/2));
  display:grid;
  grid-template-columns:1fr .6fr auto;
  gap:6vw;
  align-items:end;
  background:var(--blue);
  color:white
}
.topic-return h2 {
  margin:20px 0 0;
  font:500 clamp(46px,5.4vw,76px)/.9 var(--font-display);
  text-transform:uppercase
}
.topic-return>p {
  color:#bdc9dc;
  line-height:1.7
}
@media(max-width:900px) {
  .topic-hero,.topic-heading,.topic-return {
    grid-template-columns:1fr
  }
  .topic-grid {
    grid-template-columns:1fr
  }
  .topic-card:nth-child(odd) {
    border-right:0
  }
  .topic-card:nth-child(even) {
    padding-left:0
  }
}
@media(max-width:600px) {
  .topic-hero,.topic-content,.topic-return {
    padding-left:20px;
    padding-right:20px
  }
  .topic-hero {
    min-height:auto
  }
  .topic-hero h1 {
    font-size:4.25rem
  }
  .topic-card {
    grid-template-columns:115px 1fr;
    gap:16px
  }
  .topic-card img {
    height:130px
  }
  .meeting-topic-card .topic-card-image {
    height:130px
  }
  .meeting-topic-card .topic-card-image-action {
    transform:none
  }
}

@media (prefers-reduced-motion:reduce) {
  .meeting-topic-card .topic-card-image img,
  .meeting-topic-card .topic-card-image-action {
    transition:none
  }
}