/* Journal article pages (journal-*.html, built by scripts/build-journal.py).
   Sits on article.html's journal.css + refinement.css; uses the site's type scale:
   Open Sauce One 500, tight negative tracking, grey body text, hairline rules. */

.page-article .jr-head{padding-bottom:0}
.page-article .jr-title{font-size:clamp(40px,5.2vw,76px);line-height:1.04;letter-spacing:-.055em;max-width:17ch;margin-top:56px}
.page-article .jr-title--long{font-size:clamp(34px,3.7vw,54px);line-height:1.1;letter-spacing:-.045em;max-width:26ch}
.page-article .jr-head .article-head__dek{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:52ch;margin-block:24px 36px;color:var(--native-muted,#6B6B66)}
.page-article .jr-head .article-meta{display:flex;flex-wrap:wrap;gap:8px 0;padding:18px 0 28px;border-top:1px solid var(--native-line,#E3E3DE);font-size:12px;color:var(--native-muted,#6B6B66)}
.page-article .jr-head .article-meta span:empty{display:none}
.page-article .jr-head .article-meta span+span::before{content:"";display:inline-block;width:1px;height:10px;margin:0 14px;background:var(--native-line,#E3E3DE);vertical-align:-1px}
.page-article .hero-media{height:min(50vw,640px);background:var(--native-surface,#F5F5F5)}

/* body */
.page-article .article-body{padding:clamp(56px,6vw,96px) 0 clamp(40px,4vw,64px)}
.page-article .jr-prose{max-width:680px}
.page-article .jr-prose>*:first-child{margin-top:0}
.page-article .jr-prose p{font-size:17px;line-height:1.8;margin-top:20px;color:#2b2b29}
.page-article .jr-prose p.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.6;color:#0F0F0F}
.page-article .jr-prose h2{font-size:clamp(26px,2.4vw,34px);line-height:1.18;letter-spacing:-.045em;font-weight:500;margin:clamp(48px,5vw,72px) 0 0;color:#0F0F0F}
.page-article .jr-prose h3{font-size:20px;line-height:1.35;letter-spacing:-.03em;font-weight:500;margin:36px 0 0;color:#0F0F0F}
.page-article .jr-prose h2+p,.page-article .jr-prose h3+p{margin-top:14px}
.page-article .jr-prose strong{font-weight:600;color:#0F0F0F}
.page-article .jr-prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:#b8b8b2}
.page-article .jr-prose a:hover{text-decoration-color:currentColor}
.page-article .jr-prose ul,.page-article .jr-prose ol{margin:20px 0 0;padding-left:1.25em}
.page-article .jr-prose li{font-size:17px;line-height:1.75;color:#2b2b29;padding-left:6px}
.page-article .jr-prose li+li{margin-top:12px}
.page-article .jr-prose ul li::marker{color:#FF5E00}
.page-article .jr-prose ol li::marker{color:var(--native-muted,#6B6B66);font-size:14px}
.page-article .jr-fig{margin:48px 0 0}
.page-article .jr-fig img{width:100%;height:auto}
.page-article .jr-note{margin:0 0 36px!important;padding:16px 20px;background:var(--native-surface,#F5F5F5);border-left:2px solid #FF5E00;font-size:14px!important;line-height:1.6!important;color:var(--native-muted,#6B6B66)!important}

/* FAQ: same pattern as the SKU pages */
.page-article .jr-faq{padding:clamp(40px,4vw,64px) 0 clamp(56px,6vw,96px);border-top:1px solid var(--native-line,#E3E3DE)}
.page-article .jr-faq .prose{max-width:680px}
.page-article .jr-faq h2{font-size:clamp(28px,2.6vw,38px);line-height:1.15;letter-spacing:-.05em;font-weight:500;margin:0 0 24px}
.page-article .jr-faq details{border-top:1px solid var(--native-line,#E3E3DE)}
.page-article .jr-faq details:last-child{border-bottom:1px solid var(--native-line,#E3E3DE)}
.page-article .jr-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-size:17px;line-height:1.45;letter-spacing:-.02em;cursor:pointer;list-style:none}
.page-article .jr-faq summary::-webkit-details-marker{display:none}
.page-article .jr-faq .pm{position:relative;flex:none;width:14px;height:14px}
.page-article .jr-faq .pm::before,.page-article .jr-faq .pm::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:currentColor;transition:transform .2s}
.page-article .jr-faq .pm::after{transform:rotate(90deg)}
.page-article .jr-faq details[open] .pm::after{transform:rotate(0)}
.page-article .jr-faq__a{padding:0 0 22px}
.page-article .jr-faq__a p{font-size:16px;line-height:1.75;margin-top:0;color:#2b2b29}
.page-article .jr-faq__a p+p{margin-top:12px}

.page-article .article-end a{text-decoration:underline;text-underline-offset:3px}
.page-article .related-card img{aspect-ratio:16/9}

@media(max-width:700px){
  .page-article .jr-title{margin-top:36px}
  .page-article .jr-prose p,.page-article .jr-prose li{font-size:16px}
  .page-article .hero-media{height:auto;aspect-ratio:16/10}
  .page-article .related__grid{grid-template-columns:1fr}
}
.page-article .jr-prose p,.page-article .jr-prose li{overflow-wrap:break-word}