body { margin: 0; }
.content-shell, .article-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.content-hero, .article-hero { padding: 92px 0 68px; background: linear-gradient(135deg, var(--chalk-deep), var(--chalk) 58%, #2e7258); color: #fffdf7; }
.content-hero h1, .article-hero h1 { max-width: 900px; margin: 8px 0 20px; color: #fffdf7; font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: clamp(2.65rem, 6vw, 5.4rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.02; }
.content-hero p:not(.content-kicker), .article-hero > div > p:not(.content-kicker) { max-width: 760px; margin: 0; color: rgba(255, 253, 247, .86); font-size: 1.08rem; }
.content-kicker { margin: 0; color: #b85b45; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.content-hero .content-kicker, .article-hero .content-kicker { color: #ffe18a; }
.content-section { padding: 64px 0 76px; }
.content-section--soft { background: #edf5df; }
.content-actions { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.text-link { color: #fff2c5; font-weight: 900; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.filter-chips a { padding: 8px 13px; border: 1px solid #cbdac2; border-radius: 999px; background: #fffdf7; color: var(--leaf); font-weight: 800; text-decoration: none; }
.filter-chips a:hover, .filter-chips a.active { border-color: var(--chalk); background: var(--chalk); color: white; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.home-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resource-card, .contact-card { padding: 30px; border: 1px solid var(--line); border-radius: 21px; background: var(--paper); box-shadow: var(--shadow); }
.resource-card__meta { margin: 0 0 12px; color: var(--coral); font-size: .8rem; font-weight: 900; letter-spacing: .06em; }
.resource-card h2 { margin: 0 0 11px; font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: 1.65rem; font-weight: 400; line-height: 1.22; }
.resource-card h2 a { color: var(--chalk); text-decoration: none; }
.resource-card h2 a:hover { color: var(--coral); }
.resource-card p { color: var(--muted); }
.resource-card__link { color: var(--leaf); font-weight: 900; }
.article-hero { padding-bottom: 62px; }
.article-hero h1 { font-size: clamp(2.55rem, 5.4vw, 4.8rem); }
.article-byline { margin-top: 24px !important; color: #ffe9a8 !important; font-size: .9rem !important; font-weight: 800; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) 280px; gap: 58px; align-items: start; padding-top: 58px; padding-bottom: 82px; }
.article-content { min-width: 0; }
.article-content > section { margin-top: 42px; }
.article-content h2 { margin: 0 0 15px; color: var(--chalk); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: clamp(1.65rem, 3vw, 2.15rem); font-weight: 400; line-height: 1.18; }
.article-content p, .article-content li { color: #344e46; font-size: 1.02rem; line-height: 1.85; }
.article-content li + li { margin-top: 7px; }
.article-lead { font-size: 1.1rem !important; }
.article-callout { margin-top: 20px; padding: 18px 20px; border-left: 5px solid var(--sun); border-radius: 10px; background: #fff2c5; color: #5c4817; line-height: 1.75; }
.article-sidebar { position: sticky; top: 80px; padding: 25px; border: 1px solid #d7e3c7; border-radius: 20px; background: #edf5df; }
.article-sidebar h2 { margin: 5px 0 14px; color: var(--chalk); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: 1.45rem; font-weight: 400; }
.article-sidebar > a { display: block; padding: 15px 0; border-top: 1px solid #cdddc0; color: var(--chalk); text-decoration: none; }
.article-sidebar span { display: block; margin-bottom: 3px; color: var(--coral); font-size: .72rem; font-weight: 900; }
.article-sidebar strong { line-height: 1.42; }
.article-sidebar .article-sidebar__all { color: var(--leaf); font-weight: 900; }
.article-tool-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 28px; border: 1px solid #d6e3c7; border-radius: 18px; background: #edf5df; }
.article-tool-cta h2 { margin: 5px 0 8px; }
.article-tool-cta p { margin: 0; }
.article-editorial-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted) !important; font-size: .9rem !important; }
.tool-learning-guide { padding: 68px 20px 78px; background: #fff9e9; }
.tool-learning-guide__inner { width: min(1080px, 100%); margin: 0 auto; }
.tool-learning-guide h2 { max-width: 760px; margin: 6px 0 14px; color: var(--chalk); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.1; }
.tool-learning-guide__summary { max-width: 790px; color: var(--muted); font-size: 1.08rem; }
.tool-learning-guide__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.tool-learning-guide__facts span { padding: 8px 13px; border: 1px solid #d7e3c7; border-radius: 999px; background: #edf5df; color: var(--leaf); }
.tool-learning-guide__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tool-learning-guide__grid article { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 9px 20px rgba(24, 66, 55, .08); }
.tool-learning-guide__grid .tool-learning-guide__example { border-color: #efd589; background: #fff8df; }
.tool-learning-guide__grid h3 { margin: 0 0 10px; color: var(--chalk); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: 1.4rem; font-weight: 400; }
.tool-learning-guide__grid p, .tool-learning-guide__grid li { color: #435e55; line-height: 1.75; }
.tool-learning-guide__grid ol, .tool-learning-guide__grid ul { padding-left: 21px; }
.content-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.content-cta > div { min-width: 0; }
.content-cta > .btn { flex: 0 0 auto; white-space: nowrap; }
.content-cta h2, .prose-grid h2, .contact-card h2, .recommendation-feature h2, .question-grid h2 { margin: 5px 0 12px; color: var(--chalk); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-weight: 400; }
.about-hero-grid { display: grid; grid-template-columns: 1fr 280px; gap: 50px; align-items: center; }
.about-hero-grid img { width: 100%; border: 7px solid #fff6db; border-radius: 50%; background: #f8c63f; }
.prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.prose-grid article { padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.prose-grid p, .prose-grid li { color: #405b52; line-height: 1.8; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.contact-card--wide { grid-column: 1 / -1; }
.contact-card p, .contact-card li { color: #405b52; line-height: 1.75; }
.contact-card a:not(.btn) { color: var(--leaf); font-weight: 900; }
.recommendation-feature { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.recommendation-feature p, .recommendation-feature li { color: #405b52; line-height: 1.8; }
.affiliate-note { padding: 26px; border: 1px solid #eed78e; border-radius: 20px; background: #fff4cf; }
.recommendation-product { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 62px); align-items: center; margin-top: 54px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); }
.recommendation-product__image { display: grid; place-items: center; overflow: hidden; min-height: 420px; border-radius: 22px; background: #fff; }
.recommendation-product__image img { display: block; width: 100%; height: auto; max-height: 680px; object-fit: contain; transition: transform .22s ease; }
@media (hover: hover) and (pointer: fine) {
  .recommendation-product__image:hover img { transform: scale(1.025); }
}
.product-number { margin: 0 0 9px !important; color: var(--coral) !important; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.recommendation-product__copy h2 { margin: 0; color: var(--chalk); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.08; }
.product-subtitle { margin: 8px 0 20px !important; color: var(--leaf) !important; font-size: 1.08rem; font-weight: 900; }
.recommendation-product__copy > p, .product-reasons p { color: #405b52; line-height: 1.75; }
.recommendation-product__copy h3 { margin: 30px 0 14px; color: var(--chalk); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: 1.45rem; font-weight: 400; }
.product-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-reasons section { padding: 16px; border: 1px solid #d7e3c7; border-radius: 15px; background: #f4f8ec; }
.product-reasons strong { color: var(--chalk); }
.product-reasons p { margin: 7px 0 0; font-size: .9rem; }
.product-teacher-tip { margin: 24px 0; padding: 17px 19px; border-left: 5px solid var(--sun); border-radius: 10px; background: #fff4cf; color: #5b491c; line-height: 1.7; }
.product-teacher-tip strong { display: block; margin-bottom: 3px; color: var(--chalk); }
.product-printable-label { margin: 20px 0; padding: 16px 18px; border: 1px solid #d7e3c7; border-radius: 10px; background: #f4f8ec; }
.product-printable-label a { color: var(--chalk); font-weight: 900; }
.product-printable-label p { margin: 7px 0 0; color: #49655b; font-size: .9rem; line-height: 1.55; }
.product-link { display: inline-flex; text-decoration: none; }
.product-link-note { margin: 13px 0 0 !important; color: var(--muted) !important; font-size: .82rem; }
.question-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.question-grid article { padding: 24px; border: 1px solid #d7e3c7; border-radius: 18px; background: var(--paper); }
.question-grid p { margin-bottom: 0; color: var(--muted); }
.empty-state { padding: 30px; border-radius: 18px; background: #edf5df; }
@media (max-width: 960px) { .recommendation-product { grid-template-columns: 1fr; } .recommendation-product__image { min-height: 0; } .recommendation-product__image img { width: min(580px, 100%); } }
@media (max-width: 860px) { .article-layout { grid-template-columns: 1fr; gap: 30px; } .article-sidebar { position: static; } .about-hero-grid { grid-template-columns: 1fr; } .about-hero-grid img { width: min(260px, 70vw); } .recommendation-feature, .home-resource-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .content-shell, .article-shell { width: min(1120px, calc(100% - 32px)); } .content-hero, .article-hero { padding: 76px 0 50px; } .resource-grid, .tool-learning-guide__grid, .prose-grid, .contact-grid, .question-grid { grid-template-columns: 1fr; } .contact-card--wide { grid-column: auto; } .content-cta, .article-tool-cta { align-items: flex-start; flex-direction: column; } .article-layout { padding-top: 38px; } }
@media (max-width: 620px) { .recommendation-product { margin-top: 36px; padding: 18px; border-radius: 20px; } .product-reasons { grid-template-columns: 1fr; } }