.surf-page {
  color: #173b49;
  overflow-wrap: anywhere;
}
.surf-masthead {
  margin-bottom: 22px;
}
.surf-review-link {
  display: inline-flex;
  padding: 9px 14px;
  border: 1px solid #12657a;
  color: #12657a;
  font-size: 15px;
  font-weight: 700;
}
.surf-topic {
  margin-block: clamp(32px, 6vw, 64px);
  scroll-margin-top: calc(var(--nav-header-bottom, 170px) + 16px);
}
.surf-topic h2 {
  margin-block: 0 16px;
  font-size: clamp(22px, 3vw, 30px);
}
.surf-common-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-block: clamp(32px, 6vw, 64px);
}
.surf-common-grid .surf-topic {
  margin-block: 0;
}
.surf-common-grid .guide-grid {
  grid-template-columns: minmax(0, 1fr);
}
.surf-card .guide-card-image {
  aspect-ratio: 16 / 9;
  height: auto;
  padding: 0;
}
.surf-card .guide-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.surf-card .guide-card-copy h3 {
  margin: 6px 0 10px;
}
.surf-upcoming {
  padding: 18px 22px;
  background: #f3f6f7;
  border-inline-start: 3px solid #12657a;
}
.surf-upcoming p {
  margin-block: 0 14px;
}
.surf-article {
  max-width: 900px;
  margin-inline: auto;
}
.surf-article .guide-article-heading {
  margin-inline: 0;
}
.surf-figure {
  margin: 0 0 clamp(24px, 5vw, 42px);
}
.surf-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.surf-figure figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #4f6773;
}
.surf-diagram-visual {
  /* Show the annotated photo. The slide's instructions are adapted in the article text. */
  aspect-ratio: 5 / 2;
  overflow: hidden;
}
.surf-video a {
  display: inline-block;
  padding: 12px 16px;
  background: #173b49;
  color: #fff;
  font-weight: 700;
}
.surf-sources {
  margin-block: 30px;
  font-size: 14px;
}
.surf-sources h2 {
  font-size: 18px;
}
.surf-sources a,
.surf-study-card a {
  color: #12657a;
  text-decoration: underline;
}
.surf-study-card {
  max-width: 850px;
  margin-bottom: 8px;
  border: 1px solid #d2dfe4;
}
.surf-study-card summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f3f6f7;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.surf-study-card summary::-webkit-details-marker {
  display: none;
}
.surf-card-number {
  color: #aa2824;
  font-size: 14px;
}
.surf-card-toggle {
  color: #12657a;
  font-size: 13px;
}
.surf-card-hide,
.surf-study-card[open] .surf-card-show {
  display: none;
}
.surf-study-card[open] .surf-card-hide {
  display: inline;
}
.surf-study-card > div {
  padding: 14px 16px 16px;
}
.surf-study-card p {
  margin: 0 0 8px;
}
.surf-page :is(a, summary):focus-visible {
  outline: 2px solid #12657a;
  outline-offset: 4px;
}
@media (max-width: 540px) {
  .surf-common-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .surf-study-card summary {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .surf-card-toggle {
    grid-column: 2;
  }
}