/* Bounded optional covers and balanced 1/2/3-column article indexes. */
figure.article-cover{display:block;width:100%;max-width:1040px;aspect-ratio:auto;margin:28px auto 36px;padding:0;border:1px solid #d4dfc9;border-radius:24px;background:#f0f5e9;overflow:hidden}
figure.article-cover img{display:block;width:100%!important;height:auto!important;max-height:585px;aspect-ratio:16/9;object-fit:cover}
.article-intro--text{position:relative;padding-bottom:36px;border-bottom:1px solid #dce6d2}.article-intro--text:after{content:'';display:block;width:105px;height:7px;background:#caff43;clip-path:polygon(0 20%,100% 0,96% 65%,4% 100%);margin:28px auto 0;transform:rotate(-2deg)}
.article-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;margin-inline:auto;align-items:stretch}.article-list:has(>:only-child){grid-template-columns:minmax(0,1fr);max-width:720px}.article-list:has(>:first-child:nth-last-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px}
.article-list :is(.guide-card,.article-list-card){display:flex;flex-direction:column;min-width:0;border:1px solid #d8e2cd;background:linear-gradient(145deg,#fff,#f1f6ea);border-radius:20px;overflow:hidden;padding:24px;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.article-list :is(.guide-card,.article-list-card):hover{transform:translateY(-4px);border-color:#92b84e;box-shadow:0 16px 34px #344c2112}.article-list :is(.guide-card,.article-list-card):focus-visible{outline:3px solid #ff6b4c;outline-offset:5px}
.article-list img,.article-list .article-card-cover{display:block;width:100%!important;height:auto!important;max-height:370px;aspect-ratio:16/9;object-fit:cover;flex:none;border-radius:12px;margin:0 0 20px}.article-list :is(.guide-card,.article-list-card):not(:has(img)){border-top:5px solid #caff43}
.article-list-card-body{display:flex;flex-direction:column;gap:14px;flex:1}.article-list :is(h2,h3){font-size:24px;line-height:1.25;letter-spacing:-.04em;margin:0 0 16px}.article-list p{font-size:15px;line-height:1.8;margin:0 0 18px;color:#5c6855}.article-list small{font-size:10px;letter-spacing:.12em;color:#8c432d}.article-list .read-guide{margin-top:auto;padding-top:14px;font-size:14px;font-weight:700}.article-list-empty{padding:25px;border:1px solid #d9e3ce;border-radius:15px}
.reader-body blockquote{border-left:4px solid #caff43;margin:25px 0;padding:16px 22px;background:#f1f6e9}.reader-body blockquote p{margin:0}
@media(max-width:1000px){.article-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.article-list,.article-list:has(>:first-child:nth-last-child(2)){grid-template-columns:minmax(0,1fr)}figure.article-cover{border-radius:16px;margin:20px auto}.article-list :is(.guide-card,.article-list-card){padding:22px}.article-list :is(h2,h3){font-size:24px}}
@media(prefers-reduced-motion:reduce){.article-list :is(.guide-card,.article-list-card){transition:none}}
/* Width-bounded cards preserve the exact cover ratio at every breakpoint. */
.article-list .guide-card img.article-card-cover{max-height:none!important;height:auto!important;aspect-ratio:16/9;object-fit:cover}
/* Uniform mixed-cover cards, including three latest articles and six-item indexes. */
.article-list{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;grid-auto-rows:1fr}.article-list :is(.guide-card,.article-list-card){min-height:0;box-sizing:border-box}.article-list :is(.guide-card,.article-list-card) :is(h2,h3){font-size:clamp(22px,1.85vw,26px);line-height:1.3;letter-spacing:-.025em;overflow-wrap:anywhere;text-wrap:balance}.article-list :is(.guide-card,.article-list-card) p{color:#44533b;font-size:16px;line-height:1.75}.article-list :is(.guide-card,.article-list-card) :is(.guide-index,.read-guide,small){font-size:14px!important;line-height:1.6;color:#44533b}.article-list .guide-card img.article-card-cover{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:16/9;object-fit:cover}.article-list .guide-card:not(:has(img)) h3{margin-top:12px}.article-list .guide-card .read-guide{margin-top:auto}
@media(min-width:651px) and (max-width:1000px){.article-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.article-list{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.article-list :is(.guide-card,.article-list-card){padding:22px}.article-list :is(h2,h3){font-size:24px!important}}