/*
 *
 * CityUHK SDG Report 2024-25
 * --------------------------
 * Goal 12 -- this page, in Astro source order
 * GENERATED by port.py from the Astro build. Do not hand-edit:
 * your changes will be overwritten. Put fixes in css/_interop.css.
 *
 */

.sdg-report .stair{--hex-w: 9.8cqw;--fs-hexn: 2.1cqw;--fs-r: 2.1cqw;--fs-line: 1.28cqw;--fs-hubt: 1.4cqw;--fs-hubn: 4.8cqw;--arrow: 1.5cqw;--ban-px: 2.6cqw;--ban-py: 1cqw;--ban-pl: 1.3cqw;--line-gap: .35cqw;margin:0}
.sdg-report .stair__stage{position:relative;width:100%;aspect-ratio:1024 / 540;container-type:inline-size}
.sdg-report .stair__wires{position:absolute;inset:0;width:100%;height:100%}
.sdg-report .stair__wires line{stroke:color-mix(in oklab,var(--sdg-12) 35%,var(--hairline));stroke-width:1.6}
.sdg-report .stair__wires circle{fill:var(--paper);stroke:var(--sdg-12);stroke-width:2.5}
.sdg-report .stair__hub{position:absolute;left:13.7%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center}
.sdg-report .stair__hubt{display:block;font-size:var(--fs-hubt);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-grey)}
.sdg-report .stair__hubn{display:block;font-size:var(--fs-hubn);font-weight:900;letter-spacing:-.04em;line-height:.95;color:var(--ink)}
.sdg-report .stair__list{margin:0;padding:0;list-style:none}
.sdg-report .stair__item{position:absolute;transform:translate(-50%,-50%);width:54.7%;display:flex;align-items:stretch}
.sdg-report .stair__hex{flex:none;width:var(--hex-w);display:grid;place-items:center;background:var(--c);color:var(--paper);font-size:var(--fs-hexn);font-weight:900;clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%)}
.sdg-report .stair__ban{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:var(--ban-py) var(--ban-px) var(--ban-py) var(--ban-pl);background:var(--c);color:var(--paper);clip-path:polygon(0 0,calc(100% - var(--arrow)) 0,100% 50%,calc(100% - var(--arrow)) 100%,0 100%)}
.sdg-report .stair__r{font-size:var(--fs-r);font-weight:900;letter-spacing:.01em;line-height:1.05;text-transform:uppercase;white-space:nowrap}
.sdg-report .stair__line{font-size:var(--fs-line);font-weight:600;line-height:1.5;color:color-mix(in oklab,var(--paper) 88%,transparent);white-space:nowrap}
.sdg-report .stair__r+.stair__line{margin-top:var(--line-gap)}
@media(max-width:47.99rem){
.sdg-report .stair{--hex-w: 2.6rem;--fs-hexn: .95rem;--fs-r: 1.05rem;--fs-line: .8rem;--fs-hubt: .62rem;--fs-hubn: 2rem;--arrow: 10px;--ban-px: 1rem;--ban-py: .6rem;--ban-pl: .75rem;--line-gap: .2rem}
.sdg-report .stair__stage{aspect-ratio:auto}
.sdg-report .stair__wires{display:none}
.sdg-report .stair__hub{position:static;transform:none;margin-bottom:.9rem;text-align:left}
.sdg-report .stair__list{display:flex;flex-direction:column;gap:.4rem}
.sdg-report .stair__item{position:static;transform:none;width:100%}
.sdg-report .stair__r, .sdg-report .stair__line{white-space:normal}}
@media(prefers-reduced-motion:no-preference){
html.js .sdg-report .stair__item{opacity:0;transform:translate(calc(-50% - 12px),-50%)}
html.js .sdg-report .reveal.is-in .stair__item{opacity:1;transform:translate(-50%,-50%);transition:opacity .5s var(--ease-out-quint),transform .5s var(--ease-out-quint);transition-delay:calc(var(--i) * .08s)}
@media(max-width:47.99rem){
html.js .sdg-report .stair__item{transform:translate(-12px)}
html.js .sdg-report .reveal.is-in .stair__item{transform:none}}}
.sdg-report .rpie__title{font-size:var(--step-1);font-weight:800;letter-spacing:-.02em}
.sdg-report .rpie__sub{margin-top:.4rem;font-size:.95rem;color:var(--ink-soft);line-height:1.45}
.sdg-report .rpie__grid{margin-top:1.4rem;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.4rem,.8rem + 3vw,3rem);align-items:start}
@media(max-width:46rem){
.sdg-report .rpie__grid{grid-template-columns:1fr;gap:1.6rem}}
.sdg-report .rpie__chartwrap{margin:0}
.sdg-report .rpie__svg{display:block;width:100%;max-width:20rem;margin-inline:auto;height:auto;overflow:visible}
.sdg-report .slice{cursor:pointer;transition:transform .28s var(--ease-out-quint),opacity .2s;outline:none}
.sdg-report .slices.has-active .slice{opacity:.45}
.sdg-report .slices.has-active .slice.is-on{opacity:1;transform:translate(var(--ox, 0),var(--oy, 0))}
@media(prefers-reduced-motion:reduce){
.sdg-report .slice{transition:opacity .2s}}
.sdg-report .rpie__cv{font-weight:900;font-size:40px;letter-spacing:-.04em;fill:var(--ink)}
.sdg-report .rpie__cu{font-size:.45em;font-weight:800;fill:var(--sdg-ink)}
.sdg-report .rpie__ck{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--mid-grey)}
.sdg-report .slabel{font-family:Libre Franklin,system-ui,sans-serif;font-size:13px;font-weight:800;fill:var(--ink);pointer-events:none;opacity:0;transition:opacity .2s;paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.sdg-report .slabel.is-shown{opacity:1}
.sdg-report .slabel__v{font-size:12px;font-weight:900;fill:var(--sdg-ink);font-variant-numeric:tabular-nums}
.sdg-report .rpie__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.sdg-report .leg{display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .6rem;border:1px solid transparent;border-radius:10px;cursor:pointer;color:var(--ink);transition:background .15s,border-color .15s}
.sdg-report .leg.is-on{background:color-mix(in oklab,var(--sdg) 10%,var(--paper));border-color:color-mix(in oklab,var(--sdg) 34%,var(--hairline))}
.sdg-report .leg__sw{width:.85rem;height:.85rem;border-radius:3px;background:var(--c);flex:none}
.sdg-report .leg__l{font-size:.92rem;font-weight:600;flex:1}
.sdg-report .leg__v{font-size:.88rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.sdg-report .rpie__sums{margin:.5rem 0 0;padding:.75rem .6rem 0;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:.4rem}
.sdg-report .rpie__sum{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.sdg-report .rpie__sum-l{font-size:.88rem;font-weight:700;color:var(--ink-soft)}
.sdg-report .rpie__sum-v{margin:0;font-size:var(--step-1);font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.sdg-report .rpie__total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.5rem;padding:.75rem .6rem 0;border-top:1px solid var(--hairline)}
.sdg-report .rpie__total-l{font-size:.88rem;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.sdg-report .rpie__total-v{font-size:var(--step-1);font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.sdg-report .rpie__rate{margin-top:.35rem;padding-inline:.6rem;font-size:.88rem;color:var(--ink-soft)}
.sdg-report .rpie__rate b{font-weight:900;color:var(--ink)}
.sdg-report .btnlink{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;margin-top:1rem;font-size:var(--step--1);font-weight:700;letter-spacing:.01em;color:var(--ink);border:1px solid color-mix(in oklab,var(--sdg) 42%,var(--hairline));border-radius:999px;padding:.42rem .95rem;background:var(--paper);transition:background .2s var(--ease-out-quint),color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.sdg-report .btnlink:hover{background:var(--sdg);color:var(--on);border-color:var(--sdg)}
.sdg-report .btnlink:focus-visible{outline:2px solid var(--sdg);outline-offset:2px}
.sdg-report .btnlink__go{width:.9rem;height:.9rem;transition:transform .25s var(--ease-out-quint)}
.sdg-report .btnlink:hover .btnlink__go{transform:translate(2px,-2px)}
.sdg-report .n12{padding-block:clamp(2.75rem,1.8rem + 4vw,5rem)}
.sdg-report .n12 .shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.sdg-report .n12 .rpie{margin-top:clamp(2rem,1.4rem + 2vw,3.2rem)}
.sdg-report .hero{padding:clamp(1.4rem,.9rem + 2vw,2.5rem);border-radius:22px;background:color-mix(in oklab,var(--sdg) 7%,var(--paper));border:1px solid color-mix(in oklab,var(--sdg) 22%,var(--hairline))}
.sdg-report .hero__head{max-width:none;margin-bottom:clamp(1.2rem,.8rem + 1.5vw,1.9rem)}
.sdg-report .hero__lede{max-width:none}
.sdg-report .hero__name{font-size:var(--hero-r1);font-weight:900;letter-spacing:-.04em;line-height:var(--rank1-lh);color:var(--ink);text-wrap:balance}
.sdg-report .hero__deck{margin-top:.75rem;max-width:74%;font-size:var(--hero-r3);font-weight:700;line-height:1.3;color:var(--ink-soft)}
.sdg-report .hero__rule{margin:1.2rem 0 0;border:0;border-top:1px solid color-mix(in oklab,var(--sdg) 34%,var(--hairline))}
.sdg-report .hero__lede{margin-top:1.1rem;font-size:var(--step-0);color:var(--ink-soft);line-height:1.5}
.sdg-report .metrics{margin-top:clamp(2rem,1.4rem + 2vw,3.2rem);display:grid;gap:clamp(1.5rem,1rem + 2vw,2.4rem)}
.sdg-report .mgroup{display:grid;gap:clamp(.9rem,.6rem + 1vw,1.4rem)}
.sdg-report .mgroup__head{display:flex;align-items:center;gap:clamp(.7rem,.4rem + 1vw,1.1rem)}
.sdg-report .mgroup__mark{display:grid;place-items:center;flex:none;width:clamp(2.8rem,2.2rem + 1.6vw,3.5rem);height:clamp(2.8rem,2.2rem + 1.6vw,3.5rem);border-radius:11px;background:var(--sdg);color:var(--on)}
.sdg-report .mgroup__mark svg{width:58%;height:58%}
.sdg-report .mgroup__kicker{font-size:var(--step-1);font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--ink);display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.55rem}
.sdg-report .mgroup__period{font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--mid-grey);font-variant-numeric:tabular-nums}
.sdg-report .micro{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:clamp(.8rem,.4rem + 1.2vw,1.4rem)}
.sdg-report .micro__item{display:flex;flex-direction:row;align-items:center;text-align:left;gap:clamp(.7rem,.4rem + 1vw,1.1rem);padding:clamp(.5rem,.3rem + .6vw,.85rem) 0;padding-left:clamp(.75rem,.4rem + 1.4vw,1.5rem)}
.sdg-report .micro__icon{color:var(--sdg-ink);line-height:0;flex:none}
.sdg-report .micro__icon svg{width:2.6rem;height:2.6rem}
.sdg-report .micro__num{font-size:var(--micro-r);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.sdg-report .micro__label{font-size:var(--step-0);font-weight:700;color:var(--ink-soft);line-height:1.2}
.sdg-report .btnlink.micro__cta{margin-top:0;flex:none}
.sdg-report .pcard{--goal-mark: clamp(3rem, 2.2rem + 2.5vw, 4rem);--goal-inset: clamp(.85rem, .55rem + .9vw, 1.35rem);margin-top:clamp(1.1rem,.7rem + 1.2vw,1.8rem);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:stretch;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid color-mix(in oklab,var(--sdg) 26%,var(--hairline));transition:transform .3s var(--ease-out-quint),box-shadow .3s var(--ease-out-quint),border-color .3s}
.sdg-report .pcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px #1a141680;border-color:color-mix(in oklab,var(--sdg) 45%,var(--hairline))}
.sdg-report .pcard:focus-visible{outline:2px solid var(--sdg);outline-offset:3px}
.sdg-report .pcard__visual{position:relative;overflow:hidden;min-height:14rem;background:color-mix(in oklab,var(--sdg) 8%,var(--paper-sunk))}
.sdg-report .pcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sdg-report .pcard:hover .pcard__img{transform:scale(1.04);transition:transform .5s var(--ease-out-quint)}
.sdg-report .pcard__body{display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:clamp(1.4rem,1rem + 2vw,2.6rem)}
.sdg-report .pcard__eyebrow{color:var(--sdg-ink)}
.sdg-report .pcard__title{font-size:clamp(1.4rem,1.05rem + 1.4vw,2.1rem);font-weight:900;letter-spacing:-.025em;line-height:1.08}
.sdg-report .pcard__summary{font-size:var(--step-0);color:var(--ink-soft);line-height:1.5;max-width:52ch}
.sdg-report .pcard__cta{display:inline-flex;align-items:center;gap:.45rem;margin-top:.3rem;font-size:var(--step--1);font-weight:800;color:var(--sdg-ink)}
.sdg-report .pcard__cta svg{width:1.1rem;height:1.1rem;transition:transform .25s var(--ease-out-quint)}
.sdg-report .pcard:hover .pcard__cta svg{transform:translate(3px,-3px)}
.sdg-report .pcard__body{position:relative}
.sdg-report .pcard__goal{position:absolute;z-index:1;top:var(--goal-inset);right:var(--goal-inset);width:var(--goal-mark);height:auto;border-radius:0}
.sdg-report .pcard__eyebrow, .sdg-report .pcard__title{padding-right:calc(var(--goal-mark) + 1rem)}
@media(max-width:44rem){
.sdg-report .pcard{grid-template-columns:1fr}
.sdg-report .pcard__visual{min-height:0;aspect-ratio:16 / 10}}
.sdg-report .btnlink{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;margin-top:clamp(1.3rem,.9rem + 1.5vw,2rem);font-size:var(--step--1);font-weight:700;letter-spacing:.01em;color:var(--ink);border:1px solid color-mix(in oklab,var(--sdg) 42%,var(--hairline));border-radius:999px;padding:.42rem .95rem;background:var(--paper);transition:background .2s var(--ease-out-quint),color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.sdg-report .btnlink--minor{margin-top:1rem}
.sdg-report .btnlink:hover{background:var(--sdg);color:var(--on);border-color:var(--sdg)}
.sdg-report .btnlink:focus-visible{outline:2px solid var(--sdg);outline-offset:2px}
.sdg-report .btnlink__go{width:.9rem;height:.9rem;transition:transform .25s var(--ease-out-quint)}
.sdg-report .btnlink:hover .btnlink__go{transform:translate(2px,-2px)}
.sdg-report .mock-badge{font-size:var(--step--2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--hairline);border-radius:999px;padding:.25rem .6rem}
@media(max-width:34rem){
.sdg-report .mock-badge{display:none}}
.sdg-report .herobanner{width:100%;height:clamp(220px,12rem + 14vw,440px);overflow:hidden;background:color-mix(in oklab,var(--accent) 8%,var(--paper-sunk))}
.sdg-report .herobanner__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.sdg-report .band{background:var(--accent);color:var(--on)}
.sdg-report .band__inner{display:flex;align-items:flex-start;gap:clamp(1rem,.4rem + 3vw,3rem);padding-block:clamp(2.4rem,1.5rem + 4vw,4.5rem)}
.sdg-report .band__mark{flex:none;align-self:flex-start;background:var(--paper);padding:.5rem;border-radius:10px}
.sdg-report .band__icon{display:block;width:clamp(5rem,3rem + 9vw,9rem);height:auto}
.sdg-report .band__goal{color:color-mix(in oklab,var(--on) 64%,transparent)}
.sdg-report .band__title{margin-top:.55rem;font-size:var(--step-3);font-weight:900;letter-spacing:-.03em;line-height:.98}
.sdg-report .band__frame{margin-top:1.1rem;max-width:46ch;font-size:var(--step-1);font-weight:500;line-height:1.35;color:color-mix(in oklab,var(--on) 86%,transparent)}
.sdg-report .block{padding-block:clamp(2.6rem,1.8rem + 3vw,4.5rem);border-top:1px solid var(--hairline)}
.sdg-report .block--tint{background:color-mix(in oklab,var(--accent) 4%,var(--paper))}
.sdg-report .block__head{display:grid;grid-template-columns:auto 1fr;gap:clamp(.9rem,.4rem + 2vw,1.8rem);align-items:center;margin-bottom:clamp(1.5rem,1rem + 2vw,2.4rem)}
.sdg-report .block__mark{display:grid;place-items:center;flex:none;width:clamp(3rem,2.2rem + 2.5vw,4rem);height:clamp(3rem,2.2rem + 2.5vw,4rem);border-radius:11px;background:var(--accent);color:var(--on)}
.sdg-report .block__mark svg{width:58%;height:58%}
.sdg-report .block__kicker{font-size:var(--step-2);font-weight:900;letter-spacing:-.02em;line-height:1}
.sdg-report .vgrid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.5rem + 1.5vw,1.6rem)}
@media(max-width:58rem){
.sdg-report .vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:36rem){
.sdg-report .vgrid{grid-template-columns:1fr}}
html.js .sdg-report .vgrid--collapsible:not(.is-expanded)>.vcard:nth-child(n+4){display:none}
.sdg-report .viewmore{display:none;margin:clamp(1.1rem,.8rem + 1vw,1.6rem) auto 0;align-items:center;gap:.5rem;padding:.6rem 1.3rem;border-radius:999px;cursor:pointer;background:var(--paper);border:1px solid color-mix(in oklab,var(--accent) 40%,var(--hairline));font:inherit;font-size:var(--step--1);font-weight:700;letter-spacing:.01em;color:var(--ink);transition:background .2s var(--ease-out-quint),color .2s,border-color .2s}
html.js .sdg-report .viewmore{display:flex;width:fit-content}
.sdg-report .viewmore:hover{background:var(--accent);color:var(--on);border-color:var(--accent)}
.sdg-report .viewmore:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sdg-report .viewmore__chev{width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s var(--ease-out-quint)}
.sdg-report .viewmore[aria-expanded=true] .viewmore__chev{transform:rotate(-135deg) translate(-1px,-1px)}
.sdg-report .vcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hairline);border-radius:16px;overflow:hidden;transition:transform .3s var(--ease-out-quint),box-shadow .3s var(--ease-out-quint),border-color .3s}
.sdg-report .vcard--link:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px #1a141673;border-color:color-mix(in oklab,var(--accent) 45%,var(--hairline))}
.sdg-report .vcard__cover{position:absolute;inset:0;z-index:3}
.sdg-report .vcard__cover:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:16px}
.sdg-report .vcard__visual{position:relative;aspect-ratio:16 / 10;background:color-mix(in oklab,var(--accent) 8%,var(--paper-sunk));overflow:hidden}
.sdg-report .vcard__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out-quint)}
.sdg-report .vcard--link:hover .vcard__img{transform:scale(1.04)}
.sdg-report .vcard__ph{position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in oklab,var(--accent) 70%,var(--ink))}
.sdg-report .vcard__ph svg{width:2.6rem;height:2.6rem;opacity:.8}
.sdg-report .vcard__go{position:absolute;top:.7rem;right:.7rem;z-index:2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 2px 8px -2px #1a141666;transition:background .25s,color .25s,transform .25s var(--ease-out-quint)}
.sdg-report .vcard__go svg{width:1.05rem;height:1.05rem}
.sdg-report .vcard--link:hover .vcard__go{background:var(--accent);color:var(--on);transform:translate(2px,-2px)}
.sdg-report .vcard__body{display:flex;flex-direction:column;gap:.55rem;padding:clamp(1rem,.8rem + .6vw,1.35rem);flex:1}
.sdg-report .vcard__title{font-size:var(--step-1);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.sdg-report .vcard__summary{font-size:.94rem;color:var(--ink-soft);line-height:1.5;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:14;overflow:hidden}
.sdg-report .vcard__foot{margin-top:.35rem;display:flex;flex-direction:column;gap:.5rem;padding-top:.85rem;border-top:1px solid var(--hairline)}
.sdg-report .vcard__goals-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sdg-report .vcard__goals-h{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mid-grey)}
.sdg-report .gchips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.sdg-report .gchip{flex:0 0 auto;width:20%;position:relative;z-index:2}
.sdg-report .gchip__img{display:block;width:100%;height:auto}