/*
 *
 * CityUHK SDG Report 2024-25
 * --------------------------
 * Goal 17 -- 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 .n17{padding-block:clamp(2.75rem,1.8rem + 4vw,5rem)}
.sdg-report .n17 .shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.sdg-report .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);column-gap:clamp(1.5rem,.9rem + 2vw,2.75rem);align-items:stretch;padding:clamp(1.5rem,.9rem + 2vw,2.75rem);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__intro{grid-column:1 / -1}
.sdg-report .hero__cta{grid-column:1 / -1;justify-self:start}
.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__big{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.sdg-report .hero__num{display:inline-flex;align-items:baseline;line-height:var(--numeral-lh);font-weight:900;letter-spacing:-.055em;color:var(--ink);font-size:var(--hero-r2);font-variant-numeric:tabular-nums}
.sdg-report .hero__unit{font-size:var(--glyph-unit);font-weight:800;letter-spacing:.005em;color:var(--sdg-ink);margin-left:var(--glyph-gap)}
.sdg-report .hero__big-l{font-size:var(--step-0);color:var(--ink-soft);line-height:1.45;max-width:74%}
@media(max-width:48rem){
.sdg-report .hero__deck, .sdg-report .hero__big-l{max-width:100%}}
.sdg-report .reach{margin:clamp(1.3rem,.9rem + 1.4vw,2rem) 0 0;padding:clamp(1.1rem,.8rem + 1vw,1.5rem) 0 0;list-style:none;border-top:1px solid color-mix(in oklab,var(--sdg) 34%,var(--hairline));display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:auto auto;column-gap:clamp(.9rem,.5rem + 1.4vw,1.6rem);row-gap:.45rem}
.sdg-report .reach__item{display:grid;grid-template-rows:subgrid;grid-row:span 2;grid-template-columns:max-content;min-width:0}
.sdg-report .reach__item--joined{grid-template-columns:max-content max-content;column-gap:clamp(.9rem,.5rem + 1.4vw,1.6rem)}
.sdg-report .reach__item--joined .reach__num{grid-area:1 / 2}
.sdg-report .reach__item--joined .reach__label{grid-area:2 / 2}
.sdg-report .reach__joint{grid-area:2 / 1;font-size:var(--fig-r4);font-weight:700;line-height:1.3;color:var(--ink-soft)}
.sdg-report .reach__num{display:inline-flex;align-items:baseline;line-height:var(--numeral-lh);font-weight:900;letter-spacing:-.05em;color:var(--ink);font-size:var(--fig-r2);font-variant-numeric:tabular-nums}
.sdg-report .reach__plus{font-size:var(--glyph-sym);font-weight:900;color:var(--sdg-ink);margin-left:.02em}
.sdg-report .reach__label{font-size:var(--fig-r4);font-weight:700;color:var(--ink-soft);line-height:1.3}
.sdg-report .inno{padding-top:1rem;padding-left:clamp(1.5rem,.9rem + 2vw,2.75rem);border-left:1px solid color-mix(in oklab,var(--sdg) 34%,var(--hairline));display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(.5rem,.3rem + .6vw,.85rem);align-content:start}
.sdg-report .inno__head{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:baseline}
.sdg-report .inno__num{grid-column:1}
.sdg-report .inno__noun, .sdg-report .inno__list{grid-column:2}
.sdg-report .inno__num{display:inline-flex;align-items:baseline;line-height:var(--numeral-lh);flex:none;font-size:var(--fig-r2);font-weight:900;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.sdg-report .inno__noun{font-size:var(--fig-r3);font-weight:800;letter-spacing:-.015em;line-height:1.15;color:var(--sdg-ink)}
.sdg-report .inno__list{margin:clamp(.9rem,.6rem + .9vw,1.4rem) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(.6rem,.4rem + .5vw,.9rem)}
.sdg-report .inno__item{font-size:.95rem;font-weight:700;line-height:1.35;color:var(--ink)}
@media(max-width:48rem){
.sdg-report .hero{grid-template-columns:minmax(0,1fr)}
.sdg-report .inno{margin-top:clamp(1.3rem,.9rem + 1.4vw,2rem);padding-top:clamp(1.1rem,.8rem + 1vw,1.5rem);padding-left:0;border-left:0;border-top:1px solid color-mix(in oklab,var(--sdg) 34%,var(--hairline))}}
.sdg-report .cols{margin-top:clamp(1.4rem,.9rem + 1.5vw,2rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,.5rem + 1.6vw,1.6rem);align-items:stretch}
@media(max-width:44rem){
.sdg-report .cols{grid-template-columns:1fr}}
.sdg-report .fig{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(1.3rem,.9rem + 1.5vw,2rem);border-radius:18px;background:color-mix(in oklab,var(--sdg) 5%,var(--paper));border:1px solid color-mix(in oklab,var(--sdg) 16%,var(--hairline));container-type:inline-size}
.sdg-report .fig__eyebrow{color:var(--sdg-ink)}
.sdg-report .fig__big{margin-top:.5rem;display:inline-flex;align-items:baseline;line-height:var(--numeral-lh);font-weight:900;letter-spacing:-.05em;color:var(--ink);font-size:var(--fig-r2);font-variant-numeric:tabular-nums}
.sdg-report .fig__plus{font-size:var(--glyph-sym);font-weight:900;color:var(--sdg-ink);margin-left:.02em}
.sdg-report .fig__headline{margin-top:.7rem;font-size:var(--fig-r3);font-weight:800;letter-spacing:-.015em;line-height:1.18;max-width:74%;color:var(--ink)}
.sdg-report .fig__note{margin-top:.55rem;font-size:var(--fig-r4);color:var(--ink-soft);line-height:1.4;max-width:74%;flex:1}
.sdg-report .fig__fill{flex:1}
.sdg-report .fig__lead{margin-top:.5rem;display:flex;align-items:center;gap:clamp(.8rem,.45rem + 1vw,1.2rem);flex-wrap:nowrap}
.sdg-report .fig__lead .fig__big{margin-top:0;flex:none}
.sdg-report .fig__lead .fig__headline{margin-top:0;flex:1 1 auto;min-width:0;max-width:none}
.sdg-report .fig__lead--stack{flex-direction:column;align-items:flex-start;gap:0}
.sdg-report .fig__lead--stack .fig__headline{margin-top:.55rem;max-width:74%}
@container (max-width: 26rem){
.sdg-report .fig__lead{flex-direction:column;align-items:flex-start;gap:0}
.sdg-report .fig__lead .fig__headline{margin-top:.55rem;max-width:74%}}
.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{position:relative;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__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 .herobanner__img.is-broken{display:none}
.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__img.is-broken{display:none}
.sdg-report .vcard__ph{position:absolute;inset:0;display:none;place-items:center;color:color-mix(in oklab,var(--accent) 70%,var(--ink))}
.sdg-report .vcard__visual:not(:has(.vcard__img)) .vcard__ph, .sdg-report .vcard__img.is-broken+.vcard__ph{display:grid}
.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}