/* Scoped copy of layout.css (original design). Generated for the WordPress template. */
/* Proportions and original artwork from index_20260930.jpg / the October 1 assets. */
body.shengang-landing .hero { height: 100vh; height: 100svh; --hero-unit: min(.052083333vw, .092592593svh); overflow: clip; }
body.shengang-landing .site-header { position: fixed; z-index: 60; translate: 0 var(--header-shift, 0px) !important; transition: top .25s, translate .25s; }
body.shengang-landing .site-header.is-docked { top: 10px; box-shadow: 0 8px 28px #24618a20; }
body.shengang-landing .site-header.is-scroll-hidden { --header-shift: calc(-100% - 32px); pointer-events: none; }
body.shengang-landing .site-header:focus-within { --header-shift: 0px; pointer-events: auto; }
body.shengang-landing .hero-backdrop > picture, body.shengang-landing .hero-figure > picture { display: block; width: 100%; height: 100%; }
body.shengang-landing .hero-copy picture, body.shengang-landing .hero > picture { display: contents; }
body.shengang-landing .policies { overflow: clip; }
body.shengang-landing .hero-copy { top: 12.2%; left: 2.5%; width: 45%; max-width: 864px; }
body.shengang-landing .candidate-intro { position: relative; display: block; height: calc(var(--hero-unit) * 220); }
body.shengang-landing .candidate-role-art { position: absolute; top: 0; left: 0; width: calc(var(--hero-unit) * 558); max-width: none; }
body.shengang-landing .candidate-name-art { position: absolute; top: calc(var(--hero-unit) * 49); left: calc(var(--hero-unit) * 531); width: calc(var(--hero-unit) * 198); max-width: none; }
body.shengang-landing .hero-title-art { width: calc(var(--hero-unit) * 736); max-width: none; margin: calc(var(--hero-unit) * 32) 0 0 calc(var(--hero-unit) * 112); }
body.shengang-landing .hero-tagline { margin-top: calc(var(--hero-unit) * 28); margin-left: calc(var(--hero-unit) * 190); padding-inline: 3em; font-size: calc(var(--hero-unit) * 28); }
/* Lexend's uppercase glyphs sit above the line box's descent. Compensate in em
   so the visible letters meet the Banner edge at every viewport size. */
body.shengang-landing .hero-marquee { bottom: -.13em; font-size: calc(var(--hero-unit) * 255); font-weight: 600; line-height: 1; letter-spacing: -.035em; z-index: 5; }
body.shengang-landing .hero-down-decoration { position: absolute; z-index: 4; bottom: -1px; left: 0; width: 100%; height: calc(var(--hero-unit) * 236); object-fit: fill; pointer-events: none; }

body.shengang-landing .round-button, body.shengang-landing .round-button:hover { padding: 0; border: 0; background: transparent; }
body.shengang-landing .arrow-art { display: block; width: 100%; height: 100%; pointer-events: none; }
body.shengang-landing .arrow-left { --arrow-surface: #2261d7; --arrow-ink: #fff; }
body.shengang-landing .arrow-right { --arrow-surface: #fff; --arrow-ink: #2261d7; }
body.shengang-landing .arrow-art rect:first-of-type { fill: var(--arrow-surface); }
body.shengang-landing .arrow-art path { fill: var(--arrow-ink); }
body.shengang-landing .action-prev .arrow-art { --arrow-surface: #fff; --arrow-ink: #2261d7; }
body.shengang-landing .action-next .arrow-art { --arrow-surface: #2261d7; --arrow-ink: #fff; }
body.shengang-landing .line-arrow { display: block; width: 20px; height: 20px; flex-shrink: 0; pointer-events: none; }
body.shengang-landing .tab-arrow { display: flex; align-items: center; justify-content: center; }
body.shengang-landing .social-arrow .line-arrow { width: 14px; height: 14px; }
body.shengang-landing .arrow-up { transform: rotate(-90deg); }
body.shengang-landing .social-link { border: 1px solid #fff; transition: background-color .25s, color .25s, border-color .25s; }
body.shengang-landing .social-link:hover, body.shengang-landing .social-link:focus-visible { background: transparent; border-color: #fff; color: #fff; box-shadow: none; }
body.shengang-landing .social-link:hover { outline: none; }
body.shengang-landing .social-link:hover .social-arrow, body.shengang-landing .social-link:focus-visible .social-arrow { border-color: #fff; color: #fff; }
body.shengang-landing .social-link[aria-label^="Threads"]:hover .social-icon,
body.shengang-landing .social-link[aria-label^="Threads"]:focus-visible .social-icon { filter: brightness(0) invert(1); }

/* Portrait Shorts stay large enough for YouTube's embedded player controls. */
body.shengang-landing .news-track { gap: 20px; padding: 4px; scroll-padding-inline: 4px; }
body.shengang-landing .news-card { flex-basis: clamp(200px, 19vw, 240px); aspect-ratio: 9 / 16; overflow: clip; border-radius: 18px; background: #13263c; transition: box-shadow .3s; }
body.shengang-landing .news-card::after { content: none; }
body.shengang-landing .news-card.is-active { box-shadow: 0 0 0 3px #2e79df; }
body.shengang-landing .news-video { position: relative; aspect-ratio: 9 / 16; overflow: clip; background: #13263c; }
body.shengang-landing .news-video .news-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
body.shengang-landing .news-embed { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.shengang-landing .news-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
body.shengang-landing .news-start { position: absolute; inset: 0; display: block; width: 100%; height: 100%; color: #fff; border: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; }
body.shengang-landing .news-card .news-cover-gradient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
body.shengang-landing .news-card:hover .news-cover-gradient { transform: none; }
body.shengang-landing .news-card .news-cover-title { position: absolute; z-index: 1; bottom: 17px; left: 14px; right: 12px; font-size: 15px; line-height: 1.5; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shengang-landing .news-card.is-player-visible .news-start, body.shengang-landing .news-card.is-player-visible .news-poster { visibility: hidden; pointer-events: none; }
body.shengang-landing .news-card.is-player-visible .news-embed { opacity: 1; pointer-events: auto; }
body.shengang-landing .news-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.shengang-landing .news-status:empty { display: none; }
body.shengang-landing .news-start:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }

/* GSAP normalizes individual transforms inline; keep these offsets independent. */
body.shengang-landing .decoration { position: absolute; z-index: 1; height: auto; pointer-events: none; max-width: none; translate: 0 var(--float-offset, 0px) !important; }
body.shengang-landing .decoration-about { width: min(24.84vw, 477px); right: -3%; top: -10%; }
body.shengang-landing .decoration-media { width: min(11.46vw, 220px); left: -8%; bottom: 0; opacity: .5; }
body.shengang-landing .challenges .decoration-green { width: min(16vw, 307px); right: -5%; top: 31%; }
body.shengang-landing .decoration-coral { width: min(20.21vw, 388px); right: -8%; bottom: -5%; }
body.shengang-landing .policies .decoration-green { width: min(16vw, 307px); left: -9%; top: 30%; }
body.shengang-landing .about-copy, body.shengang-landing .issues > .container, body.shengang-landing .challenges .section-heading, body.shengang-landing .challenge-scene { position: relative; z-index: 2; }
body.shengang-landing .cloud { position: absolute; z-index: 1; pointer-events: none; width: auto; max-width: none; }
body.shengang-landing .cloud-1 { left: -3%; top: -65px; width: min(9.79vw, 188px); }
body.shengang-landing .cloud-2 { left: 19%; top: 8%; width: min(5.68vw, 109px); }
body.shengang-landing .cloud-3 { left: -3%; top: 38%; width: min(7.92vw, 152px); }
body.shengang-landing .cloud-4 { right: -3%; top: -44px; width: min(7.34vw, 141px); }
body.shengang-landing .cloud-5 { right: 6%; top: 15%; width: min(8.65vw, 166px); }
body.shengang-landing .challenges { overflow: visible; }
body.shengang-landing .challenges::after { height: min(8.8vw, 169px); background-image: url('../assets/skyline_all.webp'); background-size: auto 100%; z-index: 1; }
/* Keep positioning on the wrapper, independent of the image's GSAP transform.
   The opaque artwork spans x=106..715 in a 787px canvas, 17px right of center. */
body.shengang-landing .family-anchor { position: absolute; z-index: 2; bottom: 0; left: 50%; width: 56.2%; max-width: 787px; transform: translateX(-50%); }
body.shengang-landing .family { position: relative; left: -2.16%; bottom: auto; width: 100%; max-width: none; clip-path: none; transform: none; }
body.shengang-landing .question-cloud { width: 150px; top: 5px; }
body.shengang-landing .section-cue { bottom: -48px; padding: 0; width: 64px; }
body.shengang-landing .cue-svg { display: block; width: 100%; height: auto; overflow: visible; }
body.shengang-landing .cue-arrow { transform-box: fill-box; transform-origin: center; }
body.shengang-landing .action::before { display: none; }
body.shengang-landing .action-image-window { overflow: clip; border-radius: 30px; isolation: isolate; }
body.shengang-landing .action-image-window > img { display: block; width: 100%; height: 285px; object-fit: cover; }

body.shengang-landing .action { background: var(--sky); }
body.shengang-landing .action-map { position: absolute; z-index: 0; width: min(55.520833vw, 1066px); max-width: none; height: auto; left: 0; top: 0; opacity: .9; pointer-events: none; }
body.shengang-landing .policy-watermark { top: 235px; }

/* Persistent cards move around an arc; no card is rebuilt or faded between steps. */
body.shengang-landing .policy-stage { --card-width: clamp(240px, 18.23vw, 350px); height: 530px; }
body.shengang-landing .policy-stage { cursor: grab; }
body.shengang-landing .policy-stage.is-dragging, body.shengang-landing .policy-stage.is-dragging .policy-card { cursor: grabbing; }
body.shengang-landing .policy-card img { user-select: none; -webkit-user-drag: none; }
body.shengang-landing .policy-card {
  top: 76px;
  width: var(--card-width);
  min-height: 390px;
  padding: 24px 25px 26px;
  border-radius: 28px;
  transform-origin: 50% 100%;
  background: #eaf2f8;
  transition: box-shadow .5s;
  will-change: transform;
}
body.shengang-landing .policy-card[data-offset="0"] { min-height: 390px; }
body.shengang-landing .policy-card .policy-label { font-size: 16px; line-height: 1.4; }
body.shengang-landing .policy-card .policy-number { font-size: 28px; line-height: 1.4; }
body.shengang-landing .policy-card img { width: 100%; height: 205px; margin: 12px auto 5px; object-fit: contain; }
body.shengang-landing .policy-card h3 { font-size: 21px; margin: 8px 0; }
body.shengang-landing .policy-card .policy-description { font-size: 14px; line-height: 1.8; }
body.shengang-landing .policy-placeholder { height: 205px; }
body.shengang-landing .policy-card.is-active { box-shadow: 0 4px 36px #243d5324; }
body.shengang-landing .policy-card[aria-hidden="true"] { pointer-events: none; }
body.shengang-landing .policy-carousel { padding-top: 58px; padding-bottom: var(--policy-bottom-space, 32px); }
body.shengang-landing .policy-controls { margin-top: 0; gap: 20px; }
body.shengang-landing .connect { padding-top: 32px; }
body.shengang-landing .policy-controls .round-button { width: 43px; height: 43px; }
body.shengang-landing .policy-dot { width: 8px; height: 8px; }
body.shengang-landing .policies::after { height: calc(415px + var(--policy-extra-space, 0px)); border-radius: 50% 50% 0 0 / 35% 35% 0 0; }

@media (min-width: 1201px) {
  body.shengang-landing .container { width: 74%; }
}
@media (min-width: 1401px) {
  body.shengang-landing .about { padding-bottom: 41px; }
  body.shengang-landing .media-panel { padding-inline: 80px; }
  body.shengang-landing .news-track { gap: 28px; }
}
@media (min-width: 1921px) {
  body.shengang-landing .hero-copy { left: calc((100% - 1824px) / 2); }
}
@media (max-width: 1600px) and (min-width: 901px) {
  body.shengang-landing .action-image-window > img { height: 250px; }
  body.shengang-landing .policy-stage { height: 445px; }
  body.shengang-landing .policy-card { top: 65px; min-height: 325px; padding: 20px 19px; border-radius: 24px; }
  body.shengang-landing .policy-card[data-offset="0"] { min-height: 325px; }
  body.shengang-landing .policy-card img, body.shengang-landing .policy-placeholder { height: 155px; }
  body.shengang-landing .policy-card .policy-label { font-size: 13px; }
  body.shengang-landing .policy-card .policy-number { font-size: 24px; }
  body.shengang-landing .policy-card h3 { font-size: 18px; }
  body.shengang-landing .policy-card .policy-description { font-size: 12px; }
  body.shengang-landing .policies::after { height: calc(355px + var(--policy-extra-space, 0px)); }
}
@media (max-width: 1200px) and (min-width: 701px) {
  body.shengang-landing .action-image-window > img { height: 240px; }
  body.shengang-landing .hero-copy { top: 20%; left: 2%; width: 48%; }
  body.shengang-landing .candidate-intro { height: 13.8vw; }
  body.shengang-landing .candidate-role-art { width: 32vw; }
  body.shengang-landing .candidate-name-art { left: 33vw; top: 2.5vw; width: 11.2vw; }
  body.shengang-landing .hero-title-art { width: 43vw; margin-top: 28px; margin-left: 4vw; }
  body.shengang-landing .hero-tagline { margin-left: 8%; padding-inline: 1em; font-size: 15px; }
  body.shengang-landing .hero-figure { height: 76%; right: 1%; }
  body.shengang-landing .family-anchor { width: 58%; }
  body.shengang-landing .question-cloud { width: 115px; }
}
@media (max-width: 900px) {
  body.shengang-landing .action-image-window > img { height: auto; aspect-ratio: 600 / 361; }
  body.shengang-landing .policy-stage { --card-width: 270px; height: 490px; }
  body.shengang-landing .policy-card { min-height: 350px; top: 67px; padding: 24px 23px; }
  body.shengang-landing .policy-card[data-offset="0"] { min-height: 350px; }
  body.shengang-landing .policy-card img, body.shengang-landing .policy-placeholder { height: 172px; }
  body.shengang-landing .policy-card .policy-label { font-size: 14px; }
  body.shengang-landing .policy-card .policy-number { font-size: 25px; }
  body.shengang-landing .policy-card h3 { font-size: 19px; }
  body.shengang-landing .policy-card .policy-description { font-size: 13px; }
  body.shengang-landing .question-cloud { top: 175px; width: 90px; }
  body.shengang-landing .decoration-about { width: 250px; }
  body.shengang-landing .policies::after { height: calc(345px + var(--policy-extra-space, 0px)); }
}
@media (max-width: 700px) {
  body.shengang-landing .action-image-window { border-radius: 22px; }
  body.shengang-landing .action { overflow: clip; }
  /* The reference is a 375 x 725 composition. Keep every layer in that canvas. */
  body.shengang-landing #smooth-content { padding-top: 74px; }
  body.shengang-landing .site-header, body.shengang-landing .site-header.is-docked { position: fixed; top: 0; left: 0; width: 100%; min-height: 74px; padding: 10px 22px; border-radius: 0; }
  body.shengang-landing .hero { height: auto; aspect-ratio: 375 / 725; }
  body.shengang-landing .hero-background { object-position: center; }
  body.shengang-landing .hero-copy { top: 0; left: 0; width: 100%; height: 78.133vw; max-width: none; }
  body.shengang-landing .candidate-intro { height: 41.333vw; }
  body.shengang-landing .candidate-role-art { top: 4.8vw; left: 0; width: 64.8%; max-width: none; }
  body.shengang-landing .candidate-name-art { left: 61.333%; top: 14.667vw; width: 22.4%; max-width: none; }
  body.shengang-landing .hero-title-art { position: absolute; top: 40.267vw; left: 6.4%; width: 87.467%; max-width: none; margin: 0; }
  body.shengang-landing .hero-tagline, body.shengang-landing .hero-marquee { display: none; }
  body.shengang-landing .hero-down-decoration { width: 100%; height: auto; max-width: none; left: 0; bottom: 0; }
  body.shengang-landing .hero-figure { width: 100.267%; height: auto; aspect-ratio: 336 / 398; left: 0; right: auto; bottom: -.55%; }
  body.shengang-landing .cloud { display: block; }
  body.shengang-landing .cloud-1, body.shengang-landing .cloud-3, body.shengang-landing .cloud-4 { display: none; }
  body.shengang-landing .cloud-2 { top: 15px; left: -5%; width: 70px; opacity: .75; }
  body.shengang-landing .cloud-5 { top: 13%; right: -8%; width: 105px; opacity: .75; }
  body.shengang-landing .challenges::after { height: 95px; background-image: url('../assets/skyline_2.webp'); }
  body.shengang-landing .challenge-scene { min-height: 735px; }
  body.shengang-landing .family-anchor { width: 105%; max-width: 430px; bottom: 0; }
  body.shengang-landing .question-cloud { top: auto; bottom: 285px; width: 74px; }
  body.shengang-landing .section-cue { width: 52px; bottom: -38px; }
  body.shengang-landing .decoration-about { width: 180px; right: -17%; top: 3%; opacity: .6; }
  body.shengang-landing .decoration-media { display: none; }
  body.shengang-landing .challenges .decoration-green { width: 160px; right: -22%; top: 43%; }
  body.shengang-landing .decoration-coral { width: 185px; right: -19%; bottom: -3%; }
  body.shengang-landing .policies .decoration-green { width: 150px; left: -21%; top: 28%; }
  body.shengang-landing .action-map { width: 160%; left: -48%; top: 0; opacity: .8; }
  body.shengang-landing .policy-carousel { padding-top: 40px; padding-bottom: var(--policy-bottom-space, 25px); }
  body.shengang-landing .policy-stage { --card-width: 240px; height: 470px; }
  body.shengang-landing .policy-card { top: 70px; min-height: 350px; padding: 22px 19px; border-radius: 24px; }
  body.shengang-landing .policy-card[data-offset="0"] { min-height: 350px; }
  body.shengang-landing .policy-card img, body.shengang-landing .policy-placeholder { height: 165px; }
  body.shengang-landing .policy-controls { gap: 15px; }
  body.shengang-landing .policy-controls .round-button { width: 39px; height: 39px; }
  body.shengang-landing .policy-dot { width: 6px; height: 6px; }
  body.shengang-landing .policies::after { height: calc(315px + var(--policy-extra-space, 0px)); }
  body.shengang-landing .policy-watermark { top: 280px; }
}
@media (max-width: 380px) {
  body.shengang-landing .policy-stage { --card-width: 218px; height: 470px; }
  body.shengang-landing .policy-card { padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  body.shengang-landing .site-header, body.shengang-landing .news-embed { transition: none; }
  body.shengang-landing .hero-marquee { font-size: clamp(20px, 3vw, 46px); line-height: 1; bottom: -.13em; }
  body.shengang-landing .policy-card { will-change: auto; }
}
