/* =====================================================================
   Journal articles — loaded after tokens / base / sections / product.
   A single reading column (~680px) with components that break out of it.
   Breakpoints match the rest of the site: tablet ≤1439, mobile ≤809.
   ===================================================================== */

.art { padding: 0 var(--pad-x) 40px; }

/* ---------- header ---------- */
.art__head { max-width: 920px; margin: 0 auto; padding: 8px 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.art__head .crumbs { padding: 12px 0 8px; }
.art__head .crumbs ol { justify-content: center; }
.art__title { font-size: clamp(40px, 5.2vw, 76px); color: var(--c-black); line-height: .98; }
.art__dek { font-family: var(--f-body); font-size: 20px; line-height: 1.45; color: var(--c-text); max-width: 60ch; text-wrap: pretty; }
.art__meta { justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--c-text-2); }
.art__meta .article__dot { background: var(--c-text-2); }

.art__hero { max-width: 1200px; margin: 0 auto 64px; border-radius: var(--r-lg); overflow: hidden; background: var(--c-card); aspect-ratio: 16 / 8; }
.art__hero img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- reading column ---------- */
.art__body { max-width: 680px; margin: 0 auto; font-family: var(--f-body); font-size: 18px; line-height: 1.65; color: var(--c-text); }
.art__body > p, .art__body > ul { margin: 0 0 1.15em; }
.art__body > ul { padding-left: 1.2em; list-style: disc; }
.art__body > ul li { margin-bottom: .55em; padding-left: .2em; }
.art__body > ul li::marker { color: var(--c-muted); }
.art__body strong { font-weight: 500; color: var(--c-black); }
.art__body a { color: var(--c-black); text-decoration: underline; text-decoration-color: var(--c-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.art__body a:hover { text-decoration-color: var(--c-black); }
.art__body h2 { font-family: var(--f-display); font-weight: 400; font-size: 38px; line-height: 1.05; letter-spacing: -.035em; color: var(--c-black); margin: 1.9em 0 .55em; text-wrap: balance; }
.art__lede { font-size: 22px; line-height: 1.5; color: var(--c-black); }
.art__lede::first-letter { font-family: var(--f-display); float: left; font-size: 88px; line-height: .78; margin: 8px 12px 0 0; color: var(--c-black); }

/* pull quote: display face, green rule, set wider than the column */
.pull { margin: 1.6em -60px; padding: 8px 0 8px 32px; border-left: 4px solid var(--c-green);
  font-family: var(--f-display); font-size: 34px; line-height: 1.12; letter-spacing: -.03em; color: var(--c-black); text-wrap: balance; }

.art-figure { margin: 2em -60px; }
.art-figure img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-md); background: var(--c-card); }
.art-figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.4; }

/* ---------- product card inside the article ---------- */
.art-cta { margin: 2.4em -100px; display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: center;
  padding: 32px 40px 32px 32px; border-radius: var(--r-xl); background: var(--c-card); }
.art-cta__media { display: grid; place-items: center; }
.art-cta__media img { width: 100%; height: auto; object-fit: contain; }
.art-cta__body { display: flex; flex-direction: column; gap: 12px; }
.art-cta__head { font-family: var(--f-display); font-size: 32px; line-height: 1.05; letter-spacing: -.035em; color: var(--c-black); text-wrap: balance; }
.art-cta__body .prose { line-height: 1.45; }
.art-cta__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.art-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.art-cta__shop { flex: none; display: inline-flex; align-items: center; justify-content: center; height: auto; min-height: 56px; padding: 12px 26px; text-align: center; line-height: 1.2; text-decoration: none !important; color: var(--c-white) !important; }
.art-cta .pcard__quick { height: 56px; padding: 0 22px; border-radius: var(--r-btn); margin-top: 0; }

/* ---------- collagen types / sources ---------- */
.art-grid { list-style: none; padding: 0; margin: 1.4em 0 1.6em; display: grid; gap: 10px; }
.art-grid--types { grid-template-columns: repeat(5, 1fr); margin-inline: -100px; }
.art-grid--sources { grid-template-columns: repeat(2, 1fr); }
.art-grid li { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: var(--r-md); background: var(--c-white); }
.art-grid .body { line-height: 1.35; }

/* ---------- comparison ---------- */
.art-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4em 0 1.8em; }
.art-compare__col { padding: 24px; border-radius: var(--r-md); background: var(--c-card); }
.art-compare__col .label { margin-bottom: 14px; }
.art-compare__col ul { display: flex; flex-direction: column; gap: 10px; }
.art-compare__col li { font-size: 16px; line-height: 1.35; padding-left: 18px; position: relative; }
.art-compare__col li::before { content: "\2013"; position: absolute; left: 0; color: var(--c-text-2); }
.art-compare__col--ww { background: var(--c-green); color: var(--c-black); }
.art-compare__col--ww .label { color: var(--c-black); }
.art-compare__col--ww li::before { content: "\2713"; color: var(--c-black); }

/* ---------- guarantee, sources, FAQ, disclaimer ---------- */
.art-guarantee { display: flex; gap: 18px; align-items: flex-start; margin: 2em 0; padding: 26px 28px; border-radius: var(--r-md); background: var(--c-white); }
.art-guarantee .icon { color: var(--c-dark); margin-top: 2px; }
.art-guarantee div { display: flex; flex-direction: column; gap: 8px; }
.art-faq { margin: 2.4em 0 1.6em; }
.art-faq h2 { margin-top: 0; }
.art-faq .faq__a { padding-left: 54px; }
.art-sources { margin: 2em 0; padding: 22px 24px; border-radius: var(--r-md); background: var(--c-card); }
.art-sources .label { margin-bottom: 12px; }
.art-sources ul { display: flex; flex-direction: column; gap: 8px; }
.art-sources li { font-size: 14px; line-height: 1.45; color: var(--c-text); }
.art-disclaimer { margin-top: 2.4em !important; padding-top: 20px; border-top: 1px solid var(--c-beige-dark); font-size: 13px; line-height: 1.5; color: var(--c-text-2); }

.art-more { padding-top: 72px; padding-bottom: 80px; }

/* ---------- desktop: reading column + sticky sidebar ---------- */
.art__layout { max-width: 1120px; margin: 0 auto; }
.art__aside { display: none; }
.art__body h2 { scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (min-width: 1100px) {
  .art__layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; justify-content: center; gap: 80px; align-items: start; }
  .art__body { max-width: none; margin: 0; }
  .art-cta, .art-grid--types, .pull, .art-figure { margin-inline: 0; }
  .art-cta { grid-template-columns: 200px 1fr; }
  .art-grid--types li { padding: 16px 14px; }
  .art-grid--types .body { font-size: 13px; }
  .art__aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--nav-h) + 24px); padding-top: 6px; }
}
.art-toc { display: flex; flex-direction: column; gap: 14px; }
.art-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--c-beige-dark); }
.art-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--c-text-2); transition: color .2s, border-color .2s; }
.art-toc a:hover { color: var(--c-black); }
.art-toc a.is-active { color: var(--c-black); border-left-color: var(--c-green); }
.art-side { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 28px; background: var(--c-white); box-shadow: var(--shadow-card); }
.art-side img { width: 150px; height: auto; align-self: center; margin: 4px 0 6px; }
.art-side__name { font-family: var(--f-display); font-size: 24px; line-height: 1.05; letter-spacing: -.03em; color: var(--c-black); }
.art-side .body { line-height: 1.4; font-size: 13.5px; }
.art-side__shop { width: 100%; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.art-side .pcard__quick { width: 100%; justify-content: center; height: 48px; border-radius: var(--r-btn); background: var(--c-bg); margin-top: 0; }

/* =====================================================================
   TABLET ≤ 1439  (the break-out components pull back inside the column)
   ===================================================================== */
@media (max-width: 1100px) {
  .art-cta { margin-inline: -40px; }
  .art-grid--types { margin-inline: -40px; grid-template-columns: repeat(3, 1fr); }
  .pull, .art-figure { margin-inline: -30px; }
}

/* =====================================================================
   MOBILE ≤ 809
   ===================================================================== */
@media (max-width: 809px) {
  .art__head { padding-bottom: 28px; gap: 14px; }
  .art__dek { font-size: 17px; }
  .art__hero { margin-bottom: 40px; border-radius: var(--r-md); aspect-ratio: 4 / 3; }
  .art__body { font-size: 17px; }
  .art__lede { font-size: 19px; }
  .art__lede::first-letter { font-size: 70px; }
  .art__body h2 { font-size: 30px; }
  .pull { margin-inline: 0; padding-left: 20px; font-size: 26px; }
  .art-figure { margin-inline: 0; }
  .art-cta { margin-inline: 0; grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; border-radius: 36px; }
  .art-cta__media img { max-width: 180px; }
  .art-cta__head { font-size: 26px; }
  .art-cta__actions > * { flex: 1 1 100%; }
  .art-grid--types { margin-inline: 0; grid-template-columns: repeat(2, 1fr); }
  .art-grid--sources, .art-compare { grid-template-columns: 1fr; }
  .art-faq .faq__a { padding-left: 40px; }
  .art-more { padding-top: 48px; padding-bottom: 56px; }
}

/* =====================================================================
   Story layout (layout: 'story' in build_journal.py) — advertorial pages.
   Built from the homepage patterns: a hero-style cover with a glass card,
   full-bleed split chapters like .story / .proof, a full-bleed image band
   like .compare, and centered section heads.
   ===================================================================== */
.st { display: flex; flex-direction: column; gap: var(--gap); padding-bottom: 24px; font-family: var(--f-body); color: var(--c-text); }
.st p { text-wrap: pretty; }
.st a:not(.buy__add) { color: var(--c-black); text-decoration: underline; text-decoration-color: var(--c-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.st-lede { font-size: 22px; line-height: 1.4; color: var(--c-black); }

/* cover */
.st-cover { position: relative; height: min(860px, calc(100svh - var(--nav-h))); min-height: 620px; overflow: hidden; background: var(--c-card); }
.st-cover__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-cover__card { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); width: min(760px, calc(100% - 48px));
  padding: 32px 40px 28px; border-radius: var(--r-hero-card); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.st-cover__card .crumbs { padding: 0; }
.st-cover__card .crumbs ol { justify-content: center; }
.st-cover__title { font-size: clamp(44px, 5.4vw, 80px); color: var(--c-black); line-height: .95; }
.st-cover__dek { font-size: 18px; line-height: 1.45; color: var(--c-text); max-width: 56ch; }

/* split chapter: full-bleed image one side, centered copy the other */
.st-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); min-height: 820px; }
.st-split__media { margin: 0; position: relative; overflow: hidden; background: var(--c-card); }
.st-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-split__text { align-self: center; justify-self: center; width: 100%; max-width: 540px; padding: 72px var(--pad-x); display: flex; flex-direction: column; gap: 18px; font-size: 18px; line-height: 1.6; }
.st-split__text .display { color: var(--c-black); }
.st-split__text .eyebrow { margin-bottom: 2px; }
.st-split--flip .st-split__media { order: 2; }
.st-split--product .st-split__media { background: var(--c-card); }
.st-split--product .art-grid--sources { margin: 6px 0 0; }
.st-split--product .art-grid li { padding: 16px; }
.st-split--product .art-grid .body { font-size: 14px; }

.st-dishes { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.st-dishes li { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--r-md); background: var(--c-card); font-size: 16px; line-height: 1.45; }
.st-steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-steps li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r-md); background: var(--c-white); font-size: 16px; line-height: 1.4; }
.st-steps .num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-green); color: var(--c-black); font-size: 18px; }

/* full-bleed image band with one line over it */
.st-band { position: relative; height: 640px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 var(--pad-x); }
.st-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(50,44,43,.05), rgba(50,44,43,.45)); z-index: 1; }
.st-band__quote { position: relative; z-index: 2; margin: 0; max-width: 900px; text-align: center; }
.st-band__quote p { font-family: var(--f-display); font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.04em; color: var(--c-white); text-wrap: balance; }

/* two images side by side */
.st-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.st-duo figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-card); }
.st-duo img { width: 100%; height: 100%; object-fit: cover; }
.st-duo__caption { grid-column: 1 / -1; text-align: center; font-family: var(--f-display); font-size: 32px; line-height: 1.1; letter-spacing: -.03em; color: var(--c-black); padding: 32px var(--pad-x) 16px; }

/* centered sections */
.st-center, .st-reviews { padding: 96px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 44px; }
.st-center--tight { padding-top: 48px; }
.st-center__head { max-width: 820px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.st-center__head .display { color: var(--c-black); }
.st-center__head .st-lede { max-width: 640px; font-size: 20px; color: var(--c-text); }
.st-center .art-grid--types { width: 100%; max-width: 1200px; margin: 0; }
.st-center .art-compare { width: 100%; max-width: 900px; margin: 0; }
.st-center .art-compare__col { padding: 28px; }

/* reviews */
.st-reviews { background: var(--c-card); }
.st-reviews__row { width: 100%; max-width: 1200px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.st-review { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-lg); background: var(--c-white); }
.st-review__photo { width: 64px; height: 64px; border-radius: 22px; object-fit: cover; background: var(--c-card); }
.st-review blockquote { margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.st-review__title { font-family: var(--f-display); font-size: 24px; line-height: 1.05; letter-spacing: -.03em; color: var(--c-black); }
.st-review .body { line-height: 1.45; }
.st-review figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-review__tag { font-family: var(--f-label); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--c-text-2); }

/* closing offer */
.st-offer { padding: 72px var(--pad-x) 24px; }
.st-offer__panel { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding: 40px; border-radius: var(--r-xl); background: var(--c-white); box-shadow: var(--shadow-card); }
.st-offer__media { display: grid; place-items: center; padding: 32px; border-radius: var(--r-lg); background: var(--c-card); }
.st-offer__media img { width: 100%; max-width: 380px; height: auto; }
.st-offer__body { display: flex; flex-direction: column; gap: 16px; }
.st-offer__body .display { color: var(--c-black); }
.st-offer__body > .body { line-height: 1.45; }
.st-offer__points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 4px 0; }
.st-offer__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.35; }
.st-offer__points .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--c-green); color: var(--c-black); margin-top: -1px; }
.st-offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--c-beige-dark); }
.st-offer .art-cta__actions { margin-top: 0; }
.st-offer__guarantee { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--c-text-2); }
.st-offer__guarantee .icon { color: var(--c-dark); }

.st-end { width: 100%; max-width: 820px; margin: 0 auto; padding: 48px var(--pad-x) 0; font-size: 16px; }

/* ---- tablet ---- */
@media (max-width: 1100px) {
  .st-split { min-height: 680px; }
  .st-split__text { font-size: 17px; }
  .st-offer__panel { grid-template-columns: 1fr; padding: 32px; }
  .st-offer__media img { max-width: 280px; }
  .st-reviews__row { grid-template-columns: 1fr; max-width: 640px; }
  .st-center .art-grid--types { grid-template-columns: repeat(3, 1fr); }
}

/* ---- mobile ---- */
@media (max-width: 809px) {
  .st { gap: 16px; }
  .st-cover { height: auto; min-height: 0; padding: 0 0 20px; display: flex; flex-direction: column; background: var(--c-bg); }
  .st-cover__bg { position: relative; height: 360px; }
  .st-cover__card { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin: -64px 12px 0; padding: 24px 20px 20px; border-radius: 36px; gap: 12px; background: var(--c-white); }
  .st-cover__title { font-size: 40px; }
  .st-cover__dek { font-size: 16px; }
  .st-lede { font-size: 19px; }
  .st-split, .st-split--flip { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .st-split--flip .st-split__media { order: 0; }
  .st-split__media { aspect-ratio: 4 / 5; max-height: 520px; }
  .st-split__text { padding: 32px 20px 24px; gap: 14px; font-size: 17px; }
  .st-band { height: 420px; }
  .st-duo { gap: 8px; padding: 0 12px; }
  .st-duo__caption { font-size: 24px; padding: 16px 8px 0; }
  .st-center, .st-reviews { padding: 56px 20px; gap: 28px; }
  .st-center--tight { padding-top: 24px; }
  .st-center .art-grid--types { grid-template-columns: repeat(2, 1fr); }
  .st-offer { padding: 32px 12px 8px; }
  .st-offer__panel { padding: 16px 16px 24px; gap: 20px; border-radius: 36px; }
  .st-offer__media { padding: 20px; }
  .st-offer__media img { max-width: 200px; }
  .st-offer__points { grid-template-columns: 1fr; }
  .st-offer .art-cta__actions > * { flex: 1 1 100%; }
  .st-end { padding-top: 24px; }
}
.st-cover__bg { object-position: center 72%; }
.st-split__text .art-cta__actions { margin-top: 8px; }
.st-end .art-faq h2 { font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--c-black); margin: 0 0 24px; text-align: center; }
@media (max-width: 809px) {
  .st-split__text .art-cta__actions > * { flex: 1 1 100%; }
  .st-end .art-faq h2 { font-size: 32px; }
}
.st-offer__proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -4px; }