/* ── Journal: hueylightshop.com's featured blog post
   (#shopify-section-template--21595386871962__featured_blog_post_gNRbaE),
   cloned from its inline section styles and custom.css (refs/huey/home.html,
   custom.css) and box-checked at 1905, 1024 and 390.
     grid     from 990 up four columns 1fr 1.5fr 1fr .75fr, 32 px apart, tops
              aligned; under 990 one column, 24 px apart, and no "All Articles"
     left     the flourish label, then a short paragraph 40 px in, 65% wide
              (80% and 23 px to 990) with an italic phrase
     centre   a 463:533 picture, cover
     right    a small-caps kicker, a 25 px title (balanced), the excerpt and
              their bracket button pulled 8 px left
     corner   【 ALL Articles 】 at the top right of the last column
     padding  64 px 38 px 80 px from 750 up, 15 px on phones (their page-width)
     motion   Dawn's scroll-trigger: the whole block slides up 20 px and fades
              in, .6s cubic-bezier(0, 0, .3, 1); none for reduced motion (js/jn.js)
   Their ink #374454 -> our navy #2a4254; words ours (the excerpt is how an order
   really works). Picture: Sama's BFF magazine, a stand-in. There is no journal
   page yet: both links go to policy.html (TODO in the markup). */
.jn { --jn-ink: #2a4254; color: var(--jn-ink); }
.jn-wrap { padding: 15px; }
@media (min-width: 750px) { .jn-wrap { padding: 64px 38px 80px; } }

.jn-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 990px) { .jn-grid { grid-template-columns: 1fr 1.5fr 1fr .75fr; align-items: start; gap: 32px; } }
.jn-grid * { color: var(--jn-ink); }

.jn-head { margin-bottom: 8px; }
.jn .jn-label { margin: 11.62px 0; }

.jn-desc p, .jn-excerpt p { margin: 0; font: 400 clamp(8px, 3vw, 16px) / 105.1% var(--f-body); letter-spacing: 0; }
.jn-desc p { width: 65%; margin-left: 40px; }
.jn-desc em { font-style: italic; }

.jn-pic { position: relative; overflow: hidden; aspect-ratio: 463 / 533; background: rgb(42 66 84 / .1); }
.jn-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.jn-kicker {
  margin: 14px 0 8px; padding-bottom: 30px;
  font: 400 14px / 1 var(--f-head); letter-spacing: .1em; text-transform: uppercase;
}
.jn-title { margin: 10px 0 12px; font-size: clamp(12px, 3vw, 25px); font-weight: 400; text-wrap: balance; }
.jn-title a {
  display: block; color: currentColor; text-decoration: none;
  font: inherit; font-family: var(--f-body); line-height: 105%; letter-spacing: 0;
}
.jn-excerpt { margin-bottom: 16px; }

.jn .jn-more, .jn .jn-all { margin-left: -8px; }

.jn-all-col { display: flex; align-items: flex-start; justify-content: flex-start; }
@media (min-width: 990px) { .jn-all-col { justify-content: flex-end; align-items: flex-start; height: 100%; } }

@media (max-width: 990px) {
  .jn-desc p { font-size: 23px; width: 80%; margin-bottom: 20px; }
  .jn-excerpt p { font-size: 16px; }
  .jn-title { font-size: 25px; }
  .jn-all-col { display: none; }
}

/* Dawn's scroll-trigger (base.css), only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .jn-reveal { opacity: .01; }
  .jn-slide { transform: translateY(20px); }
  .jn-reveal.jn-slide:not(.is-offscreen) { animation: jn-slide .6s cubic-bezier(0, 0, .3, 1) forwards; }
}
@keyframes jn-slide { from { transform: translateY(20px); opacity: .01; } to { transform: translateY(0); opacity: 1; } }