@charset "UTF-8";

.sp-about, .sp-governance, .sp-project { position: relative; z-index: 2; }
:is(.sp-about,.sp-governance,.sp-project) figure { overflow: hidden; }
.th-public-page:is(.sp-about,.sp-governance,.sp-project) figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(.sp-about,.sp-governance,.sp-project) p { color: var(--sp-muted); }
:is(.sp-about,.sp-governance,.sp-project) h1 { letter-spacing: -.05em; }
:is(.sp-about,.sp-governance,.sp-project) h1 > span { display: block; }
:is(.sp-about,.sp-governance,.sp-project) h3 { line-height: 1.6; }

.oa-hero { padding-block: 44px; background: linear-gradient(110deg,#fff8eb 0%,#f3e2cc 53%,#ad725d 100%); border-bottom: 1px solid #d6b889; }
.oa-hero-grid { display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 48px; }
.oa-hero h1 { color: #153545; font-family: "Songti SC","STSong","SimSun",serif; font-size: clamp(46px,4.5vw,64px); line-height: 1.4; }
.oa-hero h1 > span:last-child { color: #731c35; }
.oa-hero-copy p { max-width: 29em; margin-block: 22px 26px; color: #4f4b4a; }
.oa-hero-visual { height: 410px; border-radius: 75px 2px 2px 2px; box-shadow: 12px 12px 0 #731c3529; }
.oa-story-section { background: #fffcf6; }
.oa-story { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.oa-story-image { height: 340px; }
.oa-story-copy { padding-block: 8px; }
.oa-story-copy p { margin-top: 17px; }
.oa-story-copy .sp-heading { color: #731c35; font-family: "Songti SC","STSong","SimSun",serif; font-weight: 700; }
.oa-connections { background: linear-gradient(120deg,#e5ecee,#f8f1e5); }
.oa-connection-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.oa-connection-heading h2 { max-width: 12em; color: #153545; }
.oa-connection-heading p { max-width: 33em; margin-top: 16px; }
.oa-connection-heading figure { height: 210px; }
.oa-resource-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding-top: 30px; }
.oa-resource-row article { padding: 24px 27px; border-top: 3px solid #b8833c; background: #fff9ef; }
.oa-resource-row article:nth-child(2) { background: #f3e0df; border-color: #9c4050; }
.oa-resource-row article:nth-child(3) { background: #dce8eb; border-color: #2d5b6b; }
.oa-resource-row article > span { color: #755530; font-size: 12px; }
.oa-resource-row h3 { margin-block: 8px 11px; color: #153545; font-size: 25px; }
.oa-resource-row p { margin-bottom: 10px; }
.oa-text-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 24px; min-height: 44px; color: var(--sp-red); font-size: 14px; font-weight: 600; }
.oa-text-link::after { content: '↗'; font-size: 19px; }
.oa-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.oa-teams-section { background: #fff8eb; }
.oa-teams { display: grid; grid-template-columns: .95fr 1.1fr; gap: 48px; align-items: center; }
.oa-teams .sp-heading { max-width: 11em; color: #731c35; }
.oa-teams p { margin-block: 20px 24px; }
.oa-teams figure { height: 340px; border-radius: 2px 2px 60px 2px; }
.oa-invitation { padding-block: 44px; color: #fff7e9; background: linear-gradient(115deg,#8d3046,#501d34); }
.oa-invitation-grid { display: grid; grid-template-columns: .67fr 1.3fr; gap: 48px; align-items: center; }
.oa-invitation figure { height: 250px; border-radius: 2px 45px 2px 2px; }
.oa-invitation .sp-eyebrow { color: #e1b875; }
.oa-invitation p { color: #f0dce1; margin-block: 16px 24px; }

.og-hero { padding-block: 40px 0; background: linear-gradient(115deg,#731c35 0%,#64283d 36%,#203b4a 69%,#153545 100%); color: #fff8eb; }
.og-hero-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 48px; align-items: center; }
.og-hero .sp-eyebrow { color: #efd09e; }
.og-hero h1 { font-size: clamp(39px,3.85vw,56px); line-height: 1.45; }
.og-hero h1 > span:last-child { color: #f0c98b; }
.og-hero-copy p { max-width: 31em; margin-block: 20px 25px; color: #f0e2df; }
.og-hero-image { aspect-ratio: 3 / 2; border-radius: 2px 70px 2px 2px; border: 1px solid #edcca04d; box-shadow: 11px 11px 0 #e1b8751c; }
.og-role-nav { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-top: 34px; border-top: 1px solid #e1b87569; }
.og-role-nav a { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 22px 27px; background: #fff8eb09; color: #fff8eb; transition: background .2s; }
.og-role-nav a + a { border-left: 1px solid #e1b87552; }
.og-role-nav a:hover { background: #e1b87524; }
.og-role-nav a::after { content: '↓'; margin-left: auto; color: #edc58a; }
.og-role-nav strong { font-size: 19px; font-weight: 600; }
.og-role-nav span { color: #e9d3c7; font-size: 12px; }
.og-principle-section { background: #fff8eb; }
.og-principle { display: grid; grid-template-columns: .85fr 1.05fr; gap: 48px; align-items: center; }
.og-principle figure { height: 245px; }
.og-principle h2 { max-width: 12em; color: #731c35; }
.og-principle p { margin-top: 17px; }
.og-roles-section { padding-top: 0; background: #fff8eb; }
.og-roles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.og-role { background: #f1dfdd; border-bottom: 3px solid #9b3b51; }
.og-role:nth-child(2) { background: #dde9eb; border-color: #356275; }
.og-role:nth-child(3) { background: #efe0c6; border-color: #b98c4d; }
.og-role figure { height: 210px; }
.og-role > div { padding: 22px 25px 25px; }
.og-role .sp-eyebrow { margin-bottom: 10px; font-size: 11px; }
.og-role h2 { color: #153545; font-size: 27px; line-height: 1.5; }
.og-role p { margin-top: 12px; }
.og-participation-section { background: linear-gradient(110deg,#e7edef,#f7f0e4); }
.og-participation { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
.og-participation-copy p { margin-block: 17px 21px; }
.og-participation-copy figure { height: 225px; }
.og-participation-copy figure img { object-position: center 80%; }
.og-commitments { padding-left: 28px; border-left: 3px solid #b78642; }
.og-commitments article { padding-block: 24px; }
.og-commitments article + article { border-top: 1px solid #c3c4b9; }
.og-commitments h3 { color: #731c35; font-size: 26px; max-width: 12em; }
.og-commitments p { margin-top: 14px; }
.og-invitation { padding-block: 44px; background: linear-gradient(110deg,#153545,#244857); color: #fff8eb; }
.og-invitation-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 48px; }
.og-invitation .sp-eyebrow { color: #e1b875; }
.og-invitation .sp-heading { max-width: 12em; }
.og-invitation p { margin-block: 16px 23px; color: #dbe6e6; }
.og-invitation figure { height: 265px; }

.op-hero { padding-block: 40px; background: linear-gradient(112deg,#284e5b 0%,#153545 58%,#362738 100%); color: #fff8eb; }
.op-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 48px; align-items: center; }
.op-hero figure { height: 410px; border-radius: 2px 2px 70px 2px; border-bottom: 7px solid #c39758; }
.op-hero .sp-eyebrow { color: #e9c48b; }
.op-hero h1 { font-family: "Songti SC","STSong","SimSun",serif; font-size: clamp(37px,3.45vw,50px); line-height: 1.45; }
.op-hero h1 > span:last-child { color: #efd09e; }
.op-hero-copy p { max-width: 30em; margin-block: 21px 25px; color: #dfe7e7; }
.op-focus-section { background: #fff8eb; }
.op-focus-heading { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 48px; margin-bottom: 28px; }
.op-focus-heading h2 { max-width: 12em; color: #731c35; }
.op-digital { display: grid; grid-template-columns: 1.22fr 1fr; background: #193d4d; color: #fff8eb; }
.op-digital figure { height: 310px; }
.op-digital > div { align-self: center; padding: 30px 34px; }
.op-digital .sp-eyebrow { color: #e1b875; }
.op-digital h3 { font-size: 28px; }
.op-digital p { margin-top: 16px; color: #d9e4e6; }
.op-direction-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 25px; }
.op-direction-pair article { padding-bottom: 23px; background: #e6ece2; }
.op-direction-pair article:nth-child(2) { background: #e2e9eb; }
.op-direction-pair figure { height: 235px; margin-bottom: 21px; }
.op-direction-pair :is(h3,p,.sp-eyebrow) { margin-inline: 25px; }
.op-direction-pair h3 { font-size: 27px; color: #153545; }
.op-direction-pair p { margin-top: 12px; }
.op-direction-pair .sp-eyebrow { margin-bottom: 9px; }
.op-connection { padding-block: 44px; background: linear-gradient(110deg,#8f3447,#641e37); color: #fff9ee; }
.op-connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.op-connection .sp-eyebrow { color: #eac48b; }
.op-connection p { color: #f1dfe3; margin-top: 19px; }
.op-connection figure { height: 290px; border-radius: 45px 2px 2px 2px; }
.op-partners-section { background: #f6ecdb; }
.op-partners { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.op-partners figure { height: 235px; }
.op-partners article > div { padding: 22px 26px 25px; background: #fffaf1; border-bottom: 3px solid #b7894c; }
.op-partners article:nth-child(2) > div { background: #e8eef0; border-color: #406a79; }
.op-partners h2 { max-width: 14em; color: #731c35; font-size: 28px; line-height: 1.5; }
.op-partners p { margin-top: 14px; }
.op-invitation { padding-block: 42px; border-top: 1px solid #d9c6a7; background: linear-gradient(105deg,#e8d5b4,#fff8eb); }
.op-invitation-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: 48px; align-items: center; }
.op-invitation .sp-heading { color: #731c35; }
.op-invitation p { margin-block: 16px 23px; }
.op-invitation figure { height: 225px; }

@media (max-width: 1100px) {
    .oa-hero-grid,.oa-story,.oa-teams,.oa-invitation-grid,.og-hero-grid,.og-principle,.og-participation,.og-invitation-grid,.op-hero-grid,.op-connection-grid,.op-invitation-grid { gap: 32px; }
    .oa-hero-visual { height: 365px; }
    .oa-hero h1 { font-size: 52px; }
    .oa-connection-heading,.op-focus-heading { gap: 32px; }
    .oa-resource-row { gap: 16px; }
    .oa-resource-row article { padding: 20px; }
    .og-hero h1 { font-size: 42px; }
    .og-role-nav a { padding: 19px; gap: 6px 12px; }
    .og-role-nav span { flex-basis: calc(100% - 24px); order: 2; }
    .og-roles { gap: 17px; }
    .og-role figure { height: 180px; }
    .og-role > div { padding: 20px; }
    .og-commitments { padding-left: 24px; }
    .op-hero h1 { font-size: 41px; }
    .op-hero figure { height: 365px; }
    .op-digital > div { padding: 25px; }
    .op-digital h3 { font-size: 25px; }
}

@media (max-width: 760px) {
    .oa-hero { padding-block: 32px; background: linear-gradient(155deg,#fff8eb,#f0d8bb); }
    .oa-hero-grid,.oa-story,.oa-connection-heading,.oa-teams,.oa-invitation-grid,.og-hero-grid,.og-principle,.og-participation,.og-invitation-grid,.op-hero-grid,.op-focus-heading,.op-digital,.op-connection-grid,.op-invitation-grid { grid-template-columns: 1fr; gap: 24px; }
    .oa-hero h1 { font-size: clamp(38px,10.5vw,49px); line-height: 1.35; }
    .oa-hero-copy p { margin-block: 18px 22px; }
    .oa-hero-visual { height: 250px; border-radius: 48px 2px 2px 2px; box-shadow: none; }
    .oa-story-image { height: 215px; }
    .oa-story-copy { padding: 0; }
    .oa-connection-heading figure { height: 180px; }
    .oa-resource-row { grid-template-columns: 1fr; gap: 15px; padding-top: 24px; }
    .oa-resource-row article { padding: 20px 22px; }
    .oa-resource-row h3 { font-size: 23px; margin-block: 7px 10px; }
    .oa-resource-row p { margin-bottom: 5px; }
    .oa-teams figure { height: 230px; border-radius: 2px 2px 38px 2px; }
    .oa-invitation { padding-block: 32px; }
    .oa-invitation-grid figure { height: 200px; }
    .oa-invitation-grid > div { order: -1; }
    .og-hero { padding-block: 32px 0; background: linear-gradient(150deg,#731c35 0%,#542c41 48%,#153545 100%); }
    .og-hero h1 { font-size: clamp(31px,8.8vw,41px); line-height: 1.45; }
    .og-hero-copy p { margin-block: 18px 23px; }
    .og-hero-image { aspect-ratio: 3 / 2; border-radius: 2px 43px 2px 2px; box-shadow: none; }
    .og-role-nav { margin-top: 25px; }
    .og-role-nav a { display: block; padding: 15px 10px; }
    .og-role-nav strong { display: block; font-size: 15px; }
    .og-role-nav span { display: block; margin-top: 7px; font-size: 11px; line-height: 1.6; text-wrap: balance; }
    .og-role-nav a::after { display: none; }
    .og-principle figure { height: 215px; }
    .og-roles-section { padding-top: 0; }
    .og-roles { grid-template-columns: 1fr; gap: 20px; }
    .og-role figure { height: 220px; }
    .og-role h2 { font-size: 25px; }
    .og-role > div { padding: 20px 23px 23px; }
    .og-participation-copy figure { height: 200px; }
    .og-commitments { padding-left: 20px; }
    .og-commitments article { padding-block: 21px; }
    .og-commitments h3 { font-size: 23px; }
    .og-invitation { padding-block: 32px; }
    .og-invitation figure { height: 200px; }
    .op-hero { padding-block: 32px; }
    .op-hero-copy { order: -1; }
    .op-hero h1 { font-size: clamp(30px,8.5vw,40px); }
    .op-hero figure { height: 245px; border-radius: 2px 2px 45px 2px; }
    .op-focus-heading { gap: 16px; margin-bottom: 24px; }
    .op-digital { gap: 0; }
    .op-digital figure { height: 220px; }
    .op-digital > div { padding: 24px; }
    .op-direction-pair { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
    .op-direction-pair figure { height: 215px; }
    .op-direction-pair h3 { font-size: 24px; }
    .op-direction-pair :is(h3,p,.sp-eyebrow) { margin-inline: 23px; }
    .op-connection { padding-block: 32px; }
    .op-connection figure { height: 225px; }
    .op-partners { grid-template-columns: 1fr; gap: 22px; }
    .op-partners figure { height: 205px; }
    .op-partners article > div { padding: 20px 23px 23px; }
    .op-partners h2 { font-size: 25px; }
    .op-invitation { padding-block: 32px; }
    .op-invitation figure { height: 190px; }
}