:root { color-scheme: light; }
.article-shell { max-width: 1180px; margin: 0 auto; padding: 34px 24px 96px; }
.article-breadcrumb { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: #7b7080; font-size: 13px; margin-bottom: 54px; }
.article-breadcrumb a { color: #70435f; text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb span:last-child { max-width: min(590px, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-header { max-width: 850px; margin: 0 auto 34px; text-align: center; }
.article-category { display: inline-block; padding: 7px 13px; border-radius: 100px; background: #f8e9ee; color: #9a3f66; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.article-header h1 { margin: 21px 0 16px; color: #42273c; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1.08; letter-spacing: -.035em; }
.article-dek { max-width: 720px; margin: 0 auto; color: #6c626d; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.72; }
.article-byline { display: flex; justify-content: center; gap: 11px; margin-top: 24px; color: #837783; font-size: 13px; }
.article-cover { max-width: 1050px; margin: 0 auto 66px; }
.article-cover img { display: block; width: 100%; height: clamp(300px, 44vw, 510px); object-fit: cover; object-position: center; border-radius: 20px; background: #f3edf0; }
.article-cover figcaption { margin-top: 10px; text-align: right; color: #8a808b; font-size: 12px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(210px, 260px); justify-content: center; gap: clamp(38px, 6vw, 82px); align-items: start; }
.article-prose { min-width: 0; color: #4e4650; font-size: 16px; line-height: 1.88; }
.article-prose p { margin: 0 0 1.35em; }
.article-prose h2, .article-prose h3 { color: #45293d; font-family: Georgia, 'Times New Roman', serif; line-height: 1.25; scroll-margin-top: 100px; }
.article-prose h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); margin: 2.2em 0 .75em; }
.article-prose h3 { font-size: 1.3rem; margin: 1.7em 0 .6em; }
.article-prose h2:first-child { margin-top: 0; }
.article-prose a { color: #a3446e; text-decoration: underline; text-decoration-color: #dfadc3; text-underline-offset: 3px; }
.article-prose a:hover { color: #762c4f; }
.article-prose ul, .article-prose ol { padding-left: 1.55em; margin: .2em 0 1.5em; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose li { margin: .45em 0; padding-left: .25em; }
.article-prose li p { margin: .4em 0; }
.article-prose strong { color: #3f2b3b; font-weight: 700; }
.article-prose blockquote { margin: 1.6em 0; padding: 14px 24px; border-left: 4px solid #d891ad; background: #fbf1f5; border-radius: 0 12px 12px 0; color: #5b3d4f; }
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-prose code { padding: 2px 5px; background: #f8edf2; border-radius: 4px; font-size: .9em; }
.article-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 24px 0; }
.article-prose th, .article-prose td { padding: 10px 12px; border: 1px solid #e8dce3; text-align: left; }
.article-prose th { background: #faf1f5; }
.article-sidebar { position: sticky; top: 96px; display: grid; gap: 18px; }
.sidebar-card { background: #fff; border: 1px solid #eee4e8; border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(83, 42, 68, .04); }
.sidebar-eyebrow { display: block; color: #9a4770; text-transform: uppercase; font-weight: 800; font-size: 11px; letter-spacing: .12em; }
.sidebar-card nav { display: grid; gap: 13px; margin-top: 18px; }
.sidebar-card nav a { color: #655967; text-decoration: none; font-size: 13px; line-height: 1.45; }
.sidebar-card nav a:hover { color: #ab4b73; }
.sidebar-cta { background: #f9edf2; border-color: #f6e2eb; }
.sidebar-cta p { color: #614e5d; line-height: 1.6; margin: 14px 0; font-size: 14px; }
.sidebar-cta a { color: #96385f; text-decoration: none; font-weight: 700; font-size: 13px; }
.article-next-step { margin: 68px 0 0; padding: 34px; border-radius: 20px; background: linear-gradient(135deg, #f9e8ef, #fff8f1); }
.article-next-step span { color: #9a4770; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 800; }
.article-next-step h2 { margin: 10px 0 12px; font-size: 1.8rem; }
.article-next-step p { color: #66545f; }
.article-next-step div { display: flex; gap: 22px; flex-wrap: wrap; }
.article-next-step a { font-weight: 700; }
.article-related { max-width: 1050px; margin: 88px auto 0; border-top: 1px solid #e8dfe4; padding-top: 36px; }
.article-related h2 { color: #45293d; font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; margin: 9px 0 25px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related-card { display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 20px; background: #fff; border: 1px solid #eee4e8; border-radius: 14px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.related-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(83, 42, 68, .09); }
.related-card span { color: #a44d72; font-size: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
.related-card strong { color: #422d3e; line-height: 1.45; }
.related-card small { margin-top: auto; color: #a44d72; font-weight: 700; }
@media (max-width: 850px) { .article-layout { display: block; max-width: 720px; margin: auto; } .article-sidebar { position: static; margin-top: 42px; } .sidebar-card:first-child { display: none; } .article-cover { margin-bottom: 42px; } }
@media (max-width: 620px) { .article-shell { padding: 22px 18px 70px; } .article-breadcrumb { margin-bottom: 36px; } .article-header { text-align: left; } .article-byline { justify-content: flex-start; } .article-cover img { height: 340px; border-radius: 14px; } .article-cover figcaption { text-align: left; } .article-prose { font-size: 15.5px; } .article-next-step { padding: 24px; } .related-grid { grid-template-columns: 1fr; } }