/* All diagram coordinates and typography share the image canvas as their reference. */
.bk-regional {--regional-accent:#5b3500;color:#1a1a1a;font-family:Roboto,var(--bk-font),sans-serif;padding:0 0 130px}
.bk-regional *,.bk-regional *::before {box-sizing:border-box}
.bk-regional__intro {display:grid;width:min(calc(100% - 80px),1098px);min-height:67px;grid-template-columns:minmax(0,410px) minmax(0,1fr);align-items:center;gap:48px;margin:0 auto}
.bk-regional__intro h2 {margin:0;color:#000;font-size:min(48px,2.5vw);font-weight:500;line-height:1.4;letter-spacing:-.035em;text-align:left}
.bk-regional__intro p {margin:0;font-size:min(24px,1.25vw);font-weight:400;line-height:1.6;letter-spacing:-.035em;text-align:left}
.bk-regional__intro p span {display:inline}
.bk-regional__intro p span:nth-child(2)::after {content:"";display:block}
.bk-regional__diagram {position:relative;width:min(calc(100% - 80px),1152px);margin:40px auto 0}
.bk-regional__canvas {position:relative;width:50%;aspect-ratio:1569 / 1699;margin:0 auto;container-type:inline-size}
.bk-regional__art {position:absolute;inset:0;width:100%}
.bk-regional__art img {display:block;width:100%;height:auto}
.bk-regional__art-mobile,.bk-regional__mobile-copy {display:none!important}
.bk-regional__items {padding:0;margin:0;list-style:none}
/* The zero-size item is the anchor; only its inner body moves during reveal. */
.bk-regional__item {position:absolute;left:var(--anchor-x);top:var(--anchor-y);width:0;height:0}
.bk-regional__item-body {position:absolute;width:55cqw;top:-11.3cqw}
.bk-regional__item h3 {margin:0;color:var(--regional-accent);font-size:4cqw;line-height:1.4;font-weight:700;letter-spacing:-.035em;white-space:nowrap}
.bk-regional__number {display:block;color:#000;font-size:6.25cqw;line-height:1.2;margin-bottom:1cqw;font-weight:600;letter-spacing:-.03em}
.bk-regional__item p {font-size:2.5cqw;line-height:1.5;font-weight:400;letter-spacing:-.035em;margin:.5cqw 0 0;color:#666;word-break:keep-all}
/* Pixel centers measured in the supplied 1569 x 1699 PNG, expressed as percentages. */
.bk-regional__item--1 {--anchor-x:50.82983%;--anchor-y:7.65156%}
.bk-regional__item--2 {--anchor-x:94.06888%;--anchor-y:34.05845%}
.bk-regional__item--3 {--anchor-x:93.92061%;--anchor-y:68.88047%}
.bk-regional__item--4 {--anchor-x:50.82983%;--anchor-y:94.34962%}
.bk-regional__item--5 {--anchor-x:6.72505%;--anchor-y:69.02755%}
.bk-regional__item--6 {--anchor-x:6.72505%;--anchor-y:34.06086%}
.bk-regional__item--1 .bk-regional__item-body {left:-30cqw;top:-7.3cqw;width:60cqw;text-align:center}
.bk-regional__item--4 .bk-regional__item-body {left:-32cqw;top:-8cqw;width:64cqw;text-align:center}
.bk-regional__item--2 .bk-regional__item-body,.bk-regional__item--3 .bk-regional__item-body {left:6cqw;width:45cqw;text-align:left}
.bk-regional__item--5 .bk-regional__item-body,.bk-regional__item--6 .bk-regional__item-body {right:6cqw;text-align:right}
.bk-regional__mobile-arc,.bk-regional__dot {display:none}
/* is-animated is emitted by the server, so nothing flashes before JS initializes. */
.bk-regional.is-animated .bk-regional__art,.bk-regional.is-animated .bk-regional__item-body {opacity:0;transform:translateY(2.5cqw);transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.22,1,.36,1)}
.bk-regional.is-animated .bk-regional__art.is-visible,.bk-regional.is-animated .is-visible .bk-regional__item-body {opacity:1;transform:translateY(0)}
@media(max-width:1024px){
 .bk-regional {padding:0 0 104px;overflow:hidden}
 .bk-regional__intro {position:relative;display:block;width:100%;height:136px;min-height:136px;margin:0;text-align:left}
 .bk-regional__intro h2 {position:absolute;top:40px;left:31px;width:329px;height:auto;margin:0;color:#000;font-size:21px;font-weight:500;line-height:1.4;letter-spacing:-.035em;text-align:left}
 .bk-regional__intro p {position:absolute;top:79px;left:31px;width:331px;height:57px;margin:0;color:#1a1a1a;font-size:12px;font-weight:400;line-height:1.6;letter-spacing:0;text-align:left;white-space:nowrap}
 .bk-regional__intro p span {display:block}
 .bk-regional__intro p span:nth-child(2)::after {display:none}
 .bk-regional__diagram {width:100%;max-width:600px;aspect-ratio:390 / 470;margin:0 auto}
 .bk-regional__canvas {width:100%;aspect-ratio:390 / 470}
 .bk-regional__art {inset:auto;left:-105cqw;top:0;width:325.384615cqw}
 .bk-regional__art-pc {display:none!important}
 .bk-regional__art-mobile {display:block!important}
 /* These anchors are the orange-dot centers measured in the supplied mobile PNG. */
 .bk-regional__item--1 {--anchor-x:16.666667%;--anchor-y:12.492553%}
 .bk-regional__item--2 {--anchor-x:36.923077%;--anchor-y:26.532979%}
 .bk-regional__item--3 {--anchor-x:46.153846%;--anchor-y:41.213830%}
 .bk-regional__item--4 {--anchor-x:46.153846%;--anchor-y:59.514894%}
 .bk-regional__item--5 {--anchor-x:36.923077%;--anchor-y:74.618085%}
 .bk-regional__item--6 {--anchor-x:16.666667%;--anchor-y:88.448936%}
 .bk-regional__item .bk-regional__item-body {display:flex;left:6.115385cqw;right:auto;top:-3.846154cqw;width:70cqw;align-items:flex-start;text-align:left}
 .bk-regional__pc-copy {display:none}
 .bk-regional__mobile-copy {display:block!important;flex:0 0 auto;width:46.410256cqw;height:auto;margin-left:0}
 .bk-regional__item--1 .bk-regional__mobile-copy {width:50.641026cqw;margin-left:2.051282cqw}
 .bk-regional__item--6 .bk-regional__mobile-copy {width:46.666667cqw}
 .bk-regional__item--1 .bk-regional__item-body {left:1.5cqw}
 .bk-regional__item--6 .bk-regional__item-body {left:6.115385cqw}
 .bk-regional__item--1 .bk-regional__item-body,.bk-regional__item--2 .bk-regional__item-body,.bk-regional__item--4 .bk-regional__item-body {top:-4.846154cqw}
 .bk-regional__number {display:none}
}
@media(prefers-reduced-motion:reduce){
 .bk-regional.is-animated .bk-regional__art,.bk-regional.is-animated .bk-regional__item-body,.bk-regional.is-animated .bk-regional__dot,.bk-regional.is-animated .bk-regional__mobile-arc {opacity:1;transform:none;transition:none}
}

/* Rhymix extracts style elements out of noscript. A DOM sentinel avoids that. */
.bk-regional:has(.bk-regional__nojs) .bk-regional__art,
.bk-regional:has(.bk-regional__nojs) .bk-regional__item-body,
.bk-regional:has(.bk-regional__nojs) .bk-regional__dot,
.bk-regional:has(.bk-regional__nojs) .bk-regional__mobile-arc {opacity:1;transform:none;transition:none}

.sub_page_regional .bk-regional{width:100vw;margin-left:calc(50% - 50vw)}

.regional-page__content { width: min(calc(100% - 80px), 1600px); margin: 60px auto 0; }
.regional-page__breadcrumb { width: min(calc(100% - 80px), 1098px) !important; margin-left: auto !important; margin-right: auto !important; }
.regional-page__content .bk-regional { width: 100%; margin: 0; }
@media (max-width: 768px) {
  .regional-page__content { width: 100%; margin: 20px 0 0; }
  .regional-page__breadcrumb { display: none !important; }
}
