/*! blog-posts */.blog-grid{--card-grid-gap: var(--sp-10) var(--sp-4)}@media screen and (min-width:1024px){.blog-grid{--card-grid-gap: clamp(40px, 3.5vw, 60px)}}@media screen and (pointer:fine){.article-card__image{--tw-scale-x: 1;--tw-scale-y: 1;transform:scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition:transform var(--animation-primary)}.article-card__link:hover .article-card__image{--tw-scale-x: 1.05;--tw-scale-y: 1.05}}.article-card__media{border-radius:var(--card-radius)}.article-card__title{font-family:var(--font-product-family);font-weight:var(--font-product-weight);text-transform:var(--font-product-text-transform)}.article-card__top{row-gap:var(--sp-2)}.article-card__top li{padding-inline-end:var(--sp-4)}.article-card__top li:after{content:"";position:absolute;inset-inline-end:0;width:1px;height:16px;background-color:currentColor;opacity:.3}.article-card__top li:last-child{padding-inline-end:0}.article-card__top li:last-child:after{content:none}.article-card__top .icon{width:var(--sp-4);height:var(--sp-4)}.article-card .badge--custom{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--badge-foreground);background-color:var(--badge-background)}@media screen and (pointer:fine){.article-card .badge{--tw-scale-x: 1;--tw-scale-y: 1;transform:scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition:var(--animation-primary);transition-property:transform}.article-card .badge:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05}}/*! collage layout */.blog-collage .article-card:nth-child(1) .article-card__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.5;background-color:color-mix(in oklab,rgb(var(--color-foreground)) 50%,#000000)}.blog-collage .article-card:nth-child(1) .article-card__image{width:100%}.blog-collage .article-card:nth-child(1):not(.without-image) .article-card__content{position:absolute;inset:var(--card-grid-gap);inset-block-start:unset;color:#fff}.blog-collage .article-card:nth-child(1):not(.without-image) .article-card__title{color:inherit}.blog-collage .article-card:nth-child(1) .article-card__title{font-size:clamp(var(--text-2xl),2.526vw,var(--text-5xl))}.blog-collage .article-card:nth-child(1) .reversed-link{--reversed-link-gap: min(100%, 1.12em)}@media screen and (max-width:639px){.blog-collage{--card-grid-per-row: 1}.blog-collage .article-card:nth-child(1) .article-card__image{aspect-ratio:4 / 5}.blog-collage .article-card:nth-child(1) .article-card__bottom{display:none}}@media screen and (min-width:640px){.blog-collage .article-card:nth-child(1){grid-column:span 2}}@media screen and (min-width:1024px){.blog-collage{grid-template-rows:1fr 1fr;grid-template-columns:repeat(24,minmax(0,1fr))}.blog-collage .article-card{grid-column:span 8}.blog-collage .article-card:nth-child(1){grid-column:span 14;grid-row:span 2}.blog-collage.with-only4 .article-card:nth-child(1){grid-row:span 3}.blog-collage .article-card:nth-child(1) .article-card__content>.grid{gap:var(--sp-7d5)}.blog-collage .article-card:nth-child(1) .article-card__title{line-height:1}.blog-collage .article-card:nth-child(1) .article-card__top+p{max-width:75%}.blog-collage .article-card:nth-child(1) .article-card__bottom{font-size:var(--fluid-base-to-xl)}.blog-collage .article-card:nth-child(1) .article-card__content .text-xs{font-size:var(--text-sm);line-height:1.25}.blog-collage .article-card:nth-child(1) .article-card__content .text-sm{font-size:var(--text-base)}.blog-collage .article-card:is(:nth-child(2),:nth-child(3)),.blog-collage.with-only4 .article-card:nth-child(4){grid-column:span 10;flex-direction:row}.blog-collage .article-card:is(:nth-child(2),:nth-child(3)) .article-card__media,.blog-collage.with-only4 .article-card:nth-child(4) .article-card__media{flex:0 0 40%}.blog-collage .article-card:is(:nth-child(1),:nth-child(2),:nth-child(3)) :is(.article-card__media,.article-card__link,.article-card__image),.blog-collage.with-only4 .article-card:nth-child(4) :is(.article-card__media,.article-card__link,.article-card__image){height:100%}.blog-collage .article-card:nth-child(3),.blog-collage.with-only4 .article-card:nth-child(4){margin-block-start:var(--sp-3);padding-block-start:var(--sp-3)}/*! mountainFLOW: no rule above the third post.

      The theme drew a line between the tall lead post and the stack beside it. The design
      separates them with space alone, and nowhere else on the site does one blog card rule
      itself off from the next -- the spacing above is kept, only the line goes. */}@media screen and (min-width:1536px){.blog-collage .article-card:is(:nth-child(2),:nth-child(3)),.blog-collage.with-only4 .article-card:nth-child(4){gap:var(--sp-10)}.blog-collage .article-card:is(:nth-child(2),:nth-child(3)) .article-card__media,.blog-collage.with-only4 .article-card:nth-child(4) .article-card__media{flex:0 0 45%}}@media screen and (min-width:640px)and (max-width:1023px){.slider .blog-collage.with-only3{--card-grid-per-row: 2}.slider .blog-collage.with-only4{--card-grid-per-row: 3}.slider .blog-collage.with-only4 .article-card:nth-child(1){grid-column:span 3}}@media screen and (pointer:fine){.blog-collage .article-card:nth-child(1):hover .article-card__image{--tw-scale-x: 1.05;--tw-scale-y: 1.05}}/*! blog with one post */@media screen and (min-width:1024px){.blog-grid.with-only1{display:flex;justify-content:center}.blog-grid.with-only1 .article-card{flex:0 0 62.5%}}/*! mountainFLOW: upper bound removed (was max-width: 1279px).

    From 1024 up the secondary cards stack -- `display: grid` cancels the
    `flex-direction: row` set in the >=1024 block -- and their images go 16/9.
    That is the arrangement the design draws: a portrait lead card beside a column
    of landscape cards.

    The stock rule stopped at 1279, so the secondary cards flipped back to
    horizontal, image-left from 1280 up -- including the 1440 the homepage is
    designed at, and every wider desktop. There is no design above 1440 that calls
    for the horizontal variant, so the stacked treatment now holds at every width
    above 1024 rather than being capped at another arbitrary breakpoint. */@media screen and (min-width:1024px){.blog-collage .article-card:is(:nth-child(2),:nth-child(3)),.blog-collage.with-only4 .article-card:nth-child(4){display:grid;gap:var(--sp-6)}.blog-collage .article-card:is(:nth-child(2),:nth-child(3)) .article-card__image,.blog-collage.with-only4 .article-card:nth-child(4) .article-card__image{aspect-ratio:608 / 270}}/*! mountainFLOW: tags read Navy on white here -- the theme's default is the
    inverse, foreground on background. Swapping the two custom properties rather
    than background-color and color keeps the badge's own rules (padding, radius,
    hover) intact. Outside a media query on purpose: the tags sit on the image at
    every width. */.blog-collage .badge{--badge-background: #ffffff;--badge-foreground: #1c4067;font-family:var(--font-body-family);font-size:16px;font-weight:500}/*! mountainFLOW: the design's grid is 1240 x 816 -- two 608 columns, 24px apart.

    The lead card spans both rows, so it never sets the grid's height: the two
    stacked cards on the right do, and the lead image simply stretches to whatever
    they add up to. That is why it reads as too tall.

    The height is corrected by shortening those two cards rather than by pinning
    the grid to a height. Forcing one -- with aspect-ratio or max-height -- squeezes
    `grid-template-rows: 1fr 1fr` below what the cards need and they overflow the
    box instead of the box fitting them.

    The theme splits 14/10 of 24 columns (58/42) with a fluid 40-60px gutter; the
    design is an even 49/49 at 24px, so the lead card was also ~115px too wide. */@media screen and (min-width:1024px){.blog-collage{--card-grid-gap: 28px 24px;grid-template-rows:auto auto}.blog-collage .article-card:nth-child(1),.blog-collage .article-card:is(:nth-child(2),:nth-child(3)){grid-column:span 12}/*! Date: Futura PT 20px / 600, uppercase, Middle Blue. The body family carries
      600 (Demi); futura-pt-bold only publishes 700. Overrides the card's
      `text-xs`.

      The lead card needs its own selector rather than sharing the first: the theme
      sizes that one through
      `.article-card:nth-child(1) .article-card__content .text-xs` (five classes),
      which outranks a plain `.blog-collage .article-card__top > li`, so the lead
      date kept the theme's smaller size while the other two took this rule. */.blog-collage .article-card__top>li,.blog-collage .article-card:nth-child(1) .article-card__content .article-card__top>li{font-family:var(--font-body-family);font-size:20px;font-weight:600;text-transform:uppercase;color:#5178af}/*! The design shows the date on its own, without the calendar glyph. */.blog-collage .article-card__top>li>svg{display:none}/*! 10px between date, title and excerpt. Two nested wrappers both carry a gap:
      .article-card__content is gap-5 / md:gap-8, and inside it an unnamed
      `div.grid` is gap-4 / md:gap-5 -- and it is that inner one which actually
      spaces the three, so setting only the outer leaves 20px in place.

      The lead card gets a third selector: the theme gives its inner grid
      `gap: var(--sp-7d5)` (30px) through a four-class selector, which outranks the
      plain one above -- so without this the first card stayed at 30px while the
      other two moved to 10px. */.blog-collage .article-card__content,.blog-collage .article-card__content>.grid,.blog-collage .article-card:nth-child(1) .article-card__content>.grid{gap:10px}/*! Excerpt: Futura PT 19px / 400. The body family carries 400 (Book). The lead
    card is listed separately because the theme sizes its excerpt through a
    four-class selector, which outranks the plain one. */.blog-collage .article-card__bottom,.blog-collage .article-card:nth-child(1) .article-card__bottom{font-family:var(--font-body-family);font-size:19px;font-weight:400}/*! Two excerpt colours, because the two sit on different grounds: the lead
    card's content is laid over its photo, the other two sit on the page.
    #e0e1e3 is the design's Light Grey. */.blog-collage .article-card:nth-child(1) .article-card__bottom{color:#e0e1e3}.blog-collage .article-card:is(:nth-child(2),:nth-child(3)) .article-card__bottom{color:#3e4144}/*! Title: Futura PT 24px / 700. The heading family is required here, since Bold
    lives in futura-pt-bold and futura-pt's own 700 is Heavy. Overrides
    `text-lg-2xl`, and the more specific nth-child(1) title rules below. */.blog-collage .article-card .article-card__title{font-family:var(--font-heading-family);font-size:24px;font-weight:700}/*! Store excerpts run four or five lines where the design shows one, which is
    the other half of the extra height. */.blog-collage .article-card:is(:nth-child(2),:nth-child(3)) .article-card__bottom{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/blog.css.map */