/* Reversible homepage hero experiment: remove this stylesheet link to restore. */
/* Float the homepage navigation over the photograph, including at scroll top. */
body:has(.edition-hero) .site-header {
  position: fixed !important;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
}
#main .edition-hero {
  position: relative;
  isolation: isolate;
  background: #102d50 url('assets/images/editorial/toronto-financial-district.jpg') center 42% / cover no-repeat !important;
  padding: calc(clamp(72px,9vw,128px) + 78px) 0 !important;
  margin-top: 0;
  overflow: hidden;
}
#main .edition-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,rgba(8,27,50,.66) 0%,rgba(8,27,50,.54) 37%,rgba(8,27,50,.16) 76%,rgba(8,27,50,.04) 100%);
}
#main .edition-hero-grid { display: block !important; }
#main .edition-hero-copy { max-width: 620px; }
#main .edition-hero-copy h1 { color: #fff !important; font-size: clamp(54px,6.3vw,84px) !important; }
#main .edition-hero-copy h1 .hero-count { color: #b9d3ff !important; }
#main .edition-hero-copy > p { color: #e1eaf7 !important; max-width: 44ch !important; }
#main .edition-hero-image { display: none !important; }
#main .edition-hero-actions { gap: 14px !important; margin-top: 28px; }
#main .edition-hero-actions > .button { background: #fff !important; color: #19438f !important; border-color: #fff !important; }
#main .edition-hero-actions > .button:hover { background: #e8f0fd !important; }
#main .edition-hero-actions > a.edition-text-link {
  color: #fff !important; background: rgba(255,255,255,.1) !important;
  border-color: #9ab3d5 !important;
}
#main .edition-hero-actions > a.edition-text-link:hover { background: rgba(255,255,255,.2) !important; }
@media (max-width: 640px) {
  #main .edition-hero { margin-top: 0; padding: 135px 0 64px !important; background-position: 58% center !important; }
  #main .edition-hero::before { background: rgba(8,27,50,.57); }
  #main .edition-hero-copy h1 { font-size: clamp(48px,13vw,64px) !important; }
}

#main .edition-hero-copy h1 { text-shadow: 0 2px 16px rgba(5,20,40,.22); }
#main .edition-hero-copy > p { text-shadow: 0 1px 5px rgba(5,20,40,.38); }

/* Let the photograph dissolve into the page before the SHSM feature. */
#main .edition-hero {
  padding-bottom: clamp(120px,12vw,166px) !important;
}
#main .edition-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 112px;
  pointer-events: none;
  background: linear-gradient(to bottom,rgba(242,246,252,0),rgba(242,246,252,.62) 62%,var(--blc-bg));
  z-index: -1;
}
#main .home-shsm {
  position: relative;
  padding-top: 0 !important;
  margin-top: -12px;
  padding-bottom: 52px !important;
}
@media (max-width: 640px) {
  #main .edition-hero { padding-bottom: 112px !important; }
  #main .edition-hero::after { height: 84px; }
  #main .home-shsm { margin-top: -8px; padding-bottom: 40px !important; }
}

/* A gradual image fade preserves the page color without a white haze layer. */
#main .edition-hero {
  background: none !important;
  background-color: transparent !important;
}
#main .edition-hero::before {
  background:
    linear-gradient(90deg,rgba(8,27,50,.66) 0%,rgba(8,27,50,.54) 37%,rgba(8,27,50,.16) 76%,rgba(8,27,50,.04) 100%),
    url('assets/images/editorial/toronto-financial-district.jpg') center 42% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 69%,rgba(0,0,0,.98) 75%,rgba(0,0,0,.86) 82%,rgba(0,0,0,.55) 89%,rgba(0,0,0,.16) 96%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 69%,rgba(0,0,0,.98) 75%,rgba(0,0,0,.86) 82%,rgba(0,0,0,.55) 89%,rgba(0,0,0,.16) 96%,transparent 100%);
}
#main .edition-hero::after { display: none; }
#main .home-shsm { margin-top: 0; }
@media (max-width: 640px) {
  #main .edition-hero::before {
    background:
      linear-gradient(rgba(8,27,50,.57),rgba(8,27,50,.57)),
      url('assets/images/editorial/toronto-financial-district.jpg') 58% center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.95) 81%,rgba(0,0,0,.7) 88%,rgba(0,0,0,.25) 96%,transparent 100%);
    mask-image: linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.95) 81%,rgba(0,0,0,.7) 88%,rgba(0,0,0,.25) 96%,transparent 100%);
  }
}

#main .hero-blc-logo {
  position: absolute;
  top: 36%;
  right: max(7vw,calc((100vw - 1190px) / 2 + 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-shadow: 0 3px 24px rgba(5,20,40,.45);
  pointer-events: none;
}
.hero-blc-wordmark {
  font: 700 clamp(100px,12vw,176px)/.9 var(--archivo);
  letter-spacing: -.045em;
}
.hero-blc-wordmark > span { color: #b9d3ff; }
.hero-blc-name { font: 600 11px/1.5 var(--plex); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) {
  #main .hero-blc-logo { top: 20px; right: 24px; gap: 0; }
  .hero-blc-wordmark { font-size: 42px; }
  .hero-blc-name { display: none; }
}

/* Place the secondary identity in the sky, with a quieter editorial scale. */
#main .hero-blc-logo {
  top: 32%;
  right: 23%;
  gap: 10px;
  transform: translateX(50%);
  opacity: .88;
  text-shadow: 0 2px 12px rgba(5,20,40,.2);
}
.hero-blc-wordmark {
  font-size: clamp(76px,9vw,124px);
  letter-spacing: -.045em;
}
.hero-blc-name { max-width: 145px; text-align: center; font-size: 9px; line-height: 1.6; letter-spacing: .1em; }
@media (max-width: 760px) {
  #main .hero-blc-logo { top: 22px; right: 24px; transform: none; opacity: .78; }
  .hero-blc-wordmark { font-size: 34px; }
}
#main .hero-blc-logo { right: 35%; }
.hero-blc-name { display: none; }
@media (max-width: 760px) {
  #main .hero-blc-logo { right: 24px; }
}

/* Balance the mark with the two-line headline rather than the full photograph. */
#main .hero-blc-logo {
  top: 34%;
  right: 33%;
  opacity: .92;
}
#main .hero-blc-wordmark {
  font-size: clamp(112px,11.7vw,164px);
  line-height: .9;
  letter-spacing: -.045em;
}
@media (max-width: 760px) {
  #main .hero-blc-logo { top: 22px; right: 24px; opacity: .78; }
  #main .hero-blc-wordmark { font-size: 34px; }
}

#main .hero-blc-logo { top: 29%; right: 26%; }
#main .hero-blc-wordmark { font-size: clamp(210px,23vw,340px); }
@media (max-width: 760px) {
  #main .hero-blc-logo { top: 16px; right: 22px; }
  #main .hero-blc-wordmark { font-size: 50px; }
}

/* Lift the oversized mark and ease both section boundaries. */
#main .hero-blc-logo { top: 19%; }
#main .edition-hero::before {
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 67%,rgba(0,0,0,.98) 73%,rgba(0,0,0,.88) 79%,rgba(0,0,0,.64) 85%,rgba(0,0,0,.32) 91%,rgba(0,0,0,.08) 96%,transparent 99%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 67%,rgba(0,0,0,.98) 73%,rgba(0,0,0,.88) 79%,rgba(0,0,0,.64) 85%,rgba(0,0,0,.32) 91%,rgba(0,0,0,.08) 96%,transparent 99%);
}
#main .home-shsm {
  margin-top: -10px;
  padding-bottom: 64px !important;
  background: linear-gradient(to bottom,var(--blc-bg) 0%,var(--blc-bg) 48%,#f8faff 78%,#fff 100%) !important;
}
#main .edition-featured { border-top: 0 !important; }
@media (max-width: 760px) {
  #main .hero-blc-logo { top: 16px; }
}
@media (max-width: 640px) {
  #main .edition-hero::before {
    -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.8) 85%,rgba(0,0,0,.5) 91%,rgba(0,0,0,.16) 96%,transparent 99%);
    mask-image: linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.8) 85%,rgba(0,0,0,.5) 91%,rgba(0,0,0,.16) 96%,transparent 99%);
  }
  #main .home-shsm { margin-top: -6px; padding-bottom: 44px !important; }
}