/* Articles: the list, the cards, one article (typography, pictures, tables, quotes, charts, the contents list, the course block), the stars. Loaded on /articles/ pages (after styles.css). */
:root {
    --art-measure: 44rem;
    --chart-0: #3A7F3E; --chart-1: #D06A82; --chart-2: #2F6FA8; --chart-3: #C58B1E; --chart-4: #7A5BA6; --chart-5: #2A8C8C; --chart-6: #B5543C; --chart-7: #6B7A3A;
}
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.container--article { max-width: calc(var(--art-measure) + 2 * var(--gutter, 1.25rem)); margin-inline: auto; padding-inline: var(--gutter, 1.25rem); }

/* the list */
.art-grid { display: grid; gap: clamp(1rem, .6rem + 1.5vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.art-all { margin: 0 0 1.4rem; }
.art-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: transform var(--dur, .2s) var(--ease, ease), box-shadow var(--dur, .2s) var(--ease, ease); }
.art-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(31, 42, 31, .09); }
.art-card__media { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.art-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.art-card__ph { display: grid; place-items: center; height: 100%; color: var(--muted); }
.art-card__ph svg { width: 2.2rem; height: 2.2rem; }
.art-card__body { display: grid; align-content: start; gap: .45rem; padding: 1rem 1.15rem 1.2rem; }
.art-card__meta { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.art-card__title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; }
.art-card__title a { color: var(--ink); text-decoration: none; }
.art-card__title a::after { content: ""; position: absolute; inset: 0; }
.art-card { position: relative; }
.art-card__text { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-card__rating { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 0; color: var(--ink-soft); font-size: var(--fs-xs); }
.art-card__rating .rate { --star: 1rem; }
.art-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; color: var(--muted); }

/* one article */
.art-preview { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem var(--gutter, 1.25rem); background: #FFF1D6; color: #7A4F00; font-size: var(--fs-sm); }
.art-preview svg { width: 1.1em; height: 1.1em; flex: none; }
.art-head { padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.art-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; color: var(--muted); font-size: var(--fs-sm); }
.art-crumbs a { color: var(--ink-soft); text-decoration: none; }
.art-crumbs a:hover { text-decoration: underline; }
.art-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.art-tags li { padding: .15rem .7rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 600; }
.art-title { margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.art-lead { margin: 0 0 1rem; color: var(--ink-soft); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.5; text-wrap: pretty; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 0 0 1.4rem; color: var(--muted); font-size: var(--fs-sm); }
.art-meta__rating { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft); text-decoration: none; }
.art-meta__rating .rate { --star: 1rem; }
.art-cover { margin: 0 0 clamp(1.2rem, 1rem + 1vw, 2rem); }
.art-cover img { display: block; width: 100%; height: auto; border-radius: 20px; background-size: cover; background-position: center; }
.art-cover figcaption, .art-fig figcaption { margin-top: .5rem; color: var(--muted); font-size: var(--fs-xs); text-align: center; }

.art-toc { margin: 0 0 1.6rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.art-toc summary { cursor: pointer; font-weight: 700; }
.art-toc ol { display: grid; gap: .25rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.art-toc a { color: var(--ink-soft); text-decoration: none; }
.art-toc a:hover { color: var(--ink); text-decoration: underline; }
.art-toc__3 { padding-left: 1.1rem; }

.art-body { font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.72; color: var(--ink); overflow-wrap: break-word; }
.art-body > * { margin: 0 0 1.15em; }
.art-body h2, .art-body h3 { margin: 1.9em 0 .6em; font-family: var(--font-display); line-height: 1.18; scroll-margin-top: calc(var(--header-h, 4rem) + 1rem); text-wrap: balance; }
.art-body h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.art-body h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.art-body a { color: var(--accent-text, var(--ink)); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.art-body ul, .art-body ol { padding-left: 1.4em; }
.art-body li { margin: .35em 0; }
.art-body li::marker { color: var(--accent-text, var(--ink-soft)); }
.art-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.art-body code { padding: .1em .35em; border-radius: 6px; background: var(--surface-2); font-size: .9em; }
.art-body pre { overflow-x: auto; padding: 1rem; border-radius: 12px; background: var(--surface-2); }
.art-body pre code { padding: 0; background: none; }

.art-fig { margin: 1.6em 0; }
.art-fig img { display: block; width: 100%; height: auto; border-radius: 16px; background-size: cover; background-position: center; background-color: var(--surface-2); }
.art-img { background-color: var(--surface-2); }

.art-quote { margin: 1.6em 0; padding: .4rem 0 .4rem 1.2rem; border-left: 3px solid var(--accent, var(--ink)); font-family: var(--font-display); font-size: 1.3em; line-height: 1.4; color: var(--ink-soft); }
.art-quote p { margin: 0 0 .5em; }
.art-quote p:last-child { margin: 0; font-family: var(--font-body); font-size: .62em; font-style: normal; color: var(--muted); }

.art-table { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.art-table:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.art-table table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.45; }
.art-table th, .art-table td { padding: .65rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.art-table thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.art-table tbody tr:last-child td { border-bottom: 0; }

.art-note { margin: 1.6em 0; padding: 1rem 1.2rem; border-radius: 16px; background: var(--accent-soft, #E3EBDD); font-size: .96em; }
.art-note > :last-child { margin-bottom: 0; }
.art-note > :first-child { margin-top: 0; }

.art-cta { display: grid; justify-items: start; gap: .5rem; margin: 2.2em 0; padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); border-radius: 22px; background: var(--green-900, #22361F); color: #fff; }
.art-cta p { margin: 0; color: rgba(255, 255, 255, .86); }
.art-cta__label { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.art-cta__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; line-height: 1.15; color: #fff !important; }
.art-cta .btn { margin-top: .4rem; }

.art-sources { margin: 2.4em 0 1.4em; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .92em; }
.art-sources h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
.art-sources ol, .art-sources ul { margin: 0; padding-left: 1.4em; color: var(--ink-soft); }
.art-sources li { margin: .4em 0; overflow-wrap: anywhere; }

/* charts: drawn as SVG on the server; the colours are set here */
.art-chart { margin: 1.8em 0; padding: 1rem 1rem .8rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.art-chart figcaption { margin: 0 0 .5rem; font-weight: 700; font-size: .98em; }
.art-chart svg { display: block; width: 100%; height: auto; }
.art-chart .grid { stroke: var(--line); stroke-width: 1; }
.art-chart .axis { stroke: var(--ink-soft); stroke-width: 1.2; }
.art-chart .tick { fill: var(--muted); font-size: 12px; }
.art-chart .val { fill: var(--ink); font-size: 12px; font-weight: 700; }
.art-chart .bar, .art-chart .slice, .art-chart .dot, .art-chart .sw { fill: var(--c); }
.art-chart .line { stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.art-chart .slice { stroke: var(--surface); stroke-width: 2; }
.art-chart .c0 { --c: var(--chart-0); } .art-chart .c1 { --c: var(--chart-1); } .art-chart .c2 { --c: var(--chart-2); } .art-chart .c3 { --c: var(--chart-3); }
.art-chart .c4 { --c: var(--chart-4); } .art-chart .c5 { --c: var(--chart-5); } .art-chart .c6 { --c: var(--chart-6); } .art-chart .c7 { --c: var(--chart-7); }
.art-chart__legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .88em; color: var(--ink-soft); }
.art-chart__legend .sw { display: inline-block; width: .8em; height: .8em; margin-right: .4em; border-radius: 3px; background: var(--c); vertical-align: -.05em; }
.art-chart__note { margin: .5rem 0 0; color: var(--muted); font-size: .82em; }
.art-chart__data { margin-top: .6rem; font-size: .85em; }
.art-chart__data summary { cursor: pointer; color: var(--ink-soft); }
.art-chart__data table { width: 100%; margin-top: .5rem; border-collapse: collapse; }
.art-chart__data th, .art-chart__data td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }

.art-faq { margin: 2.4em 0 1.4em; }
.art-faq h2 { margin: 0 0 .8rem; font-family: var(--font-display); font-size: 1.6rem; }
.art-faq details { border-bottom: 1px solid var(--line); padding: .8rem 0; }
.art-faq summary { cursor: pointer; font-weight: 700; }
.art-faq p { margin: .6rem 0 0; color: var(--ink-soft); }
.art-disclaimer { margin: 2rem 0 0; padding: .9rem 1.1rem; border-radius: 14px; background: var(--surface-2); color: var(--ink-soft); font-size: var(--fs-sm); }

.art-rate { margin: 2rem 0 0; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.art-rate h2 { margin: 0 0 .8rem; font-family: var(--font-display); font-size: 1.4rem; }
.art-rate .rv-stars { --star: clamp(2.2rem, 11vw, 2.8rem); }
.art-rate__note { margin: .7rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.art-related { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

@media (prefers-reduced-motion: reduce) { .art-card { transition: none; } .art-card:hover { transform: none; } }