:root {
  --blog-yellow: #ffdd34;
  --blog-blue: #3b6ed8;
  --blog-navy: #10224d;
  --blog-pale-blue: #eff5ff;
}

.blog-content {
  margin: 3rem auto 5rem;
  max-width: 1180px;
  padding: 2rem 1rem 4rem;
}

.blog-hero,
.blog-articles,
.blog-feed {
  margin: 0 auto clamp(4.5rem, 9vw, 7rem);
  max-width: 980px;
}

.blog-hero {
  max-width: 800px;
  padding: clamp(3rem, 8vw, 6rem) 1rem clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.blog-hero .blog-eyebrow,
.blog-eyebrow {
  color: var(--blog-yellow);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  padding: 0;
  text-transform: uppercase;
}

.blog-hero h1,
.blog-articles h2,
.blog-feed h2 {
  font-family: "LoRes", sans-serif;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.blog-hero h1 {
  font-size: clamp(2rem, 5vw, 2.6rem);
  margin: 0 auto 1.15rem;
}

.blog-hero>p:last-child,
.blog-section-heading>p:last-child,
.blog-feed-heading>p:last-child {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 620px;
}

.blog-articles {
  max-width: 1100px;
}

.blog-section-heading {
  margin: 0 auto 2rem;
  text-align: center;
}

.blog-articles h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 .8rem;
}

.article-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 360px));
  justify-content: center;
}

.article-card {
  background: #fff;
  border-radius: 1.35rem;
  box-shadow: 0 16px 40px rgba(16, 34, 77, .18);
  color: var(--blog-navy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.article-card:hover {
  box-shadow: 0 20px 48px rgba(16, 34, 77, .26);
  transform: translateY(-4px);
}

.article-card-image {
  aspect-ratio: 3 / 2;
  background: var(--blog-pale-blue);
  display: block;
  overflow: hidden;
}

.article-card-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
  width: 100%;
}

.article-card:hover .article-card-image img {
  transform: scale(1.025);
}

.article-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 1.65rem);
}

.article-card-category,
.post-category {
  color: var(--blog-blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  max-width: none;
  padding: 0;
  text-transform: uppercase;
}

.article-card h3 {
  font-family: "LoRes", sans-serif;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  line-height: 1.15;
  margin: .55rem 0 .7rem;
}

.article-card h3 a {
  color: var(--blog-navy);
  text-decoration: none;
}

.article-card h3 a:hover,
.article-card h3 a:focus-visible {
  color: var(--blog-blue);
}

.article-card-summary {
  flex: 1;
  line-height: 1.65;
  max-width: none;
  padding: 0;
}

.article-card-meta,
.post-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  gap: .4rem;
  max-width: none;
  opacity: .72;
  padding: 1rem 0;
}

.article-card-link,
.article-card-link:visited {
  align-self: flex-start;
  color: var(--blog-blue);
  font-weight: 750;
  text-decoration: none;
}

.article-card-link:hover,
.article-card-link:focus-visible {
  color: var(--blog-navy);
}

.blog-empty-state {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 1.35rem;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
  text-align: center;
}

.blog-empty-state h3 {
  font-family: "LoRes", sans-serif;
  font-size: 1.8rem;
  margin: 0;
}

.blog-empty-state p {
  padding-bottom: 0;
}

.blog-feed {
  background: #eff5ff;
  border-radius: 1.5rem;
  color: #10224d;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}

/* Individual post */
.post-content {
  box-sizing: border-box;
  margin: 3rem auto 5rem;
  max-width: 1120px;
  overflow-x: hidden;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem);
  width: 100%;
}

.post {
  box-sizing: border-box;
  margin: 0 auto;
  min-width: 0;
  width: 100%;
}

.post-breadcrumb {
  margin: 0 auto;
  max-width: 900px;
}

.post-back-link,
.post-back-link:visited {
  align-items: center;
  color: var(--blog-yellow);
  display: inline-flex;
  font-weight: 750;
  gap: .6rem;
  text-decoration: none;
}

.post-back-link:hover,
.post-back-link:focus-visible {
  color: #fff;
}

.post-back-icon {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
  width: 2rem;
}

.post-back-link:hover .post-back-icon,
.post-back-link:focus-visible .post-back-icon {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .65);
  transform: translateX(-3px);
}

.post-header {
  margin: clamp(2.5rem, 6vw, 5rem) auto clamp(2rem, 5vw, 3rem);
  max-width: 860px;
  padding: 0;
  text-align: center;
  width: 100%;
}

.post-header .post-category {
  background: var(--blog-yellow);
  border-radius: 999px;
  color: var(--blog-navy);
  display: inline-block;
  margin: 0 auto;
  padding: .5rem .85rem;
}

.post-header h1 {
  font-size: clamp(2.35rem, 6.5vw, 4.5rem);
  letter-spacing: -.035em;
  line-height: .98;
  margin: 1.15rem auto 1.35rem;
  overflow-wrap: anywhere;
}

.post-description {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  line-height: 1.65;
  max-width: 680px;
  padding: 0;
}

.post-byline {
  align-items: center;
  display: inline-flex;
  gap: .75rem;
  margin-top: 1.6rem;
  text-align: left;
}

.post-author-mark {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 3.25rem;
  justify-content: center;
  width: 5.5rem;
}

.post-author-mark img {
  display: inline-flex;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.post-meta {
  display: grid;
  gap: .18rem;
  margin: 0;
  opacity: 1;
  padding: 0;
}

.post-author {
  color: #fff;
  font-size: .88rem;
  font-weight: 750;
}

.post-meta-details {
  color: rgba(255, 255, 255, .65);
  display: flex;
  flex-wrap: wrap;
  font-size: .76rem;
  gap: .4rem;
}

.post-cover {
  background: var(--blog-pale-blue);
  border: clamp(.3rem, 1vw, .55rem) solid rgba(255, 255, 255, .16);
  border-radius: clamp(1.1rem, 3vw, 2rem);
  box-shadow: 0 28px 70px rgba(16, 34, 77, .32);
  margin: 0 auto clamp(2rem, 6vw, 4.5rem);
  max-width: 900px;
  overflow: hidden;
  width: 100%;
}

.post-cover img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

.post-body {
  background: #fff;
  border-radius: clamp(1rem, 3vw, 1.75rem);
  box-sizing: border-box;
  box-shadow: 0 24px 65px rgba(16, 34, 77, .2);
  color: var(--blog-navy);
  margin: 0 auto;
  max-width: 950px;
  overflow-wrap: break-word;
  padding: clamp(1.5rem, 6vw, 4.75rem) clamp(1.25rem, 7vw, 5.5rem);
  position: relative;
  width: 100%;
}

.post-body::before {
  background: var(--blog-yellow);
  border-radius: 999px;
  content: "";
  height: .4rem;
  left: clamp(1.25rem, 7vw, 5.5rem);
  position: absolute;
  top: 0;
  width: 3.5rem;
}

.post-body> :first-child {
  margin-top: 0;
}

.post-body> :last-child {
  margin-bottom: 0;
}

.post-body p,
.post-body ol,
.post-body ul,
.post-body blockquote {
  box-sizing: border-box;
  line-height: 1.82;
  max-width: 790px;
}

.post-body p {
  padding: .7rem 0;
}

.post-body>p:not(blockquote p) {
  font-size: 1.02rem;
}

.post-body h2,
.post-body h3,
.post-body h4 {
  color: var(--blog-navy);
  font-family: "LoRes", sans-serif;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 2.8rem auto .6rem;
  max-width: 790px;
}

.post-body h2 {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  padding-left: 1rem;
  position: relative;
}

.post-body h2::before {
  background: var(--blog-yellow);
  border-radius: 999px;
  content: "";
  height: 100%;
  left: 0;
  max-height: 1.8rem;
  position: absolute;
  top: .15rem;
  width: .3rem;
}

.post-body h3 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.post-body ol,
.post-body ul {
  margin: .8rem auto 1.4rem;
  padding-left: 1.75rem;
}

.post-body li {
  margin-bottom: .65rem;
  padding-left: .35rem;
}

.post-body li::marker {
  color: var(--blog-blue);
  font-weight: 800;
}

.post-body a,
.post-body a:visited {
  color: var(--blog-blue);
  font-weight: 650;
}

.post-body a:hover,
.post-body a:focus-visible {
  color: var(--blog-navy);
}

.post-body blockquote {
  background: linear-gradient(135deg, var(--blog-pale-blue), #f8faff);
  border: 1px solid rgba(59, 110, 216, .14);
  border-left: 5px solid var(--blog-yellow);
  border-radius: .2rem 1rem 1rem .2rem;
  margin: 0 auto 2rem;
  padding: 1rem 1.35rem;
}

.post-body blockquote p {
  padding: 1rem 1.35rem;
}

.post-footer {
  align-items: center;
  background: var(--blog-navy);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.5rem;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin: clamp(2rem, 6vw, 4rem) auto 0;
  max-width: 820px;
  padding: clamp(1.35rem, 4vw, 2rem);
  width: 100%;
}

.post-footer p,
.post-footer h2 {
  margin: 0;
  max-width: none;
  padding: 0;
}

.post-footer-label {
  color: var(--blog-yellow);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.post-footer h2 {
  font-family: "LoRes", sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.15;
  margin-top: .35rem;
}

.post-footer-link,
.post-footer-link:visited {
  align-items: center;
  background: var(--blog-yellow);
  border-radius: 999px;
  color: var(--blog-navy);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 800;
  gap: .5rem;
  padding: .85rem 1.1rem;
  text-decoration: none;
}

.post-footer-link:hover,
.post-footer-link:focus-visible {
  background: #fff;
  color: var(--blog-navy);
  transform: translateY(-2px);
}

.blog-feed .blog-eyebrow {
  color: #3b6ed8;
}

.blog-feed h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 .8rem;
}

.instagram-feed {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  margin: 2.25rem auto;
}

.instagram-feed .instagram-media {
  margin: 0 !important;
  max-width: 540px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.blog-follow {
  background: #3b6ed8;
  color: #fff;
}

.blog-follow:visited {
  color: #fff;
}

.blog-follow:hover {
  background: #10224d;
}

/* Guest discussion */
.post-engagement {
  background: #fff;
  border-radius: 1.5rem;
  box-sizing: border-box;
  color: var(--blog-navy);
  margin: 2rem auto 0;
  max-width: 950px;
  padding: clamp(1.25rem, 5vw, 3rem);
  overflow-wrap: anywhere;
}

.post-engagement [hidden] { display: none !important; }

.post-engagement-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.post-engagement a,
.post-engagement a:visited { color: var(--blog-blue); }

.post-engagement button {
  background: var(--blog-yellow);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--blog-navy);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  min-height: 44px;
  padding: .65rem 1rem;
}

.post-engagement button[aria-pressed="true"] {
  background: var(--blog-navy);
  color: #fff;
}

.post-engagement button:disabled { cursor: wait; opacity: .6; }

.post-engagement :is(button, a, input, textarea):focus-visible {
  outline: 3px solid var(--blog-blue);
  outline-offset: 3px;
}

.post-engagement h2 { font-family: "LoRes", sans-serif; margin: 0 0 1rem; }
.post-engagement p { max-width: none; padding: .5rem 0; line-height: 1.6; }
.post-engagement [role="status"]:empty { display: none; }
.post-engagement form { display: grid; gap: .6rem; margin: 1.5rem 0; }
.post-engagement label { font-weight: 650; }

.post-engagement input,
.post-engagement textarea {
  background: var(--blog-pale-blue);
  border: 1px solid #8798ba;
  border-radius: .5rem;
  box-sizing: border-box;
  color: var(--blog-navy);
  font: inherit;
  min-width: 0;
  padding: .8rem;
  width: 100%;
}

.post-engagement textarea { resize: vertical; }
.post-engagement form button { justify-self: start; margin-top: .5rem; }
.post-comment { border-top: 1px solid #d4def0; padding: 1.25rem 0; }
.post-comment time { display: block; font-size: .8rem; margin-top: .3rem; }
.post-comment p { white-space: pre-wrap; }

/* Page reveal motion */
.js .blog-content section {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

.js .blog-content section.intersecting {
  opacity: 1;
  transform: none;
}

@media (min-width: 760px) {
  .instagram-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .instagram-feed .instagram-media:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .blog-content {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .blog-hero {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .article-card-content {
    padding: 1.2rem;
  }

  .post-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .post-header {
    padding: 0;
    text-align: left;
  }

  .post-header .post-category {
    margin-left: 0;
  }

  .post-header h1 {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
    line-height: 1.02;
  }

  .post-byline {
    margin-top: 1.35rem;
  }

  .post-cover {
    border-radius: 1rem;
  }

  .post-body {
    border-radius: 1rem;
    padding: 1.8rem 1.2rem 2rem;
  }

  .post-body::before {
    left: 1.2rem;
  }

  .post-body ol,
  .post-body ul {
    padding-left: 1.25rem;
  }

  .post-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .blog-content section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .article-card,
  .article-card-image img {
    transition: none;
  }
}