/* Editorial rich homepage. Sidebar, navigation and outer shell use simple mode's shared CSS unchanged. */
.layout-rich .rich-home { min-width: 0; padding-top: 8px; }
.rich-home a { text-decoration: none; }
.rich-home a:hover { color: var(--blog-primary-strong); }
.rich-home :is(h1,h2,h3,p) { margin: 0; }
.rich-home :is(h1,h2,h3) { color: var(--ink); }
.rich-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.rich-header h1 { font-family: var(--serif); font-size: 34px; line-height: 1.4; letter-spacing: .02em; }
.rich-header p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.rich-search { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%; }
.rich-search:hover { background: var(--blog-primary-soft); }
.rich-search .icon { width: 19px; height: 19px; }
/* Recommendation cards share a paper surface; only their covers carry color. */
.rich-featured { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2,minmax(210px,auto)); gap: 16px; margin-bottom: 48px; }
.rich-featured .rich-feature { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; margin: 0; background: var(--paper); transition: border-color 180ms ease; }
.rich-featured .rich-feature:is(:hover,:focus-within) { border-color: var(--blog-primary-border); }
.rich-feature .article-list-grid { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 20px; height: 100%; align-items: stretch; }
.rich-feature .article-list-cover { width: 100%; height: auto; min-height: 0; aspect-ratio: 1; align-self: start; border-radius: 8px; box-shadow: none; transform: none; color: #244b39; background: linear-gradient(135deg,#e5eadf,#d4e2d4); }
.rich-feature:nth-child(2) .article-list-cover { color: #754630; background: linear-gradient(135deg,#f5e4d5,#efd1be); }
.rich-feature:nth-child(3) .article-list-cover { color: #285b58; background: linear-gradient(135deg,#dfecea,#c5dedd); }
.rich-feature .article-cover-story { top: 24px; left: 12px; right: 12px; max-width: none; }
.rich-feature .article-cover-word { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rich-feature .article-list-cover > b { display: block; top: 62px; left: 12px; right: 12px; bottom: auto; width: auto; height: auto; padding: 0; color: inherit; background: none; border-radius: 0; box-shadow: none; font: 500 15px/1.5 var(--serif); overflow-wrap: anywhere; }
.rich-feature .article-list-cover > i { width: 110px; height: 110px; top: auto; right: -45px; bottom: -35px; border: 1px solid currentColor; background: transparent; opacity: .18; }
.rich-feature .article-list-cover > i::after { content: ''; position: absolute; inset: 15px; border: 1px solid currentColor; border-radius: 50%; }
.rich-feature-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.rich-category { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 6px; color: var(--blog-primary-strong); background: var(--blog-primary-soft); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.rich-feature h2 { margin-top: 8px; font-family: var(--sans); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.rich-feature h2 a { color: inherit; }
.rich-feature h2 a:is(:hover,:focus-visible) { color: var(--blog-primary-strong); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rich-feature a:focus-visible { outline: 2px solid var(--blog-primary); outline-offset: 3px; border-radius: 3px; }
.rich-feature h2, .rich-feature-body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rich-feature-body > p { margin-top: 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.rich-feature-meta { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 11px; color: var(--ink-soft); }
.rich-feature-meta > a { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 32px; color: var(--blog-primary-strong); font-size: 12px; white-space: nowrap; }
.rich-feature-meta .icon { width: 16px; height: 16px; transition: transform 180ms ease; }
.rich-feature-meta > a:hover .icon { transform: translateX(3px); }
.rich-featured .rich-feature:first-child { grid-row: span 2; padding: 0; }
.rich-feature:first-child .article-list-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: 196px 1fr; gap: 0; }
.rich-feature:first-child .article-list-cover { min-height: 0; height: 196px; aspect-ratio: auto; border-radius: 11px 11px 0 0; }
.rich-feature:first-child .article-cover-story { top: 38px; left: 28px; right: 28px; }
.rich-feature:first-child .article-cover-word { font-size: 46px; }
.rich-feature:first-child .article-list-cover > b { top: 108px; left: 28px; right: 28px; font-size: 22px; }
.rich-feature:first-child .article-list-cover > i { width: 220px; height: 220px; right: -40px; bottom: -110px; }
.rich-feature:first-child .rich-feature-body { padding: 20px 24px 16px; }
.rich-feature:first-child h2 { margin-top: 10px; font-size: 24px; }
.rich-feature:first-child .rich-feature-body > p { font-size: 14px; margin-top: 10px; line-height: 1.75; }
.rich-featured:has(> :only-child) { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; }
.rich-featured .rich-feature:only-child { grid-row: auto; }
.rich-feature:first-child:only-child .article-list-grid { grid-template-columns: 42% minmax(0,1fr); grid-template-rows: auto; }
.rich-feature:first-child:only-child .article-list-cover { height: 100%; min-height: 230px; border-radius: 11px 0 0 11px; }
.rich-feature:nth-child(2):last-child { grid-row: span 2; }
.rich-feature:nth-child(2):last-child .article-list-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: 176px 1fr; }
.rich-feature:nth-child(2):last-child .article-list-cover { height: 176px; aspect-ratio: auto; }
[data-theme="dark"] .rich-featured .rich-feature { background: var(--paper-soft); }
[data-theme="dark"] .rich-featured .rich-feature .article-list-cover { background: linear-gradient(135deg,#2b4034,#344a3d); color: #d1e5d4; }
[data-theme="dark"] .rich-featured .rich-feature:nth-child(2) .article-list-cover { background: linear-gradient(135deg,#4d3930,#5d4538); color: #f1d7c4; }
[data-theme="dark"] .rich-featured .rich-feature:nth-child(3) .article-list-cover { background: linear-gradient(135deg,#29413f,#345351); color: #cce7e2; }
@media (prefers-reduced-motion: reduce) { .rich-featured .rich-feature, .rich-feature-meta .icon { transition: none; } }
.rich-section { margin-top: 54px; }
.rich-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.rich-section-heading h2 { font-family: var(--serif); font-size: 27px; line-height: 1.5; }
.rich-section-heading p { margin-top: 7px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.rich-section-heading > a { flex: none; padding: 10px 0 10px 10px; color: var(--ink-soft); font-size: 12px; }
.rich-latest > .rich-section-heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
/* Keep the original list treatment at a compact scale for the richer homepage. */
.layout-rich .rich-latest .article-list-item-home { min-height: 0; padding: 8px 0 28px; }
.layout-rich .rich-latest .article-list-grid { grid-template-columns: 180px minmax(0,1fr); gap: 24px; align-items: start; }
.layout-rich .rich-latest .article-list-cover { width: 180px; height: 112px; }
.layout-rich .rich-latest .article-list-title { margin: 0 0 8px; font-size: 18px; line-height: 1.5; }
.layout-rich .rich-latest .article-list-excerpt { margin: 0 0 10px; font-size: 15px; line-height: 1.75; }
.layout-rich .rich-latest .article-list-cover > b { right: 14px; bottom: 14px; width: 38px; height: 38px; font-size: 20px; }
.layout-rich .rich-latest .article-list-cover > b[data-cover-chars="2"] { min-width: 46px; font-size: 18px; padding: 0 7px; }
@media (max-width: 1050px) and (min-width: 761px) {
 .layout-rich .rich-latest .article-list-grid { grid-template-columns: 140px minmax(0,1fr); gap: 20px; }
 .layout-rich .rich-latest .article-list-cover { width: 140px; height: 100px; }
}
@media (max-width: 760px) {
 .layout-rich .rich-latest .article-list-grid { grid-template-columns: 100px minmax(0,1fr); gap: 16px; }
 .layout-rich .rich-latest .article-list-cover { width: 100px; height: 85px; aspect-ratio: auto; }
 .layout-rich .rich-latest .article-list-title { font-size: 17px; }
 .layout-rich .rich-latest .article-list-excerpt { font-size: 14px; }
 .layout-rich .rich-latest .article-cover-story { top: 12px; left: 10px; right: 10px; }
 .layout-rich .rich-latest .article-cover-word { font-size: 12px; }
 .layout-rich .rich-latest .article-list-cover > b { right: 8px; bottom: 8px; width: 28px; height: 26px; font-size: 15px; }
 .layout-rich .rich-latest .article-list-cover > b[data-cover-chars="2"] { min-width: 34px; padding: 0 5px; font-size: 15px; }
}
.rich-topics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.rich-topic { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); }
.rich-topic-art { position: relative; display: grid; place-items: center; aspect-ratio: 1.65; background: linear-gradient(140deg,#d5f1e9,#edf9f6); color: #428c7a; overflow: hidden; }
.rich-topic-art-1 { background: linear-gradient(140deg,#dceafb,#eff6ff); color: #628cbb; }
.rich-topic-art-2 { background: linear-gradient(140deg,#ffe4d9,#fff4e9); color: #c77760; }
.rich-topic-art::before { content: ''; position: absolute; border-radius: 50%; width: 180px; height: 180px; right: -45px; top: -75px; background: rgba(255,255,255,.3); }
.rich-topic-art > .icon { width: 64px; height: 64px; stroke-width: 1; }
.rich-topic-art img { width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.rich-topic-copy { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.rich-topic h3 { font-family: var(--serif); font-size: 19px; line-height: 1.5; }
.rich-topic-copy p { margin-top: 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rich-topic-copy > span { align-self: flex-end; margin-top: auto; padding-top: 14px; font-size: 20px; }
.rich-moments { max-width: 740px; }
.rich-moment { position: relative; display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 20px; padding: 4px 0 28px 30px; margin-left: 6px; color: var(--ink); border-left: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.rich-moment:last-child { padding-bottom: 4px; }
.rich-moment::before { content: ''; position: absolute; left: -5px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--blog-primary); }
.rich-moment time { color: var(--ink-soft); font-size: 13px; }
.rich-moment-copy { position: relative; min-width: 0; }
.rich-moment-body { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; max-height: 7.2em; overflow: hidden; }
/* Reveal clipped links when reached by keyboard so focus stays visible. */
.rich-moment-body:focus-within { display: block; max-height: none; }
.rich-moment-body > :first-child { margin-top: 0; }
.rich-moment-body > :last-child { margin-bottom: 0; }
.rich-moment-body p { margin: 0 0 .5em; }
.rich-moment-body :is(h1,h2,h3,h4,h5,h6) { margin: .5em 0; font-size: 1em; line-height: inherit; }
.rich-moment-body :is(ul,ol) { margin: .5em 0; padding-left: 1.4em; }
.rich-moment-body blockquote { margin: .5em 0; padding-left: .8em; border-left: 2px solid var(--blog-primary); color: var(--ink-soft); }
.rich-moment-body code { padding: .1em .3em; border-radius: 3px; background: var(--blog-primary-soft); font-size: .9em; }
.rich-moment-body pre { margin: .5em 0; padding: .5em .7em; background: var(--blog-primary-soft); white-space: pre-wrap; }
.rich-moment-body pre code { padding: 0; background: none; }
.rich-moment-body img { display: block; max-width: 100%; max-height: 100px; height: auto; object-fit: contain; }
.rich-moment-body table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .9em; }
.rich-moment-body :is(th,td) { padding: .2em .4em; border: 1px solid var(--line); }
/* Keep Markdown links above the native link covering the content preview. */
.rich-moment-body a { position: relative; z-index: 1; color: var(--blog-primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.rich-moment-permalink { position: absolute; inset: 0; border-radius: 3px; }
.rich-moment-permalink:focus-visible { outline: 2px solid var(--blog-primary); outline-offset: 4px; }
.rich-photos { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
.rich-photos a { min-width: 0; color: var(--ink); }
.rich-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1.12; object-fit: cover; border-radius: 6px; }
.rich-archives { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.rich-archives a { display: flex; align-items: baseline; justify-content: center; gap: 18px; padding: 6px; color: var(--ink); }
.rich-archives strong { font-weight: 500; font-size: 15px; }
.rich-archives small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 13px; }
.rich-year-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blog-primary); }
.rich-archives a:nth-child(2) .rich-year-dot { background: #5eada5; }
.rich-archives a:nth-child(3) .rich-year-dot { background: #d88c70; }
.rich-subscribe { display: flex; align-items: center; gap: 26px; padding: 28px 30px; margin-top: 40px; border-radius: 8px; background: var(--blog-primary-soft); }
.rich-subscribe-icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; color: var(--blog-primary); }
.rich-subscribe-icon .icon { width: 36px; height: 36px; }
.rich-subscribe h2 { font-family: var(--serif); font-size: 23px; }
.rich-subscribe p { margin-top: 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.rich-subscribe > a { margin-left: auto; flex: none; padding: 12px 20px; border-radius: 6px; background: var(--blog-primary-solid); color: var(--blog-on-primary); font-size: 14px; }
.rich-subscribe > a:hover { color: var(--blog-on-primary); filter: brightness(1.1); }
.rich-empty { padding: 20px 0; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.rich-pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; font-size: 14px; }
.rich-pager a { padding: 12px 0; }
[data-theme="dark"] .rich-topic-art { background: #29413d; color: #aadacf; }
[data-theme="dark"] .rich-topic-art-1 { background: #293d51; color: #afcce9; }
[data-theme="dark"] .rich-topic-art-2 { background: #4b3933; color: #edc3b5; }
@media (max-width: 1250px) and (min-width: 761px) {
 .rich-featured { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; }
 .rich-feature:first-child, .rich-feature:nth-child(2):last-child { grid-row: auto; }

 .rich-topics { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .rich-subscribe { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 760px) {
 .rich-header h1 { font-size: 28px; }
 .rich-header p { font-size: 14px; }
 .rich-featured { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; }
 .rich-feature:first-child, .rich-feature:nth-child(2):last-child { grid-row: auto; }
 .rich-featured { margin-bottom: 38px; }
 .rich-section { margin-top: 40px; }
 .rich-section-heading { gap: 12px; }
 .rich-section-heading h2 { font-size: 24px; }
 .rich-section-heading p { font-size: 13px; }
 .rich-section-heading > a { font-size: 11px; }
 .rich-topics { grid-template-columns: minmax(0,1fr); }
 .rich-topic-art { aspect-ratio: 2; }
 .rich-moment { grid-template-columns: 58px minmax(0,1fr); gap: 14px; padding-left: 22px; }
 .rich-photos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
 .rich-archives { gap: 8px; }
 .rich-archives a { gap: 8px; padding: 0; }
 .rich-subscribe { display: grid; grid-template-columns: 1fr; padding: 24px; gap: 16px; }
 .rich-subscribe-icon { display: none; }
 .rich-subscribe > a { margin: 0; text-align: center; }
}

/* Compact cards below the two-column breakpoint, including one/two-item states. */
@media (max-width: 1250px) {
 .rich-featured .rich-feature, .rich-featured .rich-feature:first-child { grid-row: auto; padding: 16px; }
 .rich-featured .rich-feature .article-list-grid { grid-template-columns: 112px minmax(0,1fr); grid-template-rows: auto; gap: 18px; }
 .rich-featured .rich-feature .article-list-cover { height: auto; min-height: 0; aspect-ratio: 1; border-radius: 8px; }
 .rich-featured .rich-feature .article-cover-story { top: 22px; left: 12px; right: 12px; }
 .rich-featured .rich-feature .article-cover-word { font-size: 15px; }
 .rich-featured .rich-feature .article-list-cover > b { top: 64px; left: 12px; right: 12px; font-size: 16px; }
 .rich-featured .rich-feature .article-list-cover > i { width: 110px; height: 110px; right: -45px; bottom: -35px; }
 .rich-featured .rich-feature .rich-feature-body { padding: 0; }
 .rich-featured .rich-feature h2 { margin-top: 8px; font-size: 18px; }
 .rich-featured .rich-feature .rich-feature-body > p { margin-top: 8px; font-size: 13px; }
}
@media (max-width: 520px) {
 .rich-featured .rich-feature, .rich-featured .rich-feature:first-child { padding: 14px; }
 .rich-featured .rich-feature .article-list-grid { grid-template-columns: 96px minmax(0,1fr); gap: 14px; }
 .rich-featured .rich-feature .article-cover-story { left: 8px; right: 8px; }
 .rich-featured .rich-feature .article-cover-word { font-size: 13px; }
 .rich-featured .rich-feature .article-list-cover > b { top: 56px; left: 8px; right: 8px; font-size: 14px; }
 .rich-featured .rich-feature h2 { font-size: 16px; }
 .rich-feature-meta { flex-wrap: wrap; }
 .rich-feature-meta > a { min-height: 44px; margin-left: auto; }
}