/* Blog index system shared across the Long Island Webmaster site network. */
body.liwm-blog-index main {
  background: #f4f4f1;
}

body.liwm-blog-index .page-hero,
body.liwm-blog-index .profile-page-hero {
  padding-block: clamp(52px, 6vw, 82px);
  background: #050505;
  color: #fff;
  text-align: center;
}

body.liwm-blog-index .page-hero .container,
body.liwm-blog-index .profile-page-hero .container,
body.liwm-blog-index .blog-index-intro {
  width: min(calc(100% - 48px), 900px);
  margin-inline: auto;
  text-align: center;
}

body.liwm-blog-index .page-hero h1,
body.liwm-blog-index .profile-page-hero h1,
body.liwm-blog-index .blog-index-intro h1 {
  max-width: 14ch;
  margin-inline: auto;
  font-size: clamp(46px, 6vw, 76px);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

body.liwm-blog-index .page-hero p:last-child,
body.liwm-blog-index .profile-page-hero p:last-child,
body.liwm-blog-index .blog-index-intro > p:last-child {
  max-width: 680px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
}

body.liwm-blog-index .section.light,
body.liwm-blog-index .profile-content,
body.liwm-blog-index .blog-index {
  padding-block: clamp(58px, 6vw, 84px) !important;
  background: #f4f4f1 !important;
  color: #111 !important;
}

body.liwm-blog-index .blog-grid,
body.liwm-blog-index .greg-blog-grid,
body.liwm-blog-index .blog-index .blog-grid {
  display: grid !important;
  width: min(100%, 1160px) !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 20px !important;
}

body.liwm-blog-index .blog-card,
body.liwm-blog-index .greg-blog-card,
body.liwm-blog-index .blog-index .blog-card,
body.liwm-blog-index .blog-index .blog-card:first-child {
  display: flex !important;
  min-width: 0 !important;
  min-height: 340px !important;
  padding: 34px !important;
  flex-direction: column !important;
  align-items: center !important;
  border: 1px solid #202020 !important;
  border-top: 5px solid #fff000 !important;
  background: #050505 !important;
  color: #fff !important;
  text-align: center !important;
  box-shadow: none !important;
  transform: none !important;
}

body.liwm-blog-index .blog-card::before,
body.liwm-blog-index .blog-index .blog-card::before,
body.liwm-blog-index .blog-index .blog-card:first-child::before {
  content: none !important;
}

body.liwm-blog-index .blog-card .eyebrow,
body.liwm-blog-index .greg-blog-card .section-label,
body.liwm-blog-index .blog-card-kicker {
  margin: 0 0 16px !important;
  color: #fff000 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

body.liwm-blog-index .blog-card h2,
body.liwm-blog-index .greg-blog-card h2,
body.liwm-blog-index .blog-card h3,
body.liwm-blog-index .blog-index .blog-card:first-child h3 {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  font-size: clamp(28px, 2.5vw, 38px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}

body.liwm-blog-index .blog-card h2 a,
body.liwm-blog-index .greg-blog-card h2 a,
body.liwm-blog-index .blog-card h3 a,
body.liwm-blog-index .blog-index .blog-card:first-child h3 a {
  display: block !important;
  min-height: 0 !important;
  color: #fff !important;
  font: inherit !important;
  text-align: center !important;
}

body.liwm-blog-index .blog-card .byline,
body.liwm-blog-index .greg-blog-card .greg-byline,
body.liwm-blog-index .blog-post-meta,
body.liwm-blog-index .blog-post-meta a {
  justify-content: center !important;
  margin: 14px auto 0 !important;
  color: #fff !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-align: center !important;
}

body.liwm-blog-index .blog-card > p:not(.eyebrow),
body.liwm-blog-index .greg-blog-card > p:not(.section-label):not(.greg-byline),
body.liwm-blog-index .blog-index .blog-card > p {
  width: min(100%, 52ch) !important;
  min-height: 0 !important;
  margin: 18px auto 26px !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

body.liwm-blog-index .blog-card > a:last-child,
body.liwm-blog-index .greg-blog-card > a:last-child,
body.liwm-blog-index .blog-index .blog-card > a:last-child,
body.liwm-blog-index .blog-index .blog-card:first-child > a:last-child {
  display: inline-flex !important;
  width: min(100%, 290px) !important;
  min-height: 46px !important;
  margin: auto auto 0 !important;
  padding: 11px 16px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #fff000 !important;
  background: transparent !important;
  color: #fff000 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

body.liwm-blog-index .blog-card > a:last-child:hover,
body.liwm-blog-index .greg-blog-card > a:last-child:hover {
  background: #fff000 !important;
  color: #050505 !important;
}

body.liwm-blog-index .blog-grid > :last-child:nth-child(odd),
body.liwm-blog-index .greg-blog-grid > :last-child:nth-child(odd) {
  width: calc(50% - 10px);
  grid-column: 1 / -1;
  justify-self: center;
}

@media (max-width: 760px) {
  body.liwm-blog-index .page-hero .container,
  body.liwm-blog-index .profile-page-hero .container,
  body.liwm-blog-index .blog-index-intro {
    width: calc(100% - 36px);
  }
  body.liwm-blog-index .page-hero h1,
  body.liwm-blog-index .profile-page-hero h1,
  body.liwm-blog-index .blog-index-intro h1 {
    font-size: clamp(40px, 11vw, 54px) !important;
  }
  body.liwm-blog-index .blog-grid,
  body.liwm-blog-index .greg-blog-grid,
  body.liwm-blog-index .blog-index .blog-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  body.liwm-blog-index .blog-grid > :last-child:nth-child(odd),
  body.liwm-blog-index .greg-blog-grid > :last-child:nth-child(odd) {
    width: 100%;
    grid-column: auto;
  }
  body.liwm-blog-index .blog-card,
  body.liwm-blog-index .greg-blog-card,
  body.liwm-blog-index .blog-index .blog-card,
  body.liwm-blog-index .blog-index .blog-card:first-child {
    min-height: 0 !important;
    padding: 28px 22px !important;
  }
  body.liwm-blog-index .blog-card h2,
  body.liwm-blog-index .greg-blog-card h2,
  body.liwm-blog-index .blog-card h3,
  body.liwm-blog-index .blog-index .blog-card:first-child h3 {
    font-size: clamp(27px, 8vw, 35px) !important;
  }
}

/* Keep the responsive MENU control compact and identical across the network. */
@media (max-width: 1020px) {
  .liwm-menu-toggle,
  .mobile-menu {
    display: inline-flex !important;
    width: auto !important;
    min-width: 58px !important;
    min-height: 40px !important;
    padding: 10px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }
}

/* Long Island Webmaster uses older page markup, so normalize it explicitly. */
.liwm-site .brand-name small {
  display: block !important;
  margin-top: 5px !important;
  color: #fff !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  line-height: 1.15 !important;
}

.liwm-site .page-hero .blog-post-meta {
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 16px auto 0 !important;
  text-align: center !important;
}

.liwm-site .page-shell.blog-post {
  padding-block: clamp(46px, 5vw, 64px) !important;
}

.liwm-site .blog-post > .container {
  width: min(calc(100% - 48px), 900px) !important;
  margin-inline: auto !important;
}

.liwm-site .blog-post .article {
  width: 100% !important;
  max-width: 860px !important;
  margin-inline: auto !important;
}

.liwm-site .blog-post .article > h2 {
  margin: 36px 0 14px !important;
  font-size: clamp(29px, 4vw, 42px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
  text-align: center !important;
  text-wrap: balance;
}

.liwm-site .blog-post .article > h2:first-child {
  margin-top: 0 !important;
}

.liwm-site .blog-post .article > p {
  margin: 0 0 18px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.liwm-site .blog-post .article > ul,
.liwm-site .blog-post .article > ol {
  margin: 10px 0 24px !important;
  padding-left: 24px !important;
}

.liwm-site .blog-post .article li {
  margin-block: 8px !important;
  line-height: 1.6 !important;
}

.liwm-site .liwm-article-actions {
  margin: 32px 0 0 !important;
  text-align: center !important;
}

.liwm-site .liwm-article-actions .service-cta {
  display: inline-flex !important;
  width: min(100%, 390px) !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  padding: 12px 18px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
}

@media (max-width: 620px) {
  .liwm-site .blog-post > .container {
    width: calc(100% - 36px) !important;
  }
  .liwm-site .blog-post .article > h2 {
    margin-top: 30px !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
  }
  .liwm-site .brand-name {
    max-width: calc(100vw - 145px) !important;
  }
  .liwm-site .brand-name small {
    font-size: 6px !important;
    letter-spacing: .1em !important;
  }
}

/* One polished author and contact treatment after every blog article. */
.author-card,
.greg-author,
.liwm-author-card {
  display: grid !important;
  width: 100% !important;
  margin: 40px auto 0 !important;
  padding: 28px !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  border: 1px solid #d8d8d3 !important;
  border-top: 5px solid #fff000 !important;
  background: #fff !important;
  color: #151515 !important;
  text-align: center !important;
}

.author-card img,
.greg-author img,
.liwm-author-card img {
  width: 104px !important;
  height: 104px !important;
  margin: auto !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.author-card > div,
.greg-author > div,
.liwm-author-card > div {
  min-width: 0 !important;
  text-align: center !important;
}

.author-card h2,
.greg-author h2,
.liwm-author-card h2 {
  margin: 5px 0 9px !important;
  color: #111 !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.author-card p,
.greg-author p,
.liwm-author-card p {
  max-width: 620px !important;
  margin: 0 auto !important;
  color: #151515 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

.author-card .eyebrow,
.greg-author .section-label,
.liwm-author-card .eyebrow {
  margin: 0 !important;
  color: #151515 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-align: center !important;
}

.liwm-author-actions {
  display: flex !important;
  width: 100% !important;
  margin: 17px auto 0 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.liwm-author-actions a {
  display: inline-flex !important;
  width: min(100%, 220px) !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #111 !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-decoration: none !important;
}

.liwm-author-actions a:last-child {
  border-color: #fff000 !important;
  background: #fff000 !important;
  color: #111 !important;
}

@media (max-width: 620px) {
  .author-card,
  .greg-author,
  .liwm-author-card {
    padding: 25px 20px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .author-card img,
  .greg-author img,
  .liwm-author-card img {
    width: 88px !important;
    height: 88px !important;
  }
  .liwm-author-actions {
    width: min(100%, 300px) !important;
    flex-direction: column !important;
  }
  .liwm-author-actions a {
    width: 100% !important;
  }
}

@media (max-width: 550px) {
  .liwm-menu-header .container {
    gap: 10px !important;
  }
  .liwm-menu-brand {
    max-width: calc(100% - 62px) !important;
    gap: 8px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  .liwm-menu-mark {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    font-size: 9px !important;
  }
  .liwm-menu-brand small {
    margin-top: 4px !important;
    font-size: 5.5px !important;
    letter-spacing: .6px !important;
    white-space: nowrap !important;
  }
  .liwm-menu-toggle {
    min-width: 52px !important;
    padding-inline: 5px !important;
  }
}