/*
 *
 * CityUHK SDG Report 2024-25
 * --------------------------
 * Design tokens and hand-maintained template interop
 * GENERATED by port.py from the Astro build. Do not hand-edit:
 * your changes will be overwritten. Put fixes in css/_interop.css.
 *
 */

/*
 *
 * CityUHK SDG Report 2024-25
 * --------------------------
 * HAND-MAINTAINED. Read by port.py, never written by it.
 *
 * Design tokens and element defaults, adapted from the token block Astro
 * inlines into every built page. The adaptation is the point: the Astro
 * original styles `body` and bare `*`, which would leak into
 * cityu-template-3, so those are re-pointed at .sdg-report here.
 *
 * port.py fingerprints the Astro token block and warns when it changes.
 * If it warns, diff the <style> block in dist/sdg/1/index.html against
 * this file and bring across whatever is new.
 *
 */

:root{--ink: #1a1416;--ink-soft: #463b3f;--paper: #faf7f5;--paper-sunk: #f1ece8;--mid-grey: #6e6569;--hairline: #e1d9d4;--cityu-red: #a6093d;--sdg-01: #e5243b;--sdg-02: #dda63a;--sdg-03: #4c9f38;--sdg-04: #c5192d;--sdg-05: #ff3a21;--sdg-06: #26bde2;--sdg-07: #fcc30b;--sdg-08: #a21942;--sdg-09: #fd6925;--sdg-10: #dd1367;--sdg-11: #fd9d24;--sdg-12: #bf8b2e;--sdg-13: #3f7e44;--sdg-14: #0a97d9;--sdg-15: #56c02b;--sdg-16: #00689d;--sdg-17: #19486a;--font-sans: "Libre Franklin", "Libre Franklin Fallback", system-ui, -apple-system, sans-serif;--step--1: clamp(.82rem, .8rem + .1vw, .875rem);--step-0: 1.0625rem;--step-1: clamp(1.2rem, 1.12rem + .4vw, 1.45rem);--step-2: clamp(1.5rem, 1.35rem + .75vw, 2rem);--step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);--step-4: clamp(1.95rem, 1rem + 4.2vw, 5.5rem);--hero-r1: clamp(2.75rem, 1.9rem + 3.2vw, 4.2rem);--hero-r2: clamp(2.6rem, 1.8rem + 3vw, 4rem);--hero-r3: var(--step-1);--fig-r1: clamp(2.1rem, 1.52rem + 1.79vw, 2.9rem);--fig-r2: clamp(2rem, 1.45rem + 1.7vw, 2.75rem);--fig-r3: var(--step-1);--fig-r4: .9rem;--micro-r: clamp(1.8rem, 1.3rem + 1.5vw, 2.5rem);--glyph-sym: .5em;--glyph-unit: max(.38em, 1rem);--glyph-ord: .4em;--glyph-gap: .18em;--numeral-lh: .85;--rank1-lh: .96;--space-2xs: .375rem;--space-xs: .625rem;--space-sm: 1rem;--space-md: 1.75rem;--space-lg: 3rem;--space-xl: 5rem;--space-2xl: 8rem;--measure: 68ch;--shell: 76rem;--ease-out-quint: cubic-bezier(.22, 1, .36, 1)}@font-face{font-family:Libre Franklin Fallback;src:local("Arial");size-adjust:97%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
.sdg-report, .sdg-report *, .sdg-report *:before, .sdg-report *:after{box-sizing:border-box}
.sdg-report{background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;font-kerning:normal;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
.sdg-report h1, .sdg-report h2, .sdg-report h3, .sdg-report h4{margin:0;line-height:1.05;font-weight:800;letter-spacing:-.018em;text-wrap:balance}
.sdg-report p{margin:0}
.sdg-report a{color:inherit}
.sdg-report .tnum{font-variant-numeric:tabular-nums lining-nums}
.sdg-report .nowrap{white-space:nowrap}
.sdg-report .eyebrow{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mid-grey)}
.sdg-report .shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.sdg-report .measure{max-width:var(--measure)}
.sdg-report .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sdg-report .skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:50;border-radius:0 0 6px}
.sdg-report .skip-link:focus{left:0}
.sdg-report :where(a, button, [tabindex]):focus-visible{outline:3px solid var(--cityu-red);outline-offset:3px;border-radius:2px}
.sdg-report .reveal{opacity:1}@media(prefers-reduced-motion:no-preference){
html.js .sdg-report .reveal{opacity:0;transform:translateY(18px)}
html.js .sdg-report .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out-quint),transform .7s var(--ease-out-quint)}}

/*
 *
 * CityUHK SDG Report 2024-25
 * --------------------------
 * HAND-MAINTAINED. Read by port.py and appended to SDG-base.css, never
 * written by it. This is the only place to put CSS you write yourself.
 *
 * Everything here exists because cityu-template-3 and the Astro report
 * disagree about something. Keep the numbered explanations: they are the
 * reason each override is not dead code.
 *
 */

/* ==================== Report tail ====================
   .section-bg spans the whole wrapper and is what paints the area below the last
   block, so it carries the per-page tint (--sdg-tint) and meets .block--tint
   seamlessly. Everything ABOVE that block is given an opaque paper background so
   the tint cannot show there, and the template's top padding is moved off
   .section-content onto the figures section — left on .section-content it is a
   transparent strip that leaks the tint under the band.
   The BOTTOM padding is deliberately untouched: the skew curve needs that height
   to draw, and zeroing it collapses the diagonal.                              */

.sdg-report .section-wrap.section-light > .section-content {
  padding-top: 0 !important;
}
.sdg-report .v2 {
  background: var(--paper);
  padding-top: 100px;
}
.sdg-report .blocks > .block:not(.block--tint) {
  background: var(--paper);
}

/* ==================== Report tail ====================
   One .section-bg is painted behind the whole wrapper and draws the skew curve,
   so tinting it alone would tint the figures too. .section-content is given the
   paper background to mask that, and its bottom padding is dropped; .sdg-tail is
   a sibling, so it still holds the wrapper open to the height the curve needs
   while letting the tinted .section-bg show through beneath the final block.
   --sdg-tint is set per page on the wrapper and matches .block--tint.          */

.sdg-report .section-wrap.section-light > .section-content {
  background: var(--paper);
  padding-bottom: 0 !important;
}
.sdg-report .sdg-tail {
  height: clamp(200px, 18vw, 360px);
}


/* ==================== Template interop fixes ====================
   Overrides for cityu-template-3 / SDG.css rules that leak into the goal
   pages. Scoped to .sdg-report and loaded only on the goal pages, so the
   report home page (transparent sections, teal footer curve) is untouched. */

/* 1) Coloured stripe after the first section.
      SDG.css (loaded site-wide via htm/meta.htm) forces
      .section-content transparent with !important, which lets the tinted
      .section-bg show through between sections. Re-assert the paper
      background the report design depends on; the .sdg-tail sits outside
      .section-content, so the tinted tail and the skew curve still show. */
.sdg-report .section-wrap.section-light > .section-content {
  background: var(--paper) !important;
}

/* 2) Centered paragraphs from template defaults: force report text back
      to the left. Page-specific alignment (e.g. SDG 3's right-aligned
      scrim) still wins via its more specific class rule. */
.sdg-report .section-wrap > .section-content {
  text-align: left;
}
.sdg-report p,
.sdg-report li,
.sdg-report figcaption {
  text-align: left;
}

/* 3) Duplicate external-link icon on target="_blank" links: the template
      appends its own bootstrap-icons glyph after new-tab links; the report
      markup already carries its own arrow SVG. */
.sdg-report a[target="_blank"]::after,
.sdg-report a[target="_blank"]::before {
  content: none !important;
  display: none !important;
}

/* 4) Ordinal badge overflow ("1st" poking out of the gold square, SDG 2 &
      SDG 3): Bootstrap's reboot gives sup { position:relative; top:-.5em;
      line-height:0 }, which shifts the <sup class="hero__ord/fig__ord">
      out of the badge. Restore the Astro rendering. */
.sdg-report sup {
  position: static;
  top: auto;
  line-height: inherit;
  vertical-align: baseline;
}

/* 5) fig__lead--stack losing to page CSS: each page's .fig__lead rule
      (align-items:center) has equal specificity but loads after SDG-base,
      so it beat the --stack modifier and centered the numeral + claim
      (e.g. "101 kg" on SDG 2). Re-assert the stack layout with higher
      specificity so source order no longer matters. */
.sdg-report .fig__lead.fig__lead--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* 6) Scrim captions rendering black: the template's paragraph colour
      lands on <p class="hero__scrim"> / <p class="fig__scrim"> and beats
      the report's own white. Affects SDG 1, 2, 3, 10 (x2) and 11.
      The <b> inside keeps its SDG accent colour — it has its own rule. */
.sdg-report .hero__scrim,
.sdg-report .fig__scrim {
  color: var(--paper) !important;
}