/* =========================================================
   BLOG V2 / INSIGHTS JOURNAL
========================================================= */

#blog.blog-v2 {

  --blog-gold: #ebb020;

  --blog-card:
    #292a2e;

  --blog-card-soft:
    #25262a;

  --blog-dark:
    #1b1c1f;

  --blog-border:
    rgba(255, 255, 255, .07);

  --blog-muted:
    #96979a;

}


/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

.blog-v2-eyebrow {

  display: block;

  margin-bottom:
    9px;

  color:
    var(--blog-gold);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    1.7px;

}


/* =========================================================
   INTRO
========================================================= */

.blog-v2-intro {

  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:
    45px;

  align-items:
    end;

  padding:
    20px 0 38px;

}


.blog-v2-intro h2 {

  max-width:
    700px;

  margin:
    0;

  color:
    #fff;

  font-size:
    clamp(33px, 3.8vw, 47px);

  font-weight:
    600;

  line-height:
    1.18;

  letter-spacing:
    -1px;

}


.blog-v2-intro h2 span {

  color:
    var(--blog-gold);

}


.blog-v2-intro-side > p {

  max-width:
    520px;

  margin:
    0;

  color:
    var(--blog-muted);

  font-size:
    14px;

  line-height:
    1.8;

}


/* Stats */

.blog-v2-stats {

  display: flex;

  gap:
    28px;

  margin-top:
    20px;

  padding-top:
    16px;

  border-top:
    1px solid
    var(--blog-border);

}


.blog-v2-stats > div {

  display:
    flex;

  align-items:
    baseline;

  gap:
    7px;

}


.blog-v2-stats strong {

  color:
    var(--blog-gold);

  font-size:
    25px;

}


.blog-v2-stats span {

  color:
    #77787b;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;

}


/* =========================================================
   FILTER
========================================================= */

.blog-v2-filter-wrap {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    20px;

  padding:
    11px 13px;

  border:
    1px solid
    var(--blog-border);

  border-radius:
    14px;

  background:
    var(--blog-card-soft);

}


.blog-v2-filter-wrap > span {

  color:
    #68696c;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.3px;

}


.blog-v2-filter {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;

}


.blog-filter-btn {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    7px 11px;

  border:
    1px solid
    transparent;

  border-radius:
    18px;

  background:
    transparent;

  color:
    #85868a;

  font-size:
    11px;

  cursor:
    pointer;

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;

}


.blog-filter-btn small {

  opacity:
    .45;

  font-size:
    9px;

}


.blog-filter-btn:hover,
.blog-filter-btn.active {

  transform:
    translateY(-1px);

  border-color:
    rgba(235,176,32,.28);

  background:
    rgba(235,176,32,.045);

  color:
    var(--blog-gold);

}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.blog-featured-article {

  display:
    grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:
    38px;

  align-items:
    center;

  margin:
    18px 0 70px;

  padding:
    12px;

  border:
    1px solid
    rgba(235,176,32,.15);

  border-radius:
    20px;

  background:

    linear-gradient(
      135deg,
      rgba(235,176,32,.04),
      rgba(255,255,255,.008)
    );

  transition:
    opacity .35s ease,
    transform .35s ease;

}


.blog-featured-article.blog-filter-hidden {

  display:
    none;

}


/* Visual */

.blog-featured-visual {

  position:
    relative;

  display:
    block;

  color:
    inherit;

}


.blog-browser-frame {

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    15px;

  background:
    #18191c;

  box-shadow:
    0 24px 50px
    rgba(0,0,0,.25);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

}


.blog-featured-visual:hover
.blog-browser-frame {

  transform:
    translateY(-4px);

  box-shadow:
    0 30px 60px
    rgba(0,0,0,.32);

}


/* Browser bar */

.blog-browser-bar {

  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  padding:
    7px 10px;

  background:
    #303135;

}


.blog-browser-dots {

  display:
    flex;

  gap:
    4px;

}


.blog-browser-dots span {

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    #626367;

}


.blog-browser-url {

  flex:
    1;

  margin:
    0 20px;

  padding:
    4px;

  border-radius:
    5px;

  background:
    #222327;

  color:
    #6d6e72;

  font-size:
    9px;

  text-align:
    center;

}


.blog-browser-bar > i {

  color:
    var(--blog-gold);

}


/* Featured image */

.blog-featured-image {

  position:
    relative;

  overflow:
    hidden;

  min-height:
    370px;

}


.blog-featured-image img {

  width:
    100%;

  min-height:
    370px;

  object-fit:
    cover;

  transition:
    transform .6s ease;

}


.blog-featured-visual:hover
.blog-featured-image img {

  transform:
    scale(1.035);

}


.blog-featured-image-overlay {

  position:
    absolute;

  inset:
    0;

  background:

    linear-gradient(
      to top,
      rgba(19,20,23,.34),
      transparent 45%
    );

}


/* Badge */

.blog-featured-image-badge {

  position:
    absolute;

  left:
    16px;

  bottom:
    16px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(235,176,32,.25);

  border-radius:
    20px;

  background:
    rgba(29,30,33,.9);

  backdrop-filter:
    blur(8px);

}


.blog-featured-image-badge span {

  color:
    var(--blog-gold);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1px;

}


.blog-featured-image-badge strong {

  color:
    #fff;

  font-size:
    12px;

}


/* Hover read */

.blog-read-hover {

  position:
    absolute;

  right:
    17px;

  bottom:
    17px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    7px 10px;

  border-radius:
    18px;

  background:
    var(--blog-gold);

  color:
    #202125;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .7px;

  opacity:
    0;

  transform:
    translateY(7px);

  transition:
    opacity .25s ease,
    transform .25s ease;

}


.blog-featured-visual:hover
.blog-read-hover {

  opacity:
    1;

  transform:
    translateY(0);

}


/* Featured content */

.blog-featured-content {

  padding:
    20px 22px 20px 0;

}


.blog-v2-index {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    18px;

}


.blog-v2-index > span {

  color:
    var(--blog-gold);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.2px;

}


.blog-v2-index small {

  color:
    #717276;

  font-size:
    9px;

  letter-spacing:
    .7px;

}


.blog-category-line {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-bottom:
    10px;

  color:
    var(--blog-gold);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;

}


.blog-category-line span {

  opacity:
    .4;

}


.blog-featured-content h3 {

  margin:
    0 0 14px;

  color:
    #fff;

  font-size:
    clamp(20px,3.4vw,42px);

  line-height:
    1.15;

  letter-spacing:
    -.7px;

}


.blog-featured-content h3 span {

  display:
    block;

  color:
    var(--blog-gold);

}


.blog-featured-content > p {

  color:
    var(--blog-muted);

  font-size:
    13px;

  line-height:
    1.8;

}


/* Meta */

.blog-featured-meta {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    8px;

  margin:
    23px 0;

  padding:
    16px 0;

  border-top:
    1px solid
    var(--blog-border);

  border-bottom:
    1px solid
    var(--blog-border);

}


.blog-featured-meta span {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #696a6e;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1px;

}


.blog-featured-meta strong {

  color:
    #c4c5c7;

  font-size:
    11px;

  font-weight:
    500;

}


/* Main read button */

.blog-v2-read-btn {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px 15px;

  border:
    1px solid
    var(--blog-gold);

  border-radius:
    20px;

  background:
    var(--blog-gold);

  color:
    #222 !important;

  font-size:
    11px;

  font-weight:
    600;

}


.blog-v2-read-btn i {

  transition:
    transform .25s ease;

}


.blog-v2-read-btn:hover i {

  transform:
    translateX(4px);

}


/* =========================================================
   JOURNAL SECTION
========================================================= */

.blog-journal-section {

  margin:
    70px 0;

}


.blog-journal-heading {

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    22px;

}


.blog-journal-heading h3 {

  margin:
    0;

  color:
    #fff;

  font-size:
    29px;

}


.blog-journal-heading h3 span {

  color:
    var(--blog-gold);

}


.blog-journal-heading > p {

  margin:
    0;

  color:
    #747579;

  font-size:
    10px;

}


/* Grid */

.blog-journal-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    12px;

}


.blog-v2-card {

  min-width:
    0;

  transition:
    opacity .3s ease,
    transform .3s ease;

}


.blog-v2-card.blog-filter-hidden {

  display:
    none;

}


.blog-v2-card-link {

  display:
    flex;

  flex-direction:
    column;

  height:
    100%;

  overflow:
    hidden;

  border:
    1px solid
    var(--blog-border);

  border-radius:
    15px;

  background:
    var(--blog-card);

  color:
    inherit !important;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}


.blog-v2-card-link:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(235,176,32,.25);

  box-shadow:
    0 16px 35px
    rgba(0,0,0,.17);

}


/* Card visual */

.blog-v2-card-visual {

  position:
    relative;

  min-height:
    205px;

  overflow:
    hidden;

  background:
    var(--blog-dark);

}


.blog-v2-card-visual > img {

  width:
    100%;

  height:
    205px;

  object-fit:
    cover;

  opacity:
    .78;

  transition:
    transform .55s ease,
    opacity .55s ease;

}


.blog-v2-card-link:hover
.blog-v2-card-visual > img {

  transform:
    scale(1.04);

  opacity:
    .9;

}


.blog-card-shade {

  position:
    absolute;

  inset:
    0;

  background:

    linear-gradient(
      to top,
      rgba(24,25,28,.75),
      transparent 58%
    );

}


.blog-card-number {

  position:
    absolute;

  top:
    12px;

  left:
    12px;

  width:
    31px;

  height:
    31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(235,176,32,.25);

  border-radius:
    50%;

  background:
    rgba(30,31,34,.82);

  color:
    var(--blog-gold);

  font-size:
    10px;

  font-weight:
    700;

}


/* Hover arrow */

.blog-card-hover-arrow {

  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    32px;

  height:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(235,176,32,.25);

  border-radius:
    50%;

  background:
    rgba(30,31,34,.86);

  color:
    var(--blog-gold);

  opacity:
    0;

  transform:
    translate(-4px,4px);

  transition:
    .25s ease;

}


.blog-v2-card-link:hover
.blog-card-hover-arrow {

  opacity:
    1;

  transform:
    translate(0,0);

}


/* Content */

.blog-v2-card-content {

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  padding:
    18px;

}


.blog-card-category {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    9px;

  color:
    var(--blog-gold);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .9px;

}


.blog-v2-card-content h4 {

  margin:
    0 0 10px;

  color:
    #fff;

  font-size:
    19px;

  line-height:
    1.4;

}


.blog-v2-card-content > p {

  margin:
    0;

  color:
    var(--blog-muted);

  font-size:
    12px;

  line-height:
    1.7;

}


/* Meta */

.blog-card-meta {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    auto;

  padding-top:
    18px;

  color:
    #737478;

  font-size:
    9px;

  letter-spacing:
    .7px;

}


/* Read line */

.blog-card-read {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    13px;

  color:
    var(--blog-gold);

}


.blog-card-read span {

  flex:
    0 0 auto;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .8px;

}


.blog-card-read div {

  flex:
    1;

  height:
    1px;

  background:
    rgba(235,176,32,.18);

  transform-origin:
    left;

  transition:
    background .3s ease;

}


.blog-card-read i {

  transition:
    transform .3s ease;

}


.blog-v2-card-link:hover
.blog-card-read div {

  background:
    var(--blog-gold);

}


.blog-v2-card-link:hover
.blog-card-read i {

  transform:
    translateX(4px);

}


/* =========================================================
   DATA MOTIF
========================================================= */

.blog-data-motif {

  position:
    absolute;

  left:
    16px;

  right:
    16px;

  bottom:
    15px;

  height:
    55px;

  display:
    flex;

  align-items:
    flex-end;

  gap:
    5px;

}


.blog-data-motif span {

  flex:
    1;

  max-width:
    20px;

  height:
    var(--blog-bar);

  border-radius:
    3px 3px 0 0;

  background:

    linear-gradient(
      to top,
      rgba(235,176,32,.2),
      var(--blog-gold)
    );

  transform-origin:
    bottom;

  transition:
    transform .5s ease;

}


.blog-card-data:hover
.blog-data-motif span {

  animation:
    blogBarRise .55s ease both;

}


@keyframes blogBarRise {

  from {

    transform:
      scaleY(.25);

  }

  to {

    transform:
      scaleY(1);

  }

}


/* =========================================================
   SEO MOTIF
========================================================= */

.blog-seo-motif {

  position:
    absolute;

  left:
    15px;

  right:
    15px;

  bottom:
    15px;

}


.blog-seo-motif > div {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px 11px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:
    18px;

  background:
    rgba(28,29,32,.9);

  color:
    #c7c8ca;

  font-size:
    10px;

}


.blog-seo-motif > div i {

  color:
    var(--blog-gold);

}


.blog-seo-motif small {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  margin-top:
    7px;

  color:
    var(--blog-gold);

  font-size:
    9px;

  font-weight:
    700;

}


/* =========================================================
   COMMUNITY MOTIF
========================================================= */

.blog-community-motif {

  position:
    absolute;

  left:
    18px;

  bottom:
    17px;

  width:
    105px;

  height:
    65px;

}


.community-node {

  position:
    absolute;

  z-index:
    2;

  width:
    9px;

  height:
    9px;

  border:
    2px solid
    var(--blog-gold);

  border-radius:
    50%;

  background:
    #292a2e;

  box-shadow:
    0 0 8px
    rgba(235,176,32,.25);

}


.node-1 {

  left:
    0;

  bottom:
    5px;

}


.node-2 {

  left:
    42px;

  bottom:
    38px;

}


.node-3 {

  left:
    78px;

  bottom:
    4px;

}


.node-4 {

  left:
    95px;

  bottom:
    48px;

}


.community-link {

  position:
    absolute;

  height:
    1px;

  background:
    rgba(235,176,32,.5);

  transform-origin:
    left;

}


.link-1 {

  width:
    54px;

  left:
    7px;

  bottom:
    12px;

  transform:
    rotate(-37deg);

}


.link-2 {

  width:
    49px;

  left:
    48px;

  bottom:
    43px;

  transform:
    rotate(39deg);

}


.link-3 {

  width:
    39px;

  left:
    82px;

  bottom:
    10px;

  transform:
    rotate(-70deg);

}


/* Quote */

.blog-card-quote {

  margin-top:
    14px;

  padding:
    10px 11px;

  border-left:
    2px solid
    var(--blog-gold);

  background:
    rgba(235,176,32,.025);

  color:
    #aeafb2;

  font-size:
    11px;

  font-style:
    italic;

  line-height:
    1.6;

}


/* =========================================================
   EXPLORE BY INTEREST
========================================================= */

.blog-interest-section {

  display:
    grid;

  grid-template-columns:
    .38fr .62fr;

  gap:
    45px;

  margin:
    80px 0;

  padding:
    30px;

  border:
    1px solid
    var(--blog-border);

  border-radius:
    18px;

  background:
    var(--blog-card-soft);

}


.blog-interest-heading h3 {

  margin:
    0;

  color:
    #fff;

  font-size:
    31px;

  line-height:
    1.3;

}


.blog-interest-heading h3 span {

  display:
    block;

  color:
    var(--blog-gold);

}


.blog-interest-list {

  border-top:
    1px solid
    var(--blog-border);

}


.blog-interest-item {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    34px 1fr auto 25px;

  gap:
    12px;

  align-items:
    center;

  padding:
    16px 0;

  border:
    0;

  border-bottom:
    1px solid
    var(--blog-border);

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    padding-left .25s ease,
    background .25s ease;

}


.blog-interest-item:hover {

  padding-left:
    8px;

  background:
    rgba(235,176,32,.025);

}


.blog-interest-number {

  color:
    rgba(235,176,32,.35);

  font-size:
    21px;

  font-weight:
    700;

}


.blog-interest-item small {

  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--blog-gold);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1px;

}


.blog-interest-item strong {

  color:
    #c9cacc;

  font-size:
    13px;

  font-weight:
    500;

}


.blog-interest-count {

  color:
    #66676a;

  font-size:
    9px;

  letter-spacing:
    .7px;

}


.blog-interest-item > i {

  color:
    var(--blog-gold);

  transition:
    transform .25s ease;

}


.blog-interest-item:hover > i {

  transform:
    translate(3px,-3px);

}


/* =========================================================
   THINKING OUT LOUD
========================================================= */

.blog-thinking-section {

  display:
    grid;

  grid-template-columns:
    .38fr .62fr;

  gap:
    45px;

  margin:
    80px 0;

}


.blog-thinking-intro h3 {

  margin:
    0 0 12px;

  color:
    #fff;

  font-size:
    30px;

  line-height:
    1.3;

}


.blog-thinking-intro h3 span {

  color:
    var(--blog-gold);

}


.blog-thinking-intro p {

  color:
    var(--blog-muted);

  font-size:
    12px;

  line-height:
    1.7;

}


.blog-thinking-grid {

  display:
    grid;

  gap:
    8px;

}


.blog-thinking-grid article {

  position:
    relative;

  display:
    grid;

  grid-template-columns:
    38px 1fr auto;

  column-gap:
    12px;

  align-items:
    center;

  padding:
    16px;

  border:
    1px solid
    var(--blog-border);

  border-radius:
    11px;

  background:
    var(--blog-card);

  transition:
    transform .25s ease,
    border-color .25s ease;

}


.blog-thinking-grid article:hover {

  transform:
    translateX(4px);

  border-color:
    rgba(235,176,32,.2);

}


.thinking-number {

  grid-row:
    1 / 4;

  color:
    rgba(235,176,32,.22);

  font-size:
    26px;

  font-weight:
    700;

}


.blog-thinking-grid small {

  color:
    var(--blog-gold);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1px;

}


.blog-thinking-grid h4 {

  margin:
    4px 0 0;

  color:
    #c5c6c8;

  font-size:
    13px;

  line-height:
    1.55;

}


.thinking-status {

  grid-column:
    3;

  grid-row:
    1 / 3;

  padding:
    4px 7px;

  border:
    1px solid
    rgba(235,176,32,.13);

  border-radius:
    12px;

  color:
    #717276;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .7px;

}


/* =========================================================
   FINAL JOURNAL CTA
========================================================= */

.blog-v2-final {

  display:
    grid;

  grid-template-columns:
    55px 1fr auto;

  gap:
    20px;

  align-items:
    center;

  margin:
    75px 0 35px;

  padding:
    28px;

  border:
    1px solid
    rgba(235,176,32,.18);

  border-radius:
    18px;

  background:

    radial-gradient(
      circle at right,
      rgba(235,176,32,.07),
      transparent 40%
    ),

    var(--blog-card);

}


.blog-final-mark {

  width:
    50px;

  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(235,176,32,.22);

  border-radius:
    13px;

  background:
    rgba(235,176,32,.05);

  color:
    var(--blog-gold);

  font-size:
    24px;

}


.blog-v2-final h3 {

  max-width:
    600px;

  margin:
    0 0 8px;

  color:
    #fff;

  font-size:
    23px;

  line-height:
    1.35;

}


.blog-v2-final h3 span {

  color:
    var(--blog-gold);

}


.blog-v2-final p {

  max-width:
    600px;

  margin:
    0;

  color:
    var(--blog-muted);

  font-size:
    12px;

  line-height:
    1.7;

}


.blog-v2-final-btn {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    9px 15px;

  border:
    1px solid
    var(--blog-gold);

  border-radius:
    20px;

  background:
    var(--blog-gold);

  color:
    #222 !important;

  font-size:
    12px;

  font-weight:
    600;

  white-space:
    nowrap;

}


.blog-v2-final-btn i {

  transition:
    transform .25s ease;

}


.blog-v2-final-btn:hover i {

  transform:
    translateX(4px);

}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.blog-v2-card.blog-filter-showing,
.blog-featured-article.blog-filter-showing {

  animation:
    blogFilterIn .45s ease both;

}


@keyframes blogFilterIn {

  from {

    opacity:
      0;

    transform:
      translateY(12px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

#blog.blog-animate-ready
.blog-v2-reveal {

  opacity:
    0;

  transform:
    translateY(25px);

  transition:
    opacity .65s ease,
    transform .65s
    cubic-bezier(.2,.8,.2,1);

}


#blog.blog-animate-ready
.blog-v2-reveal.is-visible {

  opacity:
    1;

  transform:
    translateY(0);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

  .blog-v2-intro {

    grid-template-columns:
      1fr;

    gap:
      17px;

  }


  .blog-featured-article {

    grid-template-columns:
      1fr;

  }


  .blog-featured-content {

    padding:
      20px;

  }


  .blog-journal-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .blog-interest-section,
  .blog-thinking-section {

    grid-template-columns:
      1fr;

    gap:
      25px;

  }


  .blog-v2-final {

    grid-template-columns:
      55px 1fr;

  }


  .blog-v2-final-btn {

    grid-column:
      2;

    justify-self:
      start;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

  .blog-v2-intro h2 {

    font-size:
      34px;

  }


  .blog-v2-filter-wrap {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .blog-v2-filter {

    width:
      100%;

  }


  .blog-filter-btn {

    flex:
      1;

    justify-content:
      center;

  }


  .blog-featured-image,
  .blog-featured-image img {

    min-height:
      240px;

  }


  .blog-featured-meta {

    grid-template-columns:
      1fr;

  }


  .blog-journal-grid {

    grid-template-columns:
      1fr;

  }


  .blog-v2-card-visual,
  .blog-v2-card-visual > img {

    min-height:
      230px;

    height:
      230px;

  }


  .blog-interest-section {

    padding:
      22px 17px;

  }


  .blog-interest-item {

    grid-template-columns:
      30px 1fr 20px;

  }


  .blog-interest-count {

    display:
      none;

  }


  .blog-thinking-grid article {

    grid-template-columns:
      35px 1fr;

  }


  .thinking-status {

    grid-column:
      2;

    grid-row:
      auto;

    justify-self:
      start;

    margin-top:
      8px;

  }


  .blog-v2-final {

    grid-template-columns:
      1fr;

    padding:
      22px 18px;

  }


  .blog-v2-final-btn {

    grid-column:
      auto;

    width:
      100%;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #blog * {

    animation:
      none !important;

    transition-duration:
      .01ms !important;

  }


  #blog
  .blog-v2-reveal {

    opacity:
      1 !important;

    transform:
      none !important;

  }

}


/* =========================================================
   READABILITY PASS — BLOG
========================================================= */


/* Main intro */

#blog .blog-v2-intro-side > p {

  font-size: 16px;

  line-height: 1.8;

}


/* Eyebrow */

#blog .blog-v2-eyebrow {

  font-size: 12px;

}


/* Filter */

#blog .blog-v2-filter-wrap > span {

  font-size: 12px;

}


#blog .blog-filter-btn {

  font-size: 13px;

}


#blog .blog-filter-btn small {

  font-size: 11px;

}


/* Stats */

#blog .blog-v2-stats span {

  font-size: 12px;

}


/* Featured article */

#blog .blog-v2-index > span,
#blog .blog-category-line {

  font-size: 12px;

}


#blog .blog-v2-index small {

  font-size: 11px;

}


#blog .blog-featured-content > p {

  font-size: 16px;

  line-height: 1.8;

}


#blog .blog-featured-meta span {

  font-size: 11px;

}


#blog .blog-featured-meta strong {

  font-size: 13px;

}


#blog .blog-v2-read-btn {

  font-size: 13px;

}


/* Article cards */

#blog .blog-card-category {

  font-size: 11px;

}


#blog .blog-v2-card-content > p {

  font-size: 14px;

  line-height: 1.75;

}


#blog .blog-card-meta {

  font-size: 11px;

}


#blog .blog-card-read span {

  font-size: 12px;

}


/* Explore by interest */

#blog .blog-interest-item small {

  font-size: 11px;

}


#blog .blog-interest-item strong {

  font-size: 15px;

}


#blog .blog-interest-count {

  font-size: 11px;

}


/* Thinking Out Loud */

#blog .blog-thinking-intro p {

  font-size: 14px;

}


#blog .blog-thinking-grid small {

  font-size: 11px;

}


#blog .blog-thinking-grid h4 {

  font-size: 15px;

}


#blog .thinking-status {

  font-size: 10px;

}


/* Final CTA */

#blog .blog-v2-final p {

  font-size: 14px;

}


#blog .blog-v2-final-btn {

  font-size: 13px;

}

/* =========================================================
   TALL DESKTOP READABILITY
========================================================= */

@media
(min-width: 992px)
and
(min-height: 760px) {


  #blog
  .blog-v2-intro-side > p {

    font-size:
      17px;

  }


  #blog
  .blog-v2-eyebrow {

    font-size:
      13px;

  }


  #blog
  .blog-filter-btn {

    font-size:
      13px;

  }


  #blog
  .blog-featured-content > p {

    font-size:
      16px;

  }


  #blog
  .blog-v2-card-content > p {

    font-size:
      15px;

  }


  #blog
  .blog-card-category,

  #blog
  .blog-card-meta {

    font-size:
      13px;

  }

}