/*
 *
 * CityUHK SDG Report 2024-25
 * --------------------------
 * Goal 1 -- 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 .n1{padding-block:clamp(2.75rem,1.8rem + 4vw,5rem)}
.sdg-report .n1 .shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.sdg-report .hero{display:flex;flex-direction:column;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__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__pair{margin-top:clamp(1.1rem,.8rem + 1vw,1.6rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,.8rem + 3vw,3.5rem);align-items:start}
@media(max-width:48rem){
.sdg-report .hero__pair{grid-template-columns:1fr;gap:1.2rem}}
.sdg-report .hero__big{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:-.05em;color:var(--ink);font-size:var(--hero-r2);font-variant-numeric:tabular-nums}
.sdg-report .hero__cap{margin-top:.7rem;font-size:var(--step-0);color:var(--ink-soft);line-height:1.5;max-width:74%}
.sdg-report .hero__half--second{padding-left:clamp(1.2rem,.6rem + 2vw,2.2rem);border-left:1px solid color-mix(in oklab,var(--sdg) 34%,var(--hairline))}
@media(max-width:48rem){
.sdg-report .hero__half--second{border-left:0;padding-left:0;border-top:1px solid color-mix(in oklab,var(--sdg) 34%,var(--hairline));padding-top:1rem}}
.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:start}
@media(max-width:44rem){
.sdg-report .cols{grid-template-columns:1fr}}
.sdg-report .cols__figs{display:grid;gap:clamp(1rem,.5rem + 1.6vw,1.6rem)}
.sdg-report .fig{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__title{margin-top:.5rem;font-size:var(--fig-r1);font-weight:900;letter-spacing:-.03em;line-height:1.02;color:var(--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)}
.sdg-report .fig__plus{font-size:var(--glyph-sym);font-weight:900;margin-left:.02em;color:var(--sdg-ink)}
.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%}
.sdg-report .fig__panel{position:relative;margin:5px;margin-top:1.5rem;aspect-ratio:4 / 3;border-radius:16px;overflow:hidden;outline:1px solid var(--sdg);outline-offset:5px}
.sdg-report .fig__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.04);animation:figKB 18s ease-in-out infinite alternate}
@keyframes figKB{0%{transform:scale(1.04)}to{transform:scale(1.16)}}
@media(prefers-reduced-motion:reduce){
.sdg-report .fig__photo{animation:none;transform:scale(1.05)}}
.sdg-report .fig__scrim{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.8rem 1rem .75rem;color:var(--paper);font-size:var(--step--1);letter-spacing:.02em;background:linear-gradient(0deg,#140e08d1,#140e0800)}
.sdg-report .fig__scrim b{color:color-mix(in oklab,var(--sdg) 45%,var(--paper));font-weight:800}
.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 .cols__micro{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.4rem);align-content:start}
.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:1fr;gap:clamp(.8rem,.4rem + 1.2vw,1.4rem);align-content:start}
.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__item:has(.micro__cta){align-items:flex-start}
.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__body{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.sdg-report .micro__line{display:flex;flex-direction:row;align-items:center;gap:clamp(.7rem,.4rem + 1vw,1.1rem)}
.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 .micro__cta{margin-top:0}
.sdg-report .micro__num--pending{color:var(--mid-grey)}
.sdg-report .micro__pendtag{align-self:center;flex:none;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mid-grey);border:1px solid var(--hairline);border-radius:999px;padding:.16rem .55rem}
.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}