::before, ::after {
  box-sizing: border-box;
}
.w-embed:before, .w-embed:after,
.w-richtext:before, .w-richtext:after {
  content: unset;
}
html {
  background-color: var(--_theme---background);
}
button {
  background-color: unset;
  padding: unset;
  text-align: inherit;
}
button:not(:disabled) {
  cursor: pointer;
}
video {
  width: 100%;
  object-fit: cover;
}
svg {
  max-width: 100%;
}
@media (prefers-color-scheme: light) {
  option { color: black; }
}
/* Typography */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Clear Defaults */
a:not([class]) {
  text-decoration: underline;
}
label {
  font-weight: inherit;
  margin-bottom: 0;
}
select:has(option[value=""]:checked) {
  color: color-mix(in lab, currentcolor 60%, transparent)
}
/* Selection Color */
::selection {
  background-color: var(--_theme---selection--background);
  color: var(--_theme---selection--text);
}
/* Margin Trim */
:is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > :not(:not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim) ~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim)),
:is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > .u-display-contents > :not(:not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim) ~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim)) {
  margin-top: 0;
}
:is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > :not(:has(~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim))),
:is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > .u-display-contents > :not(:has(~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim))) {
  margin-bottom: 0;
}
/* Line Height Trim */
:not(.u-text-trim-off) > :is(h1,h2,h3,h4,h5,h6,p):not(.u-text-trim-off,:has([class*="u-text-style-"]))::before,
[class*="u-text-style-"]:not(.u-text-trim-off,:has(h1,h2,h3,h4,h5,h6,p))::before {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + var(--_text-style---trim-top));
}
:not(.u-text-trim-off) > :is(h1,h2,h3,h4,h5,h6,p):not(.u-text-trim-off,:has([class*="u-text-style-"]))::after,
[class*="u-text-style-"]:not(.u-text-trim-off,:has(h1,h2,h3,h4,h5,h6,p))::after {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + var(--_text-style---trim-bottom));
}
/* Rich Text Links */
.w-richtext a {
  position: relative;
  z-index: 4;
}
/* Line Clamp */
[class*="u-line-clamp"]:not(.w-richtext),
[class*="u-line-clamp"].w-richtext > * {
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[class*="u-line-clamp"].w-richtext > :not(:first-child) { display: none; }
.u-line-clamp-2:not(.w-richtext), .u-line-clamp-2.w-richtext > * { -webkit-line-clamp: 2; }
.u-line-clamp-3:not(.w-richtext), .u-line-clamp-3.w-richtext > * { -webkit-line-clamp: 3; }
.u-line-clamp-4:not(.w-richtext), .u-line-clamp-4.w-richtext > * { -webkit-line-clamp: 4; }
/* Text Max Width */
.u-heading > *,
.u-text > * {
  width: 100%;
  max-width: inherit !important;
  margin-inline: 0 !important;
  margin-top: 0 !important;
}
/* Background Slot Children */
.u-background-slot > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}
/* Hide If Empty CMS */
.u-hide-if-empty-cms:not(:has(.w-dyn-item)) {
  display: none !important;
}
/* Focus State */
a, button, :where([tabindex]), input, select, textarea {
  outline-offset: var(--focus--offset-outer);
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--_theme---text);
  outline-width: var(--focus--width);
  outline-style: solid;
}
/* Disabled */
[data-button]:has(button:disabled) {
  opacity: 0.5;
  pointer-events: none;
}
/* Icon */
.u-icon svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.u-icon path[stroke] {
  stroke: currentColor !important;
  stroke-width: var(--border-width--main);
  vector-effect: non-scaling-stroke;
}
.u-icon :is(path:not([stroke]), rect, circle, ellipse, polygon, polyline) {
  fill: currentColor !important;
}
/* Global / Clickable Component */
.wf-design-mode .clickable_wrap { z-index: 0; }
/* Number Attributes */
[data-number="-1"]{--number: initial;}[data-number="0"]{--number: 0;}[data-number="1"]{--number:1}[data-number="2"]{--number:2}[data-number="3"]{--number:3}[data-number="4"]{--number:4}[data-number="5"]{--number:5}[data-number="6"]{--number:6}[data-number="7"]{--number:7}[data-number="8"]{--number:8}[data-number="9"]{--number:9}
[data-number="10"]{--number:10}[data-number="11"]{--number:11}[data-number="12"]{--number:12}[data-number="13"]{--number:13}[data-number="14"]{--number:14}[data-number="15"]{--number:15}[data-number="16"]{--number:16}[data-number="17"]{--number:17}[data-number="18"]{--number:18}[data-number="19"]{--number:19}
[data-number="20"]{--number:20}[data-number="21"]{--number:21}[data-number="22"]{--number:22}[data-number="23"]{--number:23}[data-number="24"]{--number:24}[data-number="25"]{--number:25}[data-number="26"]{--number:26}[data-number="27"]{--number:27}[data-number="28"]{--number:28}[data-number="29"]{--number:29}
[data-number="30"]{--number:30}[data-number="31"]{--number:31}[data-number="32"]{--number:32}[data-number="33"]{--number:33}[data-number="34"]{--number:34}[data-number="35"]{--number:35}[data-number="36"]{--number:36}[data-number="37"]{--number:37}[data-number="38"]{--number:38}[data-number="39"]{--number:39}
[data-number="40"]{--number:40}[data-number="41"]{--number:41}[data-number="42"]{--number:42}[data-number="43"]{--number:43}[data-number="44"]{--number:44}[data-number="45"]{--number:45}[data-number="46"]{--number:46}[data-number="47"]{--number:47}[data-number="48"]{--number:48}[data-number="49"]{--number:49}
[data-number="50"]{--number:50}[data-number="51"]{--number:51}[data-number="52"]{--number:52}[data-number="53"]{--number:53}[data-number="54"]{--number:54}[data-number="55"]{--number:55}[data-number="56"]{--number:56}[data-number="57"]{--number:57}[data-number="58"]{--number:58}[data-number="59"]{--number:59}
[data-number="60"]{--number:60}[data-number="61"]{--number:61}[data-number="62"]{--number:62}[data-number="63"]{--number:63}[data-number="64"]{--number:64}[data-number="65"]{--number:65}[data-number="66"]{--number:66}[data-number="67"]{--number:67}[data-number="68"]{--number:68}[data-number="69"]{--number:69}
[data-number="70"]{--number:70}[data-number="71"]{--number:71}[data-number="72"]{--number:72}[data-number="73"]{--number:73}[data-number="74"]{--number:74}[data-number="75"]{--number:75}[data-number="76"]{--number:76}[data-number="77"]{--number:77}[data-number="78"]{--number:78}[data-number="79"]{--number:79}
[data-number="80"]{--number:80}[data-number="81"]{--number:81}[data-number="82"]{--number:82}[data-number="83"]{--number:83}[data-number="84"]{--number:84}[data-number="85"]{--number:85}[data-number="86"]{--number:86}[data-number="87"]{--number:87}[data-number="88"]{--number:88}[data-number="89"]{--number:89}
[data-number="90"]{--number:90}[data-number="91"]{--number:91}[data-number="92"]{--number:92}[data-number="93"]{--number:93}[data-number="94"]{--number:94}[data-number="95"]{--number:95}[data-number="96"]{--number:96}[data-number="97"]{--number:97}[data-number="98"]{--number:98}[data-number="99"]{--number:99}[data-number="100"]{--number:100}
/* State Manager */
[data-state] { --_state---true: 1; --_state---false: 0; }
.is-active,
.wf-design-mode [data-preview="true"],
.wf-design-mode [data-preview]:not(:has(> [data-w-instance-of])),
[data-state~="checked"]:is(:checked, :has(:checked)),
[data-state~="current"]:is(.w--current, :has(.w--current)),
[data-state~="open"]:is(.w--open, :has(.w--open)),
[data-state~="pressed"]:is([aria-pressed="true"], :has([aria-pressed="true"])),
[data-state~="expanded"]:is([aria-expanded="true"], :has([aria-expanded="true"])),
[data-state~="external"]:is([target="_blank"], :has([target="_blank"])) { 
  --_state---true: 0; --_state---false: 1;
}
.wf-design-mode [data-trigger~="preview"],
[data-trigger~="focus"]:is(:focus-visible, :has(:focus-visible)),
[data-trigger~="group"]:has([data-trigger~="focus-other"]:focus-visible, [data-trigger~="focus-other"] :focus-visible)
[data-trigger~="focus-other"]:not(:focus-visible, :has(:focus-visible)) {
  --_trigger---on: 0; --_trigger---off: 1;
}
@media (hover: hover) {
  [data-trigger~="hover"]:hover,
  [data-trigger~="hover-if-clickable"]:has(.clickable_wrap:not(.w-condition-invisible)):hover,
  [data-trigger~="group"]:has([data-trigger~="hover-other"]:hover) [data-trigger~="hover-other"]:not(:hover) { 
    --_trigger---on: 0; --_trigger---off: 1;
  }
  [data-trigger~="hover-other"]:hover { --_trigger---on: 1 !important; --_trigger---off: 0 !important; }
}
@media (hover: none) {
  [data-trigger~="mobile"] { --_trigger---on: 0; --_trigger---off: 1; }
}
/* Slot Styler */
[data-slot] > .w-dyn-list,
[data-slot] > .w-dyn-list > *,
[data-slot] > .w-dyn-list > * > *,
[data-slot] > .u-display-contents > .w-dyn-list,
[data-slot] > .u-display-contents > .w-dyn-list > *,
[data-slot] > .u-display-contents > .w-dyn-list > * > *,
[data-slot] > .u-display-contents > .u-display-contents > .w-dyn-list,
[data-slot] > .u-display-contents > .u-display-contents > .w-dyn-list > *,
[data-slot] > .u-display-contents > .u-display-contents > .w-dyn-list > * > * {
  display: contents;
}
/* Layout Slot */
.u-layout-column-2:has(> :not(.u-image-wrapper,.u-video,.u-overlay)) {
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
}
.u-layout-column-2:not(:has(> :not(.u-image-wrapper,.u-video,.u-overlay))) :is(.u-image-wrapper,.u-video,.u-overlay) {
  position: absolute;
  height: 100%;
}
/* Responsive Styles */
[data-large-columns="1"] { display: flex; }
[data-large-columns="2"] { display: grid; --_column-count---value: 2; }
[data-large-columns="3"] { display: grid; --_column-count---value: 3; }
[data-large-columns="4"] { display: grid; --_column-count---value: 4; }
[data-large-columns="5"] { display: grid; --_column-count---value: 5; }
[data-large-columns="6"] { display: grid; --_column-count---value: 6; }
[data-large-columns="7"] { display: grid; --_column-count---value: 7; }
[data-large-columns="8"] { display: grid; --_column-count---value: 8; }
[data-large-columns="9"] { display: grid; --_column-count---value: 9; }
[data-large-columns="10"] { display: grid; --_column-count---value: 10; }
[data-large-columns="11"] { display: grid; --_column-count---value: 11; }
[data-large-columns="12"] { display: grid; --_column-count---value: 12; }
.slider_offset { --slide-count: var(--lg); --lg: 3; --md: var(--lg); --sm: var(--md); --xs: var(--sm); }
@container (width < 53em) {
  * {
    --_responsive---large: 0;
    --_responsive---medium: 1;
    --flex-medium: flex;
    --none-medium: none;
    --column-medium: column;
    --row-medium: row;
    --start-medium: start;
    --center-medium: center;
    --end-medium: end;
    --first-medium: -1;
    --last-medium: 1;
    --unset-medium: unset;
    --relative-medium: relative;
  }
  [data-medium-columns="1"] { display: flex; }
  [data-medium-columns="2"] { display: grid; --_column-count---value: 2; }
  [data-medium-columns="3"] { display: grid; --_column-count---value: 3; }
  [data-medium-columns="4"] { display: grid; --_column-count---value: 4; }
  [data-medium-columns="5"] { display: grid; --_column-count---value: 5; }
  [data-medium-columns="6"] { display: grid; --_column-count---value: 6; }
  [data-medium-columns="7"] { display: grid; --_column-count---value: 7; }
  [data-medium-columns="8"] { display: grid; --_column-count---value: 8; }
  [data-medium-columns="9"] { display: grid; --_column-count---value: 9; }
  [data-medium-columns="10"] { display: grid; --_column-count---value: 10; }
  [data-medium-columns="11"] { display: grid; --_column-count---value: 11; }
  [data-medium-columns="12"] { display: grid; --_column-count---value: 12; }
  .slider_offset { --slide-count: var(--md); }
}
@container (width < 42em) {
  * {
    --_responsive---medium: 0;
    --_responsive---small: 1;
    --flex-small: flex;
    --none-small: none;
    --column-small: column;
    --row-small: row;
    --start-small: start;
    --center-small: center;
    --end-small: end;
    --first-small: -1;
    --last-small: 1;
    --unset-small: unset;
    --relative-small: relative;
  }
  [data-small-columns="1"] { display: flex; }
  [data-small-columns="2"] { display: grid; --_column-count---value: 2; }
  [data-small-columns="3"] { display: grid; --_column-count---value: 3; }
  [data-small-columns="4"] { display: grid; --_column-count---value: 4; }
  [data-small-columns="5"] { display: grid; --_column-count---value: 5; }
  [data-small-columns="6"] { display: grid; --_column-count---value: 6; }
  [data-small-columns="7"] { display: grid; --_column-count---value: 7; }
  [data-small-columns="8"] { display: grid; --_column-count---value: 8; }
  [data-small-columns="9"] { display: grid; --_column-count---value: 9; }
  [data-small-columns="10"] { display: grid; --_column-count---value: 10; }
  [data-small-columns="11"] { display: grid; --_column-count---value: 11; }
  [data-small-columns="12"] { display: grid; --_column-count---value: 12; }
  .slider_offset { --slide-count: var(--sm); }
}
@container (width < 27em) {
  * {
    --_responsive---small: 0;
    --_responsive---xsmall: 1;
    --flex-xsmall: flex;
    --none-xsmall: none;
    --column-xsmall: column;
    --row-xsmall: row;
    --start-xsmall: start;
    --center-xsmall: center;
    --end-xsmall: end;
    --first-xsmall: -1;
    --last-xsmall: 1;
    --unset-xsmall: unset;
    --relative-xsmall: relative;
  }
  [data-xsmall-columns="1"] { display: flex; }
  [data-xsmall-columns="2"] { display: grid; --_column-count---value: 2; }
  [data-xsmall-columns="3"] { display: grid; --_column-count---value: 3; }
  [data-xsmall-columns="4"] { display: grid; --_column-count---value: 4; }
  [data-xsmall-columns="5"] { display: grid; --_column-count---value: 5; }
  [data-xsmall-columns="6"] { display: grid; --_column-count---value: 6; }
  [data-xsmall-columns="7"] { display: grid; --_column-count---value: 7; }
  [data-xsmall-columns="8"] { display: grid; --_column-count---value: 8; }
  [data-xsmall-columns="9"] { display: grid; --_column-count---value: 9; }
  [data-xsmall-columns="10"] { display: grid; --_column-count---value: 10; }
  [data-xsmall-columns="11"] { display: grid; --_column-count---value: 11; }
  [data-xsmall-columns="12"] { display: grid; --_column-count---value: 12; }
  .slider_offset { --slide-count: var(--xs); }
}

/* ---------------------------------------------------------------------------
   Story modal

   .story_link replaced an <a href="#"> that only ever opened a dialog. A button
   is the honest element for that, but it must not *look* like one — hence the
   reset below, which reproduces the old anchor's appearance exactly (the
   underline and font-size still come from the inline style on each button).
   --------------------------------------------------------------------------- */
.story_link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* The dialog is only the viewport: transparent, full-screen, and the thing that
   scrolls. The visible sheet is .story_modal_paper inside it, so scrolling
   moves the paper up rather than sliding content inside a fixed frame.

   Keeping the scroll here (not on the paper) is also what lets artwork bleed
   past the paper's edge — a scroll container must clip its overflow, so as long
   as the paper itself scrolled, nothing could ever escape it. */
.story_modal {
  /* Sheet geometry lives here so the paper and the close button stay in sync —
     the button is pinned to the paper's right edge, which means it has to be
     able to work out where that edge is.
     --paper-rail reserves the strip the button sits in; without it the sheet
     would grow under the button on narrower screens. */
  --paper-gutter: 5rem;  /* space to the left of the sheet, where art bleeds */
  --paper-rail: 4.5rem;  /* space to the right, occupied by the close button */
  --paper-top: 3rem;     /* space above the sheet */
  --paper-width: min(70rem, calc(100vw - var(--paper-gutter) - var(--paper-rail)));

  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  margin: 0;
  padding: 0;
  padding-block: var(--paper-top);
  border: 0;
  background: transparent;
  color: var(--_theme---text);
  overflow-y: auto;
  overflow-x: clip; /* absorbs the bleed instead of growing a sideways scrollbar */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.story_modal::backdrop {
  background: #005f5747;
  backdrop-filter: blur(0);
}

/* Sits in the rail just outside the sheet's top-right corner. Stays `fixed`
   rather than riding the paper: it is the only way out of the dialog, so it
   must not scroll away with the sheet. */
.story_modal_close {
  position: fixed;
  top: var(--paper-top);
  left: calc(var(--paper-gutter) + var(--paper-width) + .75rem);
  right: auto;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0000000d;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
  padding-top: 4px;
}

.story_modal_close:hover,
.story_modal_close:focus-visible {
  background: #0000001f;
}

/* The sheet. It is as tall as its content (min one screen, so a short story
   still reads as a full page), and it does NOT scroll or clip — the dialog
   around it does the scrolling, so the paper simply travels up, and anything
   inside it is free to hang past its edges. */
/* The sheet's torn edge comes from .u-deckle (on the element in the markup);
   only the fill is set here. Kept as an explicit swatch rather than
   --_theme---background: the dialog floats above the page, so it should not
   inherit whatever theme the section behind it happens to be running. */
.story_modal_paper {
  --deckle-bg: var(--swatch--light-100, #fff);

  position: relative;
  /* Makes the sheet queryable, so story layout responds to the paper's width
     rather than the viewport's — the paper is much narrower than the screen, so
     media queries are the wrong ruler here. Named for clarity, but note an
     unnamed @container in any descendant will resolve against this too.
     inline-size containment does not clip, so the bleeding art is unaffected. */
  container: story-paper / inline-size;
  width: var(--paper-width);
  min-height: 100svh;
  margin-left: var(--paper-gutter);
  margin-bottom: 0;
  padding: 3.25rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* NB: no background/box-shadow here — the sheet is painted by ::before below.
     Putting them back on this element would draw a hard rectangle over the
     torn silhouette. */
}

/* The visible sheet, torn on all four edges.

   This lives on ::before rather than on .story_modal_paper itself for one
   reason: a mask clips every descendant, so masking the paper would also slice
   off the artwork we deliberately let bleed into the gutter. Masking a
   background layer instead leaves the paper's children untouched.

   Absolute positioning also keeps it out of the flex flow — an unpositioned
   ::before would become a flex item and shove the content down.

   Five mask layers union together (mask-composite defaults to `add`): one
   tearing strip per edge, repeated along that edge, plus a solid centre inset
   by the tear depth. Repeating is the whole point — the tiles keep every tear
   the same size whether the story runs 900px or 4000px, which a clip-path
   polygon could not do. */
/* Torn sheet behind the hero title. Filled with the section's own background
   token, so it reads as the page itself tearing over the hero artwork rather
   than as a card sitting on top of it. */
.hero_paper {
  --deckle-bg: var(--swatch--light-100);
  --hero-paper-pad-x: 0.75rem;

  display: flex;
  flex-direction: column;
  /* The h1 and the rich text used to be direct children of .header_wrap and got
     their spacing from its gap; wrapping them removed that, so inherit the same
     computed gap back rather than hard-coding a number that could drift. */
  gap: inherit;
  width: fit-content;
  max-width: 100%;
  padding: 1.5rem var(--hero-paper-pad-x);
  /* Pull the sheet back out by its own padding so the title stays optically
     aligned with the button beneath it instead of shifting right. */
  margin-left: calc(var(--hero-paper-pad-x) * -1);
}

/* ---------------------------------------------------------------------------
   Torn-paper edge, reusable.

   Put .u-deckle on any element to give it a deckled silhouette, and set
   --deckle-bg to the fill you want. The tear is painted on a ::before layer
   pinned behind the content, never on the element itself — a mask clips every
   descendant, so masking the element would slice off anything meant to hang
   past its edge (which is exactly what the story modal's artwork does).

   Knobs:
     --deckle          tear depth
     --deckle-period   distance before the wobble repeats
     --deckle-bg       fill colour
     --deckle-shadow   drop-shadow value; set to `none` for a flat sheet
   --------------------------------------------------------------------------- */
.u-deckle {
  --deckle: 4px;
  --deckle-period: 120px;
  --deckle-shadow: 0 1rem 2.5rem #00000038;
  position: relative;
  isolation: isolate; /* keeps the ::before layer's z-index:-1 from escaping */
}

.u-deckle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--deckle-bg, #fff);

  mask-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 120' preserveAspectRatio='none'><path d='M0.36,0 L2.85,7.44 L2.81,15.58 L1.98,26.09 L1.88,33.61 L0.67,41.41 L0.29,49.73 L1.65,55.43 L0.41,63.26 L0.75,71.85 L0.89,81.51 L0.33,86.62 L1.48,93.09 L1.42,98.18 L2.48,107.94 L1.63,116.95 L0.36,120 L4,120 L4,0 Z' fill='%23000'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 120' preserveAspectRatio='none'><path d='M3.64,0 L1.15,7.44 L1.19,15.58 L2.02,26.09 L2.12,33.61 L3.33,41.41 L3.71,49.73 L2.35,55.43 L3.59,63.26 L3.25,71.85 L3.11,81.51 L3.67,86.62 L2.52,93.09 L2.58,98.18 L1.52,107.94 L2.37,116.95 L3.64,120 L0,120 L0,0 Z' fill='%23000'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 4' preserveAspectRatio='none'><path d='M0,0.36 L7.44,2.85 L15.58,2.81 L26.09,1.98 L33.61,1.88 L41.41,0.67 L49.73,0.29 L55.43,1.65 L63.26,0.41 L71.85,0.75 L81.51,0.89 L86.62,0.33 L93.09,1.48 L98.18,1.42 L107.94,2.48 L116.95,1.63 L120,0.36 L120,4 L0,4 Z' fill='%23000'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 4' preserveAspectRatio='none'><path d='M0,3.64 L7.44,1.15 L15.58,1.19 L26.09,2.02 L33.61,2.12 L41.41,3.33 L49.73,3.71 L55.43,2.35 L63.26,3.59 L71.85,3.25 L81.51,3.11 L86.62,3.67 L93.09,2.52 L98.18,2.58 L107.94,1.52 L116.95,2.37 L120,3.64 L120,0 L0,0 Z' fill='%23000'/></svg>"),
    linear-gradient(#000, #000);
  mask-repeat: repeat-y, repeat-y, repeat-x, repeat-x, no-repeat;
  mask-position: left top, right top, left top, left bottom, center;
  mask-size:
    var(--deckle) var(--deckle-period),
    var(--deckle) var(--deckle-period),
    var(--deckle-period) var(--deckle),
    var(--deckle-period) var(--deckle),
    calc(100% - var(--deckle) * 2) calc(100% - var(--deckle) * 2);

  /* drop-shadow, not box-shadow: box-shadow traces the rectangular border box
     and would show straight edges behind the tears. drop-shadow runs after the
     mask, so it follows the torn silhouette. */
  filter: drop-shadow(var(--deckle-shadow));
}

.story_modal_paper:has(.modal-content.blue)::before {
  background: #CDE0FD;
}
.story_modal_paper:has(.modal-content.green)::before {
  background: #D1D5B9;
}
.story_modal_paper:has(.modal-content.pink)::before {
  background: #FFDCDD;
}
.story_modal_paper:has(.modal-content.orange)::before {
  background: #FFD4B7;
}

/* Let art hang off the sheet. Anything given a negative translate/margin now
   spills into the 5rem gutter beside the paper instead of being cut off.
   The gutter is the budget: a bleed wider than it will meet overflow-x: clip. */
.story_modal_paper .content-image {
  position: relative;
  z-index: 1;
}

.feature-tag {
  display: inline-block;
  width: 15ch;
  font-size: small;
  container-type: inline-size;
}

.modal-content {
  display: flex;
  /* .story_modal_paper is align-items: flex-start, so a flex child shrinks to
     fit rather than filling the sheet. Opt back in, otherwise the columns
     size against a box narrower than the paper. */
  width: 100%;
  > [data-col="small"] {
    width: 40%;
  }
}

/* Stack the columns once the sheet — not the viewport — gets narrow. Queried
   against .story_modal_paper's container (see `container:` on it above);
   without that declaration this block would silently never match.

   `> [data-col]` is deliberate, not redundant with `> *`: the 40% rule above is
   (0,2,0) and would outrank a bare `> *` at (0,1,0). Matching its specificity
   and coming later in the file is what lets 100% win. */
@container story-paper (width < 42em) {
  /* Collapse the desktop two-column magazine layout into one reading column.
     Each story is built from several .modal-content blocks, each a two-column
     flex row, so paragraphs and images are split across columns for the wide
     layout — which reads out of order once stacked. display:contents dissolves
     the .modal-content and .content_wrap wrapper boxes so ALL their children
     become direct flex items of .story_modal_paper, in one shared flow. That is
     what lets `order` (below) resequence the whole story across the old column
     and block boundaries. */
  .modal-content,
  .modal-content .content_wrap {
    display: contents;
  }

  /* Reading order on mobile. Add data-readorder="N" to any block to place it;
     items without one keep source order (order:0) and sit before the numbered
     ones. `order` only works because the wrappers above were flattened, so
     everything is a sibling in the same flex container. */
  [data-readorder="1"]{order:1}[data-readorder="2"]{order:2}[data-readorder="3"]{order:3}[data-readorder="4"]{order:4}[data-readorder="5"]{order:5}[data-readorder="6"]{order:6}[data-readorder="7"]{order:7}[data-readorder="8"]{order:8}[data-readorder="9"]{order:9}[data-readorder="10"]{order:10}[data-readorder="11"]{order:11}[data-readorder="12"]{order:12}[data-readorder="13"]{order:13}[data-readorder="14"]{order:14}[data-readorder="15"]{order:15}[data-readorder="16"]{order:16}[data-readorder="17"]{order:17}[data-readorder="18"]{order:18}[data-readorder="19"]{order:19}[data-readorder="20"]{order:20}[data-readorder="21"]{order:21}[data-readorder="22"]{order:22}[data-readorder="23"]{order:23}[data-readorder="24"]{order:24}[data-readorder="25"]{order:25}[data-readorder="26"]{order:26}[data-readorder="27"]{order:27}[data-readorder="28"]{order:28}[data-readorder="29"]{order:29}[data-readorder="30"]{order:30}[data-readorder="31"]{order:31}[data-readorder="32"]{order:32}[data-readorder="33"]{order:33}[data-readorder="34"]{order:34}[data-readorder="35"]{order:35}[data-readorder="36"]{order:36}[data-readorder="37"]{order:37}[data-readorder="38"]{order:38}[data-readorder="39"]{order:39}[data-readorder="40"]{order:40}[data-readorder="41"]{order:41}[data-readorder="42"]{order:42}[data-readorder="43"]{order:43}[data-readorder="44"]{order:44}[data-readorder="45"]{order:45}[data-readorder="46"]{order:46}[data-readorder="47"]{order:47}[data-readorder="48"]{order:48}[data-readorder="49"]{order:49}[data-readorder="50"]{order:50}[data-readorder="51"]{order:51}[data-readorder="52"]{order:52}[data-readorder="53"]{order:53}[data-readorder="54"]{order:54}[data-readorder="55"]{order:55}[data-readorder="56"]{order:56}[data-readorder="57"]{order:57}[data-readorder="58"]{order:58}[data-readorder="59"]{order:59}[data-readorder="60"]{order:60}

  /* Media goes full width; the desktop left indent and any bleed transform are
     dropped so stacked paragraphs and images sit flush in the reading column. */
  .story_modal_paper .content-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-block: 1rem !important;
    transform: none !important;
  }
  .story_modal_paper .content_p-text {
    padding-left: 0 !important;
  }

  /* Opt-out hook: drop an element's inline sizing/layout on the narrow modal so
     a block that was constrained for the desktop columns (fixed width, capped
     height, flex centering) instead flows full-width in the reading column.
     Add class="... u-mobile-unstyle" to any such element. !important is
     required because the constraints are authored as inline styles. */
  .story_modal_paper .u-mobile-unstyle {
    /* display: block !important; */
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    padding-left: unset !important;
  }

  .u-mobile-unstyle#roomtofill-img{
    max-height: 12em !important;
  }
}
.story_modal_paper:focus {
  outline: none;
}

/* Vertical rhythm for plain story markup.

   The Webflow export sets `p { margin-bottom: 0 }` and applies a line-height
   trim to every h1-h6/p (see "Line Height Trim" above), which crops the
   half-leading via negative pseudo-element margins. That is deliberate and
   worth keeping — it is what optically aligns text everywhere else on the site
   — but it means bare <p> tags stack with no gap at all and their glyphs touch.
   The design system normally supplies spacing through utility classes; these
   rules do the same job for unclassed markup written into a story template,
   using the site's own spacing scale rather than invented numbers. */
.story_modal_paper p {
  margin-bottom: var(--_spacing---space--4, 1.25rem);
}

.story_modal_paper :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--_spacing---space--6, 2rem);
  margin-bottom: var(--_spacing---space--3, .875rem);
}

/* Shift headings down one step. The design system's scale is sized for
   full-width section headers and overwhelms a 52rem panel — an h2 lands at
   64px. Remapping the whole run rather than just h2 keeps the hierarchy
   intact: a story title still outranks its subheadings. */
.story_modal_paper h2 {
  /* --_text-style---font-size: var(--_typography---font-size--h3); */
}

.story_modal_paper h3 {
  --_text-style---font-size: var(--_typography---font-size--h4);
}

.story_modal_paper h4 {
  --_text-style---font-size: var(--_typography---font-size--h5);
}

.story_modal_paper h5 {
  --_text-style---font-size: var(--_typography---font-size--h6);
}

.story_modal_paper :is(ul, ol) {
  margin-bottom: var(--_spacing---space--4, 1.25rem);
  padding-left: 1.25rem;
}

.story_modal_paper li {
  margin-bottom: var(--_spacing---space--2, .625rem);
}

.story_modal_paper blockquote {
  margin: var(--_spacing---space--5, 1.75rem) 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid currentColor;
}

.story_modal_paper > :first-child {
  margin-top: 0;
}

.story_modal_paper > :last-child {
  margin-bottom: 0;
}

/* Plain images stay inside the sheet. .content-image is excluded on purpose:
   it sets width:110%; max-width:none precisely so it can break out, and
   clamping it here would silently undo that. */
.story_modal_paper img:not(.content-image) {
  max-width: 100%;
  height: auto;
}

.story_modal_paper figure {
  margin: var(--_spacing---space--5, 1.75rem) 0;
}

/* Empty label placeholder in the shell; real stories bring their own heading. */
.story_modal_fallback:empty {
  display: none;
}

@media screen and (max-width: 767px) {
  /* No room for a gutter, so the sheet goes edge to edge and art stops
     bleeding — a -3rem pull would just be clipped away off-screen. */
  .story_modal_paper {
    width: 100vw;
    margin-left: 0;
    padding: 3.25rem 1.25rem 2rem;
  }

  /* With the sheet full-bleed there is no rail beside it, so the button returns
     to the viewport corner and sits over the paper rather than next to it. */
  .story_modal_close {
    top: .75rem;
    left: auto;
    right: .75rem;
  }

  /* !important is load-bearing: the bleed is authored as an inline style on the
     <img> (transform/max-width), and inline styles outrank any stylesheet rule.
     Without it the art keeps its negative translate here, slides under the
     screen edge and gets cut off by overflow-x: clip with no way to scroll to it. */
  .story_modal_paper .content-image {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story_modal_close {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Master map zoom (Zoomooz)

   Everything here is scoped under .mastermap_wrap: the .mastermap_img class is
   shared with the Map-A_revise image further down the page, which must not be
   affected.

   Zoom is desktop-only (>=992px). Below that the Webflow rules still give
   .mastermap_wrap a fixed svh height and .mastermap_img a scale(1.2), both of
   which would fight the zoom transform — so the hotspots stay inert there and
   the section renders exactly as it did before.
   --------------------------------------------------------------------------- */

/* The image sits at z-index:-1 in the Webflow CSS, which would render it behind
   the hotspots' stacking context. Scoped reset so the map paints normally. */
.mastermap_wrap .mastermap_img {
  z-index: auto;
  display: block;
}

.mastermap_wrap .mastermap_hotspot {
  display: none;
}

@media screen and (min-width: 992px) {
  .mastermap_wrap.zoomViewport {
    position: relative;
    overflow: hidden;
  }

  /* Soft edges, shared by the master map and the four entry maps.

     Feather the viewport edges so a zoomed, clipped map dissolves into the
     section background instead of ending on a hard rectangle. The mask sits on
     the wrapper (which never transforms — the container inside it does), so the
     fade stays pinned to the frame at every zoom level. Two gradients,
     horizontal and vertical, intersected so all four edges and the corners ramp
     to transparent. Masks are render-only, so hotspot clicks near the edges are
     unaffected. -webkit-mask-composite: source-in is the legacy Safari spelling
     of `intersect`; the standard property follows and wins where supported. */
  .mastermap_wrap.zoomViewport,
  .entrymap_wrap.zoomViewport {
    --zoom-fade: 1.5rem;
    -webkit-mask-image:
      linear-gradient(to right,  transparent, #000 var(--zoom-fade), #000 calc(100% - var(--zoom-fade)), transparent),
      linear-gradient(to bottom, transparent, #000 var(--zoom-fade), #000 calc(100% - var(--zoom-fade)), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right,  transparent, #000 var(--zoom-fade), #000 calc(100% - var(--zoom-fade)), transparent),
      linear-gradient(to bottom, transparent, #000 var(--zoom-fade), #000 calc(100% - var(--zoom-fade)), transparent);
    mask-composite: intersect;
  }

  /* Zoomooz supplies position:relative itself; this just makes the container
     fill the viewport so the hotspot percentages resolve against the map. */
  .mastermap_wrap .zoomContainer {
    width: 100%;
  }

  .mastermap_wrap .mastermap_hotspot {
    display: block;
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 1.5rem;
    /* Present but invisible: the label stays available to screen readers. */
    font-size: 0;
    color: transparent;
    cursor: pointer;
    transition: box-shadow .25s ease, background-color .25s ease;
  }

  .mastermap_wrap .mastermap_hotspot:hover,
  .mastermap_wrap .mastermap_hotspot:focus-visible {
    background-color: #ffffff1a;
    box-shadow: 0 0 0 2px #ffffff80;
    outline: none;
  }

  /* The hotspot sits inside the transformed container, so its ring would scale
     with the zoom. Zoomooz marks the zoomed-in target with .selectedZoomTarget;
     drop the affordance there — it has served its purpose by that point. */
  .mastermap_wrap .mastermap_hotspot.selectedZoomTarget,
  .mastermap_wrap .mastermap_hotspot.selectedZoomTarget:hover,
  .mastermap_wrap .mastermap_hotspot.selectedZoomTarget:focus-visible {
    background-color: transparent;
    box-shadow: none;
  }

  /* Cluster boxes, measured against the 2433x1692 map. Inclusive Communities is
     last in the DOM so it wins the narrow band where it overlaps Cultural. */
  .mastermap_wrap .mastermap_hotspot.is-regenerative {
    left: 3%; top: 8%; width: 40%; height: 32%;
  }
  .mastermap_wrap .mastermap_hotspot.is-cultural {
    left: 55%; top: 7%; width: 45%; height: 48%;
  }
  .mastermap_wrap .mastermap_hotspot.is-oceans {
    left: 2%; top: 40%; width: 41%; height: 49%;
  }
  .mastermap_wrap .mastermap_hotspot.is-inclusive {
    left: 42%; top: 51%; width: 44%; height: 39%;
  }
}

/* ---------------------------------------------------------------------------
   Entry map click-to-magnify (Zoomooz)

   The four per-cluster maps (Map-A..D, inside .entry_a) use the same Zoomooz
   viewport/container mechanic as the master map, but with click-anywhere
   magnify instead of fixed hotspots: clicking zooms toward the pointer, and
   clicking again zooms back out (driven from JS — see the init script).

   Scoped under .entrymap_wrap because .mastermap_img is shared with these maps
   and must not be restyled globally. Desktop-only (>=992px) to match the master
   map; below that the Webflow rules give .entry_a a fixed height / transform
   that would fight the zoom, so the maps stay static there.

   .entrymap_target is the invisible box Zoomooz zooms to; JS moves and sizes it
   under the click before each zoom, so it is never interactive itself.
   --------------------------------------------------------------------------- */
.entrymap_wrap .mastermap_img {
  z-index: auto;
  display: block;
}

.entrymap_wrap .entrymap_target {
  display: none;
  position: absolute;
  pointer-events: none;
}

@media screen and (min-width: 992px) {
  .entrymap_wrap.zoomViewport {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .entrymap_wrap .zoomContainer {
    width: 100%;
  }

  /* At rest the lens (below) stands in for the pointer, so the native cursor is
     hidden over the map. Once magnified the map is draggable, so it becomes a
     grab / grabbing cursor (a click without a drag still zooms back out). The
     zoom-in fallback covers the moment before JS wires the lens up. */
  .entrymap_wrap .entrymap_zoom {
    cursor: zoom-in;
  }

  .entrymap_wrap.is-lens-ready:not(.is-zoomed) .entrymap_zoom {
    cursor: none;
  }

  .entrymap_wrap.is-zoomed .entrymap_zoom {
    cursor: grab;
  }

  .entrymap_wrap.is-panning .entrymap_zoom {
    cursor: grabbing;
  }

  .entrymap_wrap .entrymap_target {
    display: block;
  }

  /* Show state (desktop only). is-lens-visible is added by JS, which never runs
     on mobile — but keeping the reveal here as well makes the gating explicit. */
  .entrymap_wrap.is-lens-visible:not(.is-zoomed) .entrymap_lens {
    opacity: 1;
  }
}

/* Lens base styles, unconditional so the disc is inert and invisible until JS
   reveals it — on mobile it stays opacity:0 / pointer-events:none rather than
   falling back to element defaults. It's a soft ring that trails the pointer,
   sized by JS to the exact patch of map a click will magnify; the visual echoes
   the master map's hover ring, with an outer dark shadow for legibility over
   the maps' pale areas. */
.entrymap_wrap .entrymap_lens {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #ffffff26;
  box-shadow: 0 0 0 2px #ffffffcc, 0 6px 18px #00000030;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .entrymap_wrap .entrymap_lens {
    transition: none;
  }
}