/* ============================================================
   Recipe article: entirely new editorial layout for site two.
   Separate from homepage and secondary-page styles.
   ============================================================ */
.article-page { background: #fff; color: #22211f; }
.article-breadcrumb { display: flex; gap: 12px; align-items: center; padding: 30px 0 10px; font-size: 12px; color: #8c8984; }
.article-breadcrumb a { color: #4e4c48; }
.article-heading { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 65px; align-items: end; padding: 40px 0 42px; }
.article-kicker { font: 800 11px/1.5 'DM Sans', sans-serif; letter-spacing: 2px; color: #d25d36; }
.article-kicker span { color: #c7c2bb; margin: 0 9px; }
.article-heading h1 { font: 800 clamp(42px, 5.4vw, 82px)/1.02 'Outfit', sans-serif; letter-spacing: -3px; max-width: 870px; margin: 17px 0 21px; }
.article-heading-main > p { font-size: 17px; line-height: 1.8; color: #77736f; max-width: 670px; margin: 0; }
.article-heading-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.article-primary, .article-quiet { display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font: 700 13px 'DM Sans', sans-serif; padding: 13px 20px; }
.article-primary { background: #20201f; color: white; }
.article-quiet { border: 1px solid #e5e2dd; background: white; color: #302e2b; cursor: pointer; }
.article-quiet.is-saved { color: #d25d36; border-color: #d25d36; }
.article-heading-stats { border-left: 1px solid #e9e6e2; padding-left: 25px; }
.article-heading-stats > div { padding: 16px 0; border-bottom: 1px solid #ece9e4; }
.article-heading-stats small { display: block; color: #99938b; font-size: 10px; letter-spacing: 1.5px; font-weight: 800; margin-bottom: 7px; }
.article-heading-stats strong { font: 700 19px 'Outfit', sans-serif; }
.article-photo-wrap { position: relative; }
.article-cover { display: block; width: 65%; height: clamp(330px, 47vw, 590px); object-fit: cover; border-radius: 3px; }
.article-photo-caption { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #9d9890; text-align: right; margin-top: 11px; }
.article-photo-caption span { margin: 0 7px; color: #d25d36; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: clamp(45px, 7vw, 110px); align-items: start; padding-top: 70px; }
.article-section-label { font-size: 11px; font-weight: 800; letter-spacing: 1.7px; color: #a09a92; }
.article-section-label span { color: #d25d36; margin-right: 10px; }
.article-reading h2 { font: 800 clamp(31px, 3vw, 45px) 'Outfit', sans-serif; letter-spacing: -1px; margin: 16px 0 12px; }
.article-lead { color: #7e7972; font-size: 16px; line-height: 1.7; margin-bottom: 36px; }
.article-step { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 20px; border-top: 1px solid #ece9e5; padding: 30px 0; }
.article-step-number { font: 800 37px/1 'Outfit', sans-serif; color: #e6e0d8; }
.article-step h3 { font: 700 22px 'Outfit', sans-serif; margin: 0 0 12px; }
.article-step p { color: #65615c; line-height: 1.9; margin: 0; }
.article-step img { width: 100%; max-height: 340px; object-fit: cover; margin-top: 20px; border-radius: 5px; }
.article-sidebar { position: relative; }
.article-ingredient-card { position: sticky; top: 25px; background: #f6f3ee; padding: 30px; border-radius: 4px; }
.article-ingredient-card h2 { font: 800 33px 'Outfit', sans-serif; margin: 12px 0 24px; }
.article-serving-control { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e4dfd7; border-bottom: 1px solid #e4dfd7; padding: 15px 0; }
.article-serving-control span { margin-right: auto; font-weight: 700; font-size: 13px; }
.article-serving-control button { background: white; border: 1px solid #e2dcd3; width: 28px; height: 28px; border-radius: 3px; }
.article-serving-control strong { font-size: 15px; }
.article-ingredient-list { margin: 13px 0 24px; }
.article-ingredient-list label { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid #e9e4dc; cursor: pointer; color: #48443f; line-height: 1.55; font-size: 14px; }
.article-ingredient-list input { width: 17px; height: 17px; flex-shrink: 0; accent-color: #d25d36; margin-top: 2px; }
.article-ingredient-list label.done span { text-decoration: line-through; color: #9b958c; }
.article-print { width: 100%; border: 0; border-radius: 4px; padding: 15px; background: #d25d36; color: white; font-weight: 800; cursor: pointer; }
.article-note { background: #fff6ed; border-left: 4px solid #d25d36; padding: 25px 28px; margin: 30px 0; }
.article-note span { color: #bc4f2d; letter-spacing: 1.6px; font-weight: 800; font-size: 11px; }
.article-note p { line-height: 1.8; margin: 10px 0 0; }
.article-extra { margin-top: 35px; }
.article-extra p { color: #68645e; line-height: 1.9; }
.article-video { padding: 25px; background: #f8f6f2; margin-bottom: 35px; }
.article-video h3 { margin: 0 0 15px; font: 700 22px 'Outfit', sans-serif; }
.article-video video { width: 100%; max-height: 390px; background: #171717; }
.article-related { padding-top: 85px; padding-bottom: 95px; }
.article-related-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.article-related-heading h2 { font: 800 37px 'Outfit', sans-serif; margin: 6px 0 0; }
.article-related-heading a { font-weight: 700; font-size: 13px; color: #d25d36; }
@media (max-width: 900px) {
    .article-heading { grid-template-columns: 1fr; gap: 20px; }
    .article-heading-stats { display: flex; border-left: 0; border-top: 1px solid #eee; padding: 0; gap: 30px; }
    .article-heading-stats > div { flex: 1; }
    .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 35px; }
}
@media (max-width: 700px) {
    .article-heading { padding: 20px 0 28px; }
    .article-heading h1 { font-size: clamp(37px, 10vw, 58px); letter-spacing: -1.5px; }
    .article-heading-stats { gap: 12px; }
    .article-heading-stats strong { font-size: 15px; }
    .article-cover { height: 300px; }
    .article-layout { display: flex; flex-direction: column-reverse; gap: 45px; padding-top: 38px; }
    .article-sidebar, .article-reading { width: 100%; }
    .article-ingredient-card { position: static; }
    .article-step { grid-template-columns: 43px 1fr; gap: 10px; }
    .article-step-number { font-size: 27px; }
    .article-related { padding: 55px 0; }
}
@media print {
    .topline, .site-header, .site-footer, .article-heading-actions, .article-related, .article-print { display: none !important; }
    .article-layout { display: block; }
    .article-ingredient-card { position: static; }
}