.article-template {
  padding-top: 80px;
  padding-bottom: 80px;
}
.article-template > *:first-child {
  padding-top: 0;
}
/* Reading column: Shopify constrains the title, featured image and body to an
   870px centered column (rest of the page-width stays 1140). Applied to the
   header, hero container and rich-text content only — related articles /
   navigation keep full page-width. */
.article-template > header.page-width,
.article-template > .article-template__hero-container.page-width,
.article-template > .article-template__content.page-width,
.article-template > .article-template__divide.page-width {
  max-width: 870px;
  margin-left: auto;
  margin-right: auto;
}
/* Reference positions the 870 reading column LEFT-aligned inside a 1170
   page-width (left edge x375 @1920, centre 810 — not viewport-centred). */
@media (min-width: 1200px) {
  .article-template {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 34px;
  }
  .article-template > header.page-width,
  .article-template > .article-template__hero-container.page-width,
  .article-template > .article-template__content.page-width,
  .article-template > .article-template__divide.page-width,
  .article-template > .article-template__footer.page-width,
  .article-template > .m-related-articles.page-width {
    max-width: 870px;
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Article footer: inline tag list on the left, "Share:" + glyph row on the
   right. With no tags the share group is alone and sits left, matching the
   reference's press articles. */
.article-template__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.article-template__tags {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: rgba(90, 56, 25, 0.75);
  max-width: 430px;
}
.article-template__tags-heading {
  font-weight: 400;
  margin-right: 18px;
  color: rgb(90, 56, 25);
}
.article-template__tags a {
  color: inherit;
  text-decoration: none;
}
.article-template__tags a:hover {
  text-decoration: underline;
}
.article-template__social-sharing {
  display: flex;
  align-items: center;
}
/* Journal articles pair the share row with the tag list in two equal columns
   and right-align it against the reading column; the press and news blogs keep
   the row left-aligned across the full width. Reference switches at 640px.
   Matched positively on the journal handle: the reference actually keys this on
   the tag block being present (journal articles carry tags, press/news do not),
   and a negative :not(/press) match silently caught /blogs/news too. */
@media screen and (min-width: 640px) {
  .article-template[data-blog*="/the-journal"] .article-template__social-sharing {
    width: calc(50% - 5px);
    justify-content: flex-end;
    margin-left: auto;
  }
}
.article-template__share-label {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  color: rgb(90, 56, 25);
  margin-right: 20px;
}
.article-template__social-sharing .article-share {
  display: flex;
  align-items: center;
  gap: 16px;
}
.article-template__social-sharing .article-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 16px;
  padding: 0;
  margin: 0;
  color: rgb(90, 56, 25);
  background: none;
  border-radius: 0;
}
.article-template__social-sharing .article-share__icon {
  width: 16px;
  height: 16px;
  display: block;
}
/* Blog-level tag column. Reference: a 268px column right of the 870 reading
   column on desktop, stacked full-width under the article below 1200. */
.article-template__aside {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  padding-bottom: 40px;
}
.article-template__widget-title {
  font-family: "Jost", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  color: rgb(90, 56, 25);
  margin: 0 0 8px;
}
.article-template__tag-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -11px;
  padding: 0;
}
.article-template__tag-list li {
  display: block;
  text-transform: capitalize;
}
.article-template__tag-list a {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
  color: rgb(102, 102, 102);
  text-decoration: none;
  padding: 0 11px;
  display: inline-block;
}
.article-template__tag-list a:hover {
  color: rgb(90, 56, 25);
}
@media (min-width: 1200px) {
  .article-template:has(.article-template__aside) {
    position: relative;
  }
  .article-template__aside {
    position: absolute;
    top: 34px;
    right: 0;
    width: 268px;
    padding: 0;
  }
}
.article-template .media {
  display: block;
  position: relative;
  overflow: hidden;
}
.article-template .media > * {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.article-template .media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.article-template__hero-container {
  padding-top: 40px;
  padding-bottom: 40px;
}
.article-template__hero-container + .article-template__content {
  padding-top: 0;
}
.article-template__hero-small {
  height: 110px;
}
.article-template__hero-medium {
  height: 220px;
}
.article-template__hero-large {
  height: 330px;
}
@media screen and (min-width: 750px) and (max-width: 989px) {
  .article-template__hero-small {
    height: 220px;
  }

  .article-template__hero-medium {
    height: 440px;
  }

  .article-template__hero-large {
    height: 660px;
  }
}
@media screen and (min-width: 990px) {
  .article-template__hero-small {
    height: 275px;
  }

  .article-template__hero-medium {
    height: 550px;
  }

  .article-template__hero-large {
    height: 825px;
  }
}
.article-template .caption-with-letter-spacing {
  opacity: 0.6;
  font-weight: 400;
}
.article-template header {
  padding-top: 40px;
  padding-bottom: 20px;
}
.article-template__title {
  padding-bottom: 20px;
}
/* Article title: Shopify reference 36px / weight 400 / centered (was 30px
   .title4 / 500 / left). Double the class to out-specify the bare .title4 rule
   (R-15: assert letter-spacing). */
.article-template__title.title4 {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.4;
  text-align: center;
}
/* Article body copy: Shopify reference 16px / line-height 24px / brown
   rgb(90,56,25) — measured live on the Shopify article <p> (four paragraphs,
   all #5a3819). Scoped to the article rich-text content. */
.article-template__content.rte,
.article-template__content.rte p,
.article-template__content.rte li {
  font-size: 16px;
  line-height: 24px;
  color: rgb(90, 56, 25) !important;
}
.article-template__content.rte p {
  margin-bottom: 12px;
}
.article-template__link {
  display: flex;
  text-decoration: none;
  align-items: center;
}
.article-template__link .icon-wrap {
  display: flex;
  margin-right: 10px;
  transform: rotate(90deg);
  position: relative;
  transform-origin: center;
  width: 10px;
  height: 10px;
}
.article-template__content {
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}
.article-template__divide {
  width: 100%;
}
.article-template__divide:before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(var(--color-entry-line));
}
.article-template__footer {
  padding-top: 40px;
  padding-bottom: 40px;
}
.article-template__comment-title {
  text-transform: uppercase;
  padding-bottom: 40px;
}
.article-template__comments-comment {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  width: 100%;
  min-height: 145px;
  background: var(rgba(--color-page-background));
  border: 1px solid rgb(var(--color-entry-line));
  border-radius: var(--card-border-radius);
  margin-bottom: 20px;
}
.article-template__comments-comment .caption-with-letter-spacing {
  opacity: 1;
}
.article-template__comments-comment .right {
  text-align: right;
  padding-top: 30px;
}
.article-template__comments-comment:last-of-type {
  padding-bottom: 0;
}
.article-template__comment-warning {
  margin-top: 20px;
}
.article-template__comment-submit {
  text-align: center;
  padding-top: 40px;
}
.article-template__back {
  padding-top: 40px;
  padding-bottom: 80px;
}
.article-template .circle-divider::after {
  content: "\2022";
  margin: 0 13px 0 15px;
}
.article-template .circle-divider:last-of-type::after {
  display: none;
}
.article-template .comment_title {
  text-transform: uppercase;
  padding-bottom: 40px;
}
.article-template .field__info {
  padding-bottom: 40px;
}
.article-template__comments-fields > .field:last-child {
  margin-bottom: 0;
}
@media (min-width: 960px) {
  .article-template .article-template__comment-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
  }
}
@media (max-width: 959px) {
  .article-template {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .article-template__hero-container {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .article-template header {
    padding-top: 20px;
  }
  .article-template__content {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .article-template__footer {
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .article-template__tags {
    max-width: 100%;
  }
  .article-template__back {
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .article-template__comment-wrapper {
    padding-bottom: 40px;
  }
  .article-template__comments-comment {
    padding: 20px;
    min-height: 100px;
  }
  .article-template .comment_title {
    padding-bottom: 20px;
  }
  .article-template__comments {
    padding-bottom: 40px;
  }
  .article-template__comment-title {
    padding-bottom: 20px;
  }
  .article-template__comment-warning {
    margin-top: 10px;
  }
  .article-template .field__info {
    padding-bottom: 20px;
  }
  .article-template__comment-submit {
    padding-top: 30px;
  }
}
.m-article-navigation {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-top: 20px;
  padding-bottom: 40px;
}
.m-article-navigation__prev {
  text-align: left;
}
.m-article-navigation__next {
  text-align: right;
  margin-left: auto;
}
.m-article-navigation__link {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
}
.m-article-navigation__label {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: rgb(90, 56, 25);
  margin-bottom: 6px;
}
.m-article-navigation__title {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(90, 56, 25);
}

/* Reference block: h3 heading 30/400/36 centred with 60px under it, then a
   single 264px card row - no section padding of its own. */
.m-related-articles {
  padding-top: 0;
  padding-bottom: 0;
}
.m-related-articles__heading {
  margin-bottom: 60px;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: normal;
  text-align: center;
}
.m-related-articles__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 40px;
  margin: 0;
  padding: 0;
}
/* Reference thumbnails are a fixed 56% band (270x152). Here the card image sits
   in normal flow at its natural height, so a 1919x1080 source rendered a
   263x2160 tower and pushed the section past 3400px. Pin the ratio and fill it. */
.m-related-articles__list .simple-blog__image-box {
  position: relative;
  height: 0;
  padding-bottom: 56.3%;
  overflow: hidden;
}
/* Reference card is title-only: no tag/author eyebrow, no "Read more". The
   shared blog-card snippet still renders both for the blog index, so they are
   hidden here rather than removed. */
.m-related-articles__list .simple-blog__meta-tag,
.m-related-articles__list .simple-blog__readmore,
.m-related-articles__list .simple-blog__extra-info {
  display: none;
}
.m-related-articles__list .simple-blog__image-wrapper {
  display: block;
  margin-bottom: 0;
}
.m-related-articles__list .simple-blog__main {
  padding: 20px 0 0;
}
.m-related-articles__list .simple-blog__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: normal;
  text-align: left;
}
.m-related-articles__list .simple-blog__image-box img,
.m-related-articles__list .simple-blog__image-box picture,
.m-related-articles__list .simple-blog__image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.m-related-articles__list .simple-blog__image-box,
.m-related-articles__list .simple-blog__image {
  border-radius: 0;
}
.m-related-articles__list .simple-blog {
  background: transparent;
}
/* The .simple-blog card carries an intrinsic ~1280px width that blows the grid
   track out (and inflates document scrollWidth -> real horizontal page scroll,
   576px @1440 / 910px @390). Clamp the card, its image box and image to the
   grid cell so the track never exceeds its share. */
.m-related-articles__list .m-related-articles__item,
.m-related-articles__list .simple-blog,
.m-related-articles__list .simple-blog__image-box,
.m-related-articles__list .simple-blog__image {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 959px) {
  .m-article-navigation {
    gap: 20px;
  }
  .m-related-articles__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }
  .m-article-navigation__label {
    letter-spacing: normal;
  }
  .m-article-navigation__title {
    letter-spacing: normal;
  }
}
/* Related articles below 1200: the reference tightens the heading gap to 40px,
   and to 30px once the card typography steps down. */
@media (max-width: 1199px) {
  .m-related-articles__heading {
    margin-bottom: 40px;
  }
}
/* Phone: the reference swaps the grid for a horizontally scrollable strip that
   bleeds to both edges — cards are 66vw (257.4 @390) with a 16px gutter, so the
   next card peeks. The negative margin cancels the 15px page gutter and the
   matching padding keeps the first card aligned to the text column. */
@media (max-width: 749px) {
  .m-related-articles__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 66vw;
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    overflow-x: auto;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 639px) {
  .m-related-articles__heading {
    margin-bottom: 30px;
  }
  .m-related-articles__list .simple-blog__title {
    font-size: 18px;
    line-height: 25.2px;
  }
}
/* The ipad end responds to the mobile end in vertical screen */
/* detectingScreen need to consider the configuration of the tablet */

/* ===== R37 — article header/meta/links parity vs Shopify reference. ===== */
/* Eyebrow = blog name (ref "NEWS"): 12/500 uppercase, ls .5, brown @75%. */
.article-template__eyebrow {
  display: block;
  text-align: center;
  font-family: "Jost", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(90, 56, 25, 0.75);
  text-decoration: none;
  margin-bottom: 6px;
}
.article-template__header {
  text-align: center;
}
/* Meta "by {author} on {date}": 16/400 grey, centred (ref). */
.article-template__meta {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgb(102, 102, 102);
  opacity: 1;
  margin: 0;
}
.article-template__meta span {
  font-weight: 400;
}
/* Article body links: the reference draws its rule as a pair of absolutely
   positioned 1px lines (bottom 3px, currentColor) that swipe on hover - the
   ::before retracts to the right while the ::after grows from the left - not as
   a text-decoration. Earlier rounds read the missing text-decoration as "no
   underline" and suppressed the theme's own; port the reference mechanism. */
.article-template__content.rte a,
.article-template__content.rte a:hover {
  position: relative;
  padding: 0;
  text-decoration: none;
}
.article-template__content.rte a::before,
.article-template__content.rte a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.article-template__content.rte a::before {
  transform: scaleX(1);
  transform-origin: right center;
  transition-delay: 0.3s;
}
.article-template__content.rte a::after {
  transform: scaleX(0);
  transform-origin: left center;
}
.article-template__content.rte a:hover::before {
  transform: scaleX(0);
  transition-delay: 0s;
}
.article-template__content.rte a:hover::after {
  transform: scaleX(1);
  transition-delay: 0.3s;
}

/* Adapt hero: the reference renders the featured image at its own aspect ratio
   in the 870 column (2:1, 4:3, 1:1, 2:3 - it varies per article). Shopline's
   article.image.aspect_ratio is absent here, so instead of a padding-bottom
   ratio the image is left in flow at its intrinsic ratio, which reproduces the
   reference exactly without needing the dimensions in Liquid. */
.article-template__hero-adapt {
  height: auto;
  padding-bottom: 0;
}
/* base.css pins `.media > *` to absolute/100% at (0,0,3,1); these need to
   outrank it so the image can size itself. */
.article-template .article-template__hero-adapt.media > *:not(.zoom):not(.deferred-media__poster-button),
.article-template .article-template__hero-adapt.media img,
.article-template .article-template__hero-adapt.media picture,
.article-template .article-template__hero-adapt.media picture img {
  position: static;
  display: block;
  height: auto;
  width: 100%;
  max-width: 100%;
  object-fit: fill;
}

/* ===== R44 — B-6 / B-7 / B-8: dividers and body typography vs the reference. */
/* h1: reference line-height 51.984 with a 10px gap under it (was 50.4 + 20px
   padding). */
.article-template .article-template__title.title4 {
  line-height: 51.984px;
  padding-bottom: 0;
  margin-bottom: 10px;
}
@media (max-width: 749px) {
  .article-template .article-template__title.title4 {
    font-size: 26px;
    line-height: 37.544px;
  }
}
/* Eyebrow colour: the R37 rule is out-specified by the theme's link colour. */
.article-template .article-template__eyebrow {
  color: rgba(90, 56, 25, 0.75);
}
/* The reference has no rule between the byline and the body. */
.article-template .article-template__divide {
  display: none;
}
/* Body headings: reference 36/400/46.008 with 36px above and 30.6px below
   (theme renders 36/500/43.2 with no margins). */
.article-template__content.rte h1,
.article-template__content.rte h2,
.article-template__content.rte h3 {
  font-weight: 400;
  line-height: 46.008px;
  letter-spacing: normal;
  margin: 36px 0 30.6px;
}
/* Below 1200 the reference steps the body heading scale down twice (a tablet
   set at 750-1199 and a phone set at <=749); the theme keeps one desktop size,
   so a body h3 rendered 22/46 at 390 against the reference's 25/34. Margins are
   1em above / 0.85em below at every step, and h4/h5 also drop to weight 400. */
@media screen and (max-width: 1199px) {
  .article-template__content.rte h1 {
    font-size: 42px;
    line-height: 51.996px;
    margin: 42px 0 35.7px;
  }
  .article-template__content.rte h2 {
    font-size: 33px;
    line-height: 40.755px;
    margin: 33px 0 28.05px;
  }
  .article-template__content.rte h3 {
    font-size: 28px;
    line-height: 38.08px;
    margin: 28px 0 23.8px;
  }
}
@media screen and (max-width: 749px) {
  .article-template__content.rte h1 {
    font-size: 36px;
    line-height: 46.008px;
    margin: 36px 0 30.6px;
  }
  .article-template__content.rte h2 {
    font-size: 29px;
    line-height: 36.743px;
    margin: 29px 0 24.65px;
  }
  .article-template__content.rte h3 {
    font-size: 25px;
    line-height: 34px;
    margin: 25px 0 21.25px;
  }
}
.article-template__content.rte h4 {
  font-weight: 400;
  font-size: 24px;
  line-height: 31.992px;
  letter-spacing: normal;
  margin: 24px 0 20.4px;
}
.article-template__content.rte h5 {
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: normal;
  margin: 18px 0 15.3px;
}
@media screen and (max-width: 1199px) {
  .article-template__content.rte h4 {
    font-size: 19px;
    line-height: 26.6px;
    margin: 19px 0 16.15px;
  }
  .article-template__content.rte h5 {
    font-size: 16px;
    line-height: 24px;
    margin: 16px 0 13.6px;
  }
}
/* Body rules: reference is a single hairline in the text colour with no
   surrounding margin (the browser default renders a 2px inset grey band). */
.article-template__content.rte hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid rgb(90, 56, 25);
}