/* ES Producation Groups Berhad, Canopy: the article page (weekly/article-template.html).
Loaded after css/tokens.css (the locked home page's CSS), css/pages.css and css/article-kit.css. It skins the article
kit in Canopy's own terms (aeo-toolchain/article-kit/STANDARD.md): the "On this page" list sits in a LEFT rail, as the
group report's rail does on every about page, sticky below the header; the reading column is ~66ch at 17px on a
laptop and 16px on a phone; tables and figures are wider than the prose; the key-takeaways card is white with an ink
rule, its heading and every bullet visible. Smallest text 12px. Written 20 Oct 2026 (Canopy AEO package). */
:root{
--ak-ink:var(--ink);--ak-muted:var(--ink-2);--ak-rule:var(--rule);--ak-accent:var(--red);
--ak-surface:var(--white);--ak-tint:var(--paper-2);--ak-zebra:transparent;--ak-radius:2px;
--ak-top:calc(var(--hdr) + 28px);--ak-side:232px;--ak-gap:clamp(48px,4.4vw,80px);--ak-ui-font:var(--sans);
}
/* ---- the first screen ---- */
.art__mast{padding:calc(var(--hdr) + clamp(22px,3.4vw,48px)) 0 clamp(28px,3.4vw,48px)}
.art__head{margin-top:clamp(28px,3.6vw,52px);max-width:980px}
.art__head .label{margin-bottom:clamp(18px,2.2vw,28px)}
.art__h1{font-size:clamp(40px,4.6vw,72px);line-height:1.02;letter-spacing:-.022em;max-width:20ch;text-wrap:balance}
.art__byline{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:clamp(20px,2.4vw,30px);font-size:13px;color:var(--ink-2)}
.art__byline span{display:inline-flex;align-items:center}
.art__byline span+span::before{content:"";width:18px;height:1px;background:var(--rule-2);margin:0 12px}
.art__byline span:first-child{color:var(--ink);font-weight:600}
.js .art__h1{animation:hero-rise 1s var(--ease) both}
.art__hero{margin:0}
.art__hero-img{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--stone)}
.art__hero-img img{width:100%;height:100%;object-fit:cover}
.art__hero figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-family:var(--serif);font-style:normal;font-size:15px;color:var(--ink-2)}
.art__hero figcaption:not(:empty)::before{content:"Fig. 1";flex:none;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.art__hero figcaption:empty{display:none}
/* ---- the reading area: the rail on the left, the article on the right ---- */
.art__wrap{padding-block:clamp(48px,6vw,96px)}
@media (min-width:1100px){
.art .ak-layout{grid-template-columns:var(--ak-side) minmax(0,1fr)}
.art .ak-aside{grid-column:1;grid-row:1}
.art .ak-main{grid-column:2;grid-row:1}
}
.art .ak-main{max-width:900px}
.art .ak-toc__label{display:flex;align-items:center;gap:12px;margin:0;padding-bottom:12px;border-bottom:1px solid var(--ink);font-size:12px;letter-spacing:.14em;color:var(--ink)}
.art .ak-toc__label::before{content:"";width:22px;height:2px;background:var(--key);flex:none}
.art .ak-toc__progress{margin:0 0 6px;height:2px;background:var(--rule)}
.art .ak-toc__progress::after{background:var(--key)}
.art .ak-toc__list{border-left:1px solid var(--rule);margin-top:10px}
.art .ak-toc__list a{font-size:14px;line-height:1.4;color:var(--ink-2);padding:8px 0 8px 14px}
.art .ak-toc__list a[aria-current="true"]{color:var(--ink);border-left-color:var(--red);font-weight:600}
.art .ak-toc__top{font-size:13px;color:var(--ink-2)}
.art__card{margin-top:4px;padding:18px 18px 20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--rule),inset 0 3px 0 var(--ink)}
.art__card p{font-family:var(--serif);font-size:18px;line-height:1.3;letter-spacing:-.01em;margin-bottom:12px}
.art__card .link{display:flex;justify-content:space-between;font-size:14px;margin-top:8px}
.art .ak-toc-m{border-radius:2px;border-color:var(--rule-2);background:var(--white)}
.art .ak-toc-m>summary{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.art .ak-toc-m__count{letter-spacing:0;text-transform:none}
/* ---- the lead: short answer, standing note, key takeaways ---- */
.art__answer{padding:22px 0 0;border-top:1px solid var(--ink);max-width:68ch}
.art__k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:10px}
.art__answer-text{font-family:var(--serif);font-size:clamp(20px,1.6vw,24px);line-height:1.45;letter-spacing:-.008em;color:var(--ink)}
.art__standing{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;line-height:1.55;color:var(--ink-2);max-width:68ch}
.art__standing .ic{flex:none;margin-top:1px}
/* key takeaways (render slot takeaways_html): Key takeaways
...
- Lead. text
...