body {
  font-family: "Montserrat", sans-serif!important;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;	
    font-size: 1em!important;

    padding: 0;
    margin: 0;
}
h1,h2,h3,h4,h5,h6, {font-family: "Montserrat", sans-serif!important;font-weight: 300;}
strong,b {font-family: "Montserrat", sans-serif!important;font-weight: 700;}
blockquote {padding-left: 2rem;}
ol + blockquote, ul + blockquote, ol + .footnote, ul + .footnote, ol + .footnotes, ul + .footnotes {font-size: .75em;font-weight: 400!important;border-top: none!important; }
footer a, main a {color: #0248AB!important;}
.story-grid{
  display: grid;
  width: 100%;
  gap: 0; /* or add 8–16px if you want spacing */

  /* Default: responsive wrap */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.embedded-asset {
  max-width: 100%;
  height: auto;
}

.embedded-asset.float-end,
.embedded-asset.float-start {
  max-width: 280px;
}
.magazine {
	width: 30%!important;
	margin: 0!important;
	box-shadow:
    /* Top shadow */
    0 -16px 16px -16px rgba(0, 0, 0, 0.75),
    /* Bottom shadow */
    0 16px 16px -16px rgba(0, 0, 0, 0.75);
    z-index: 9999;
}

.skeleton-card {
  overflow: hidden;
}

.skeleton-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e4e4e4 37%,
    #f0f0f0 63%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
.skeleton-banner-box {
  aspect-ratio: auto;
  min-height: 220px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* Large screens — lock to 6 columns */
@media (min-width: 1400px){
  .story-grid{
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Square tiles */
.story-item{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Image fills tile */
.story-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.embedded-asset {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
}



.hero-banner{
  grid-column: 1 / -1;
  text-align: center;
  padding: 2em 0;
  background: #4a8cc9;
    box-shadow:
    /* Top shadow */
    0 -16px 16px -16px rgba(0, 0, 0, 0.75),
    /* Bottom shadow */
    0 16px 16px -16px rgba(0, 0, 0, 0.75);
    z-index: 9999;
}
.hero-banner h2 {font-weight: 700;font-size: clamp(1.4rem, 2vw, 2.2rem);color: #fff;letter-spacing: .25em;}
.hero {aspect-ratio: auto 1920 / 1080;}
.story-grid img {aspect-ratio: auto 216 / 216;}

/*.bg-image-fade {width:100vw; height: auto; -webkit-mask-image: linear-gradient(-35deg, transparent 25%, black 75%);mask-image: linear-gradient(-35deg, transparent 25%, black 75%); position: absolute;top:0;z-index: -9999;}
*/
.bg-image-fade{
  position:absolute;
  inset:0;
  width:100vw;
  height:100%;
  object-fit:cover;
  object-position:30% 30%;
  z-index:-1;
  pointer-events:none;

  /* Fade to whatever is behind it (set parent background to white) */
  -webkit-mask-image:
    /* bottom fade */
    linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0.45) 80%,
      rgba(0,0,0,0) 100%
    ),
    /* right-side fade */
    linear-gradient(to right,

      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,0.55) 65%,
      rgba(0,0,0,0) 88%
    ),
    /* subtle top-left “lift” (keeps logo area lighter) */
    /*radial-gradient(circle at 8% 10%,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.88) 22%,
      rgba(0,0,0,1) 52%
    )*/;

  /* multiply/intersect the three masks (Safari syntax) */
  -webkit-mask-composite: source-in, source-in;

  /* optional: helps prevent edge banding */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
}
.bg-image-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    /* bottom fade */
    linear-gradient(to bottom,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,0.55) 78%,
      rgba(255,255,255,1) 100%
    ),

    /* right side fade */
    linear-gradient(to right,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,0.35) 62%,
      rgba(255,255,255,1) 86%
    ),

    /* subtle top-left lift for logo contrast */
    /*radial-gradient(circle at 8% 10%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.20) 18%,
      rgba(255,255,255,0) 44%
    )*/;
}
/*.label {background-color: #ababab;position: absolute; top: 35vw;left: 0;z-index: 1;font-size: .9em; padding: 16px 16px 16px 48px;}*/
.story img {width:100%;height: auto;margin-bottom: .5em;}
.story h2 {color: #c00;}
.story ol, #page ol {font-size:.75em; border-top: solid 1px #ccc; padding-top: 1em; margin-bottom:0;}
.callout {background: #3f596e;color: #fff;}
.sidebar {/*margin-top: 40vw!important;*/}
.card {font-size: .9em;}
.card a {text-decoration: none;color: inherit;}
.card img {aspect-ratio: auto 1200 / 800;}
.card-img-top {aspect-ratio: auto 196 / 245;}
.dropdown:hover > .dropdown-menu {
  display: block;
}
.dropdown > .dropdown-toggle:active {
  pointer-events: none;
}
.dropdown-toggle::after {content: none!important;}
.chart-container {
	background-color: #5091cd;
	padding: 20px;
	border-radius: 8px;
}
.table>:not(caption)>*>* {background-color: transparent!important;}
.ellipsis {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    white-space: wrap;
}

.ellipsis::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, currentColor 0, currentColor 2px, transparent 2px, transparent 4px);
    margin-left: 8px;
}
.scenario {background-color: #ccc;font-size: .75em;text-transform: uppercase;text-align: center;padding: .5em;border-top-left-radius: .5em;border-bottom-left-radius: .5em;}
.footnotes, .footnote {font-size: .75em;font-weight: 300;border-top: solid 1px #ccc; padding-top: 1em;}
.footnotes + .footnotes, .footnotes + .footnotes + .footnotes, .footnote + .footnote, .footnote + .footnote + .footnote {border-top: none; padding-top: 0;}
footer {background-color: #d7d7d7;}

.text-red {color:#c00;}
.text-blue {color:#5091cd;}
.red-bkg {background-color: #c00;}
.blue-bkg {background-color: #5091cd;}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .story-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
  }

  .story-item,
  .depth-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 992px) {
	.story {margin-top: 0;}
	.label {position:static; padding: 0; background: transparent; font-size: 1em;}
    .label strong {font-size: 1.6em; }
	.sidebar {margin-top: 0!important;}
    .bg-image-fade {display: none;}
}
@media (max-width:768px){
  .bg-image-fade{ object-position:28% 22%; }

  .bg-image-fade{
    -webkit-mask-image:
      linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 64%,
        rgba(0,0,0,0.45) 84%,
        rgba(0,0,0,0) 100%
      ),
      linear-gradient(to right,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 52%,
        rgba(0,0,0,0.55) 72%,
        rgba(0,0,0,0) 92%
      ),
      radial-gradient(circle at 10% 10%,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.88) 22%,
        rgba(0,0,0,1) 54%
      );
  }
   
}