/*

tailwindcss reset (aka preflight):
https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css

X _global.css used by fizzy:
  https://piccalil.li/blog/a-more-modern-css-reset/

reset used by fizzy:
https://piccalil.li/blog/a-more-modern-css-reset/

utilities used by fizzy:
https://github.com/basecamp/fizzy/blob/main/app/assets/stylesheets/utilities.css

THE ORDER IN WHICH FIZZY CSS LOADS FILES IS ALPHABETICAL
@LAYER TAKES CARE OF ANY ISSUES
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer
*/





:root {
  /* background colors */
  --color-cream-background: #FEF9ED;
  --color-dark-blue-background: #002050;
  --color-white-background: #FFFEFA;

  /* text colors */
  --color-cream-text: #FEF9ED;
  --color-light-blue-text: #E1EAF6;
  --color-dark-blue-text: #002456;
  --color-gold-text: #C98E4F;
  --color-light-gold-text: #FFCE9A;

  /* Text */
  --font-sans: "SeasonSans", -apple-system, "Noto Sans", Helvetica, Arial, sans-serif;
  --font-serif: "SeasonMix", ui-serif, serif;
  --font-mono: ui-monospace, monospace;

  
  --text-xx-small: 12px;
  --text-x-small: 14px;
  --text-small: 14px;
  --text-normal: 20px;
  --text-medium: 24px;
  --text-large: 40px;
  --text-x-large: 52px;
  --text-xx-large: 66px;
  --text-xxx-large: 96px;
  /*
  --text-xx-small: 0.75rem;
  --text-x-small: 0.875rem;
  --text-small: 1.25rem;
  --text-normal: 1.5rem;
  --text-medium: 2rem;
  --text-large: 2.5rem;
  --text-x-large: 3.25rem;
  --text-xx-large: 6rem;
  */

  /* breakpoints; !!! remember we can't use this in @media screen queries due to how css works !!! */
  --breakpoint-small: 640px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 1024px;
  --breakpoint-x-large: 1200px;


  --container-padding-inline: 15px;
  --container-padding-block: 0px;
}




body {
  background-color: var(--color-cream-background);
  color: var(--color-dark-blue-text);
  font-family: var(--font-serif);
  font-size: var(--text-normal);
}



.padding-top {
  padding-top: 15px;
}
.margin-bottom {
  margin-bottom: 15px;
}
.margin-large {
  margin-top: 100px;
  margin-bottom: 100px;
}
.margin-medium {
  margin-top: 50px;
  margin-bottom: 50px;
}

.text-small {
  h1, h2, h3, h4, h5, h6, p, ul, ol, summary {
    font-size: var(--text-small);
  }
}
p, ul, ol, summary {
  line-height: 1.35;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}




#content {
}




.separator {
  display: block;
  width: 160px;
  height: 6px;
  background: linear-gradient(94.75deg, #BA864E -32.16%, #FFCE9A -18.96%, #C98E4F 18.14%, #FFCE9A 41.65%);
}
.notification {
  .container {
    background: linear-gradient(145.49deg, #FFD68A -22.5%, #B39262 116.56%);
    white-space: nowrap;
    overflow: hidden;
  }
  a {
    text-decoration: none;
    /*color: var(--color-light-blue-text);*/
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-xx-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;

    @media screen and (min-width: 768px) {
      font-size: var(--text-x-small);
      height: 46px;
    }
  }
}

.marquee {
  display: inline-flex;
  align-items: center;
  animation: marquee 20s linear infinite;
  gap: 10px;
  /*padding-left: 100%;*/
  @media screen and (min-width: 768px) {
    gap: 20px;
  }
  svg {
    width: 14px;
    height: 14px;
    @media screen and (min-width: 768px) {
      width: 20px;
      height: 20px;
    }
  }
}



@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 2rem));
  }
}




.transparent-navbar {
  #header {
    margin-bottom: -100px;
    @media screen and (min-width: 1100px) {
      margin-bottom: -130px;
    }
    .hamburger__line {
      background-color: var(--color-light-blue-text);
    }
    #navbar .navbar-menu .navbar-menu-item a,
    #navbar .navbar-menu .navbar-menu-item button {
      color: var(--color-light-blue-text);
      &.navbar-button {
        border-color: var(--color-light-blue-text) !important;
      }
    }
    #navbar .navbar-menu-mobile .navbar-menu-mobile-item a,
    #navbar .navbar-menu-mobile .navbar-menu-mobile-label {
      color: var(--color-light-blue-text);
      &.navbar-button {
        border-color: var(--color-light-blue-text) !important;
      }
    }
  }
}




















/* SECTIONS */



#section-home-hero {
  color: var(--color-light-blue-text);
  > .container {
    height: 400px;
    background-image: url(/site/templates/images/section-home-hero_background@2x.jpg);
    background-size: cover;
    /*background-position: center top;*/
    background-position: center center;

    /* horizontally and vertically center everything inside */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    @media screen and (min-width: 768px) {
      height: 500px;
      background-position: center bottom max(50%, -70px);
    }

    h1 {
      /*
      text-grow: per-line scale;
      https://css-tricks.com/fit-width-text-in-1-line-of-css/
      */
      font-size: var(--text-large);
      margin: 0;
      font-weight: normal;
      text-align: center;

      @media screen and (min-width: 768px) {
        font-size: var(--text-xx-large);
      }
    }
    p {
      font-size: var(--text-normal);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: var(--font-sans);
      margin-top: 10px;
      text-align: center;

      @media screen and (min-width: 768px) {
        font-size: var(--text-normal);
      }
    }
  }

  h1 .line-1,
  h1 .line-2 {
    display: block;
  }
  h1 .line-1 {
    opacity: 0;
    animation: hero-fade-in 0.8s ease forwards;
    animation-delay: 0.3s;
  }
  h1 .line-2 {
    opacity: 0;
    animation: hero-fade-in 0.8s ease forwards;
    animation-delay: 0.9s;
  }
  p {
    opacity: 0;
    animation: hero-fade-in 0.8s ease forwards;
    animation-delay: 1.5s;
  }
  h1 .line-1,
  h1 .line-2 {
    display: block;
  }
  p .line-1,
  p .line-2 {
    display: block;
  }
  @media screen and (min-width: 768px) {
    h1 .line-1,
    h1 .line-2 {
      display: inline-block;
    }
    h1 .line-1 {
      margin-right: 0.05em;
    }
    p .line-1,
    p .line-2 {
      display: inline-block;
    }
    p .line-1 {
      margin-right: 0.05em;
    }
  }
}
@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}










#section-home-intro {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
  .grid {
    /* 2 columns using grid but the first column is the width of the image inside of it */
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
    align-items: center;

    @media screen and (min-width: 768px) {
      grid-template-columns: auto 1fr;
      text-align: left;
    }

    video {
      width: 200px;
    }
    img {
      display: none; /* @todo: ? */
      width: 50%;
      max-width: 100%;
      height: auto;

      @media screen and (min-width: 768px) {
        display: block;
        width: auto;
      }
    }
  }
  p {
    font-size: var(--text-medium);
  }
  .section-home-intro-logo {
    /* center the video inside the first column */
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .section-home-intro-text {

  }
}

#section-charles-bronfman-quote {
  > .container {
    padding: 50px 0;
    background-color: var(--color-white-background);
    border-radius: 15px;
  }
  .inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;

    @media screen and (min-width: 768px) {
      padding: 0;
    }
  }
  .quote {
    text-align: center;
    font-size: var(--text-medium);
  }
  .signature {
    text-align: center;
    margin-top: -15px;
    margin-bottom: -15px;
    img {
      display: inline-block;
      width: 200px;
      height: auto;

      @media screen and (min-width: 768px) {
        width: 290px;
      }
    }
  }
  .name {
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
}





#section-recipients-teaser {
  .recipients-slider {
    overflow: hidden;
    width: 100%;
    margin-bottom: 15px;
  }
  .recipients-track {
    display: flex;
    gap: 15px;
    animation: scroll-recipients-forward calc(var(--slide-count, 10) * 5s) linear infinite;
    width: max-content;
  }
  .recipient-slide {
    flex-shrink: 0;
    aspect-ratio: 33 / 47;
  }
  .recipients-slider-reverse .recipients-track {
    animation-name: scroll-recipients-reverse;
  }
  /* center the button inside */
  .meet {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
}
@keyframes scroll-recipients-forward {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes scroll-recipients-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}



.recipient-slide {
  width: 200px;
  @media screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 1366px) {
    width: 250px;
  }
  @media screen and (min-width: 768px) and (max-width: 1366px) and (max-height: 1024px) {
    width: 250px;
  }
  @media screen and (min-width: 1369px) {
    width: 330px;
  }
}


.card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  display: grid;
  aspect-ratio: 33 / 47;

  .card__content {
    padding: 0 24px 12px 24px;
    .recipient-title {
      font-size: 36px;
      &.recipient-title-size-medium {
        font-size: 28px;
      }
      &.recipient-title-size-small {
        font-size: 24px;
      }
    }
    .recipient-year {
      font-size: 26px;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 1366px) {
    .card__content {
      padding: 0 30px 20px 30px;
      .recipient-title {
        font-size: 40px;
        &.recipient-title-size-medium {
          font-size: 32px;
        }
        &.recipient-title-size-small {
          font-size: 28px;
        }
      }
      .recipient-year {
        font-size: 30px;
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1366px) and (max-height: 1024px) {
    .card__content {
      padding: 0 30px 20px 30px;
      .recipient-title {
        font-size: 48px;
        &.recipient-title-size-medium {
          font-size: 50px;
        }
        &.recipient-title-size-small {
          font-size: 40px;
        }
      }
      .recipient-year {
        font-size: 30px;
      }
    }
  }
  @media screen and (min-width: 1369px) {
    .card__content {
      padding: 0 35px 25px 35px;
      .recipient-title {
        font-size: 64px;
        &.recipient-title-size-medium {
          font-size: 48px;
        }
        &.recipient-title-size-small {
          font-size: 42px;
        }
      }
      .recipient-year {
        font-size: 36px;
      }
    }
  }
}

.card::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background: rgba(0, 36, 86, 0.5);
  transition: background 0.3s ease;
  pointer-events: none;
}

.card:hover::after {
  background: transparent;
}

.card__image-container {
  grid-area: 1 / 1;
}

.card__image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.card:hover .card__image-container img {
  filter: grayscale(0%);
}

.card__content {
  grid-area: 1 / 1;
  align-self: end;
  color: var(--color-light-blue-text);
  z-index: 2;
}

.card__content .recipient-title {
  margin: 0;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
  color: var(--color-cream-text);
  line-height: 1.0;
  /*
  overflow-wrap: break-word;
  word-break: break-word;
  */
}

.card__content .recipient-title > * {
  overflow: hidden;
}

.card:hover .card__content .recipient-title {
  grid-template-rows: 1fr;
}

@media screen and (hover: none) {
  .card__content .recipient-title {
    grid-template-rows: 1fr;
  }
  .card::after {
    background: rgba(0, 36, 86, 0.75);
  }
}

.card__content .recipient-year {
  margin: 0.25rem 0 0;
  text-transform: uppercase;
  /*letter-spacing: 0.1em;*/
  color: var(--color-light-gold-text);
}

.card__link {
  /* Ensure the link itself has a clear focus and hover state */
  text-decoration: none;
  color: inherit; /* Inherit color from parent for a cleaner look */

}

.card__link::before {
  /* Create the stretched link area */
  content: "";
  position: absolute;
  /* Stretch the pseudo-element over the entire card (relative to .card, not .card__content) */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Place the pseudo-element on top of the card but below other interactive elements */
  z-index: 2;
  cursor: pointer;
}


.card__link:focus-visible::before {
  outline: 2px solid blue; /* Provide a clear focus indicator */
  outline-offset: -2px;
}







#section-nominate-hero {
  color: var(--color-white);
  > .container {
    padding: var(--container-padding-block) var(--container-padding-inline);
    height: 400px;
    background-image: url(/site/templates/images/section-nominate-hero_background@2x.jpg);
    background-size: cover;
    background-position: center top;

    /* horizontally and vertically center everything inside */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    

    @media screen and (min-width: 768px) {
      height: 500px;
      padding: 0;
    }

    > .inner {
      max-width: 900px;
    }
  }
  h1 {
    /*
    text-grow: per-line scale;
    https://css-tricks.com/fit-width-text-in-1-line-of-css/
    */
    text-align: center;
    font-size: var(--text-large);
    margin: 0;
    font-weight: normal;

    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: reveal-left-right 2s ease forwards 0.5s;

    @media screen and (min-width: 768px) {
      font-size: var(--text-xxx-large);
    }
  }
}
@keyframes reveal-left-right {
  to {
    background-position: 0% 0;
  }
}




#section-winner {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    @media screen and (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .section-winner-info {
    order: 2;
    @media screen and (min-width: 768px) {
      grid-column: span 2;
    }
    font-size: var(--text-medium);
  }
  .section-winner-image {
    display: none;
    order: 1;
    @media screen and (min-width: 768px) {
      display: block;
      grid-column: span 1;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
  .section-winner-image-mobile {
    display: block;
    margin-top: 0px;
    margin-bottom: 15px;
    img {
      width: 100%;
      height: auto;
    }
    @media screen and (min-width: 768px) {
      display: none;
    }
  }
  .winner-title {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--text-x-small);
    font-family: var(--font-sans);
  }
  .winner-recipient {
    margin-top: 0px;
    font-size: var(--text-x-large);
  }
}







#section-nominate-body {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
}

#section-nominate-details {
  > .container {
    padding: 0px 0px;
    @media screen and (min-width: 768px) {
    }
  }
}



/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::details-content */
details::details-content {
  opacity: 0;
  transition:
    opacity 600ms,
    content-visibility 600ms allow-discrete;
}
details[open]::details-content {
  opacity: 1;
}




/* Recipient Detail Page */

#section-recipient-hero {
  .recipient-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
      height: min(34.72vw, 500px);
    }
  }


  /*************/
  /* LEFT DIV  */
  /*************/
  /*
  .recipient-hero-image {
    overflow: hidden;
    height: 300px;
    opacity: 0;
    animation: recipient-hero-portrait 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
    will-change: opacity, transform;
    view-transition-name: recipient-image;
    @media screen and (min-width: 768px) {
      height: auto;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  */
  .recipient-hero-image {
    overflow: hidden;
    aspect-ratio: 36 / 25;
    opacity: 0;
    animation: recipient-hero-portrait 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
    will-change: opacity, transform;
    view-transition-name: recipient-image;
    @media screen and (min-width: 768px) {
      aspect-ratio: unset;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /*************/
  /* RIGHT DIV */
  /*************/
  .recipient-hero-info {
    display: grid;
    grid-template-rows: auto auto;
    background-color: var(--color-dark-blue-background);
    color: var(--color-cream-background);
    padding: 2rem;

    /*https://modern-css.davecross.co.uk/2025/09/04/line-height-step/*/
    /*line-height-step: 24px;*/

    @media screen and (min-width: 768px) {
      grid-template-rows: 1fr auto 1fr;
      padding: 2rem 2rem 2rem 40px;
    }

    @media screen and (min-width: 1025px) {
      grid-template-rows: 1fr auto 1fr;
      padding: 2rem 2rem 2rem 90px;
    }

    .recipient-hero-year {
      font-size: var(--text-small);
      color: var(--color-light-gold-text);
      /*margin-bottom: 0.5rem;*/
      font-size: 28px;
      opacity: 0;
      animation: recipient-hero-fade-in 0.6s ease forwards;
      animation-delay: 0.6s;
      @media screen and (min-width: 768px) {
        font-size: 30px;
      }
      @media screen and (min-width: 1200px) {
        font-size: 36px;
      }
    }

    .recipient-hero-title {
      font-family: var(--font-serif);
      margin: 0 0 0.5rem;
      font-size: 50px;
      opacity: 0;
      animation: recipient-hero-fade-in 0.6s ease forwards;
      animation-delay: 0.9s;
      @media screen and (min-width: 768px) {
        font-size: 50px;
      }
      @media screen and (min-width: 1200px) {
        font-size: 64px;
      }
    }

    .recipient-hero-position {
      font-size: var(--text-x-small);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: var(--font-sans);
      opacity: 0;
      animation: recipient-hero-fade-in 0.6s ease forwards;
      animation-delay: 1.2s;
      @media screen and (min-width: 768px) {
      }
    }
    .recipient-hero-details {
      grid-row: 2;
      view-transition-name: recipient-details;

      &.recipient-hero-details-shrink {
        @media screen and (min-width: 768px) {
          .recipient-hero-year {
            font-size: 20px;
          }
          .recipient-hero-title {
            font-size: 40px;
          }
        }
        @media screen and (min-width: 1200px) {
          .recipient-hero-year {
            font-size: 24px;
          }
          .recipient-hero-title {
            font-size: 44px;
          }
        }
      }
    }
    .recipient-toolbar {
      grid-row: 3;
      align-self: end;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
      opacity: 0;
      animation: recipient-hero-fade-in 0.6s ease forwards;
      animation-delay: 1.5s;

      .recipient-toolbar-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
      }
      .recipient-toolbar-nav {
        display: flex;
        gap: 0.5rem;
        align-items: center;
      }
    }
  }
}

@keyframes recipient-hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes recipient-hero-portrait {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.social-media-link {
}

/* should be at the bottom right of the recipient-hero-info div */
.recipient-nav {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  margin-top: 1rem;

  a {
    color: var(--color-light-blue-text);
    font-family: var(--font-sans);
    font-size: var(--text-xx-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-light-blue-text);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;

    &:hover {
      background-color: var(--color-light-blue-text);
      color: var(--color-dark-blue-background);
    }
  }
}



#section-recipient-body {
  > .container {
    padding: var(--container-padding-block)  var(--container-padding-inline);
  }
  .recipient-quote {
    .recipient-quote-author {
      font-family: var(--font-sans);
      font-size: var(--text-small);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
  }
}

#section-recipient-slider {
  .recipient-photos-slider {
    overflow: hidden;
    width: 100%;
  }
  .recipient-photos-track {
    display: flex;
    gap: 0px;
    width: max-content;
    animation: scroll-recipient-photos calc(var(--slide-count, 5) * 4s) linear infinite;
  }
  .recipient-photo-slide {
    flex-shrink: 0;
    width: 300px;
    @media screen and (min-width: 768px) {
      width: 400px;
    }
    @media screen and (min-width: 1200px) {
      width: 550px;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }
}
@keyframes scroll-recipient-photos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Recipients List Page */

#section-recipients {
  > .container {
    padding: var(--container-padding-block) var(--container-padding-inline);
    @media screen and (min-width: 768px) {
    }
  }
  .recipients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    @media screen and (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    @media screen and (min-width: 1200px) {
      grid-template-columns: repeat(4, 1fr);
      
    }

    > * {
      opacity: 0;
      animation: recipient-fade-in 0.6s ease forwards;
    }
    > *:nth-child(1)  { animation-delay: 0.05s; }
    > *:nth-child(2)  { animation-delay: 0.10s; }
    > *:nth-child(3)  { animation-delay: 0.15s; }
    > *:nth-child(4)  { animation-delay: 0.20s; }
    > *:nth-child(5)  { animation-delay: 0.25s; }
    > *:nth-child(6)  { animation-delay: 0.30s; }
    > *:nth-child(7)  { animation-delay: 0.35s; }
    > *:nth-child(8)  { animation-delay: 0.40s; }
    > *:nth-child(9)  { animation-delay: 0.45s; }
    > *:nth-child(10) { animation-delay: 0.50s; }
    > *:nth-child(11) { animation-delay: 0.55s; }
    > *:nth-child(12) { animation-delay: 0.60s; }
    > *:nth-child(13) { animation-delay: 0.65s; }
    > *:nth-child(14) { animation-delay: 0.70s; }
    > *:nth-child(15) { animation-delay: 0.75s; }
    > *:nth-child(16) { animation-delay: 0.80s; }
    > *:nth-child(17) { animation-delay: 0.85s; }
    > *:nth-child(18) { animation-delay: 0.90s; }
    > *:nth-child(19) { animation-delay: 0.95s; }
    > *:nth-child(20) { animation-delay: 1.00s; }
    > *:nth-child(21) { animation-delay: 1.05s; }
    > *:nth-child(22) { animation-delay: 1.10s; }
    > *:nth-child(23) { animation-delay: 1.15s; }
    > *:nth-child(24) { animation-delay: 1.20s; }
    > *:nth-child(25) { animation-delay: 1.25s; }
    > *:nth-child(26) { animation-delay: 1.30s; }
    > *:nth-child(27) { animation-delay: 1.35s; }
    > *:nth-child(28) { animation-delay: 1.40s; }
  }
}

@keyframes recipient-fade-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





#section-about-body {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
}

#section-about-charles-bronfman-teaser {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .section-about-charles-bronfman-teaser-image {
  }
  .section-about-charles-bronfman-teaser-text {
    /* not required because of prose */
    /*
    display: flex;
    flex-direction: column;
    gap: 1rem;
    */
    @media screen and (min-width: 768px) {
    }
  }
}




#section-about-charles-bronfman {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 2fr;
    }
  }

  .section-about-charles-bronfman-image {

  }
  .section-about-charles-bronfman-text {

  }
}

#section-who-we-are {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
  .person-lists {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
  .person-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    .person-list-heading {
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: var(--font-sans);
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      @media screen and (min-width: 768px) {
        grid-template-columns: 1fr 1fr;
      }
    }
    .person {
      display: grid;
      gap: 2rem;
      grid-template-columns: 1fr;
      @media screen and (min-width: 768px) {
        grid-template-columns: 1fr 2fr;
      }
      .person-image {
        width: 50%;
        height: auto;
        display: block;
        @media screen and (min-width: 768px) {
          width: 100%;
        }
      }
      .person-details {
        .person-title {
          letter-spacing: 0.1em;
          text-transform: uppercase;
          font-family: var(--font-sans);
          font-size: var(--text-small);
          margin-bottom: 0.5rem;
        }
        p {
          /*font-size: var(--text-small);*/
        }
        .person-body-extra {
          interpolate-size: allow-keywords;
          display: none;
          height: 0;
          overflow: hidden;
          opacity: 0;
          transition: height 0.4s ease, opacity 0.4s ease, display 0.4s allow-discrete;
          &.is-open {
            display: block;
            height: auto;
            opacity: 1;
          }
        }
        .read-more-wrapper {
          margin-top: 20px;
          
          button {
            cursor: pointer
          }
        }
      }
    }
  }
}




#section-videos {
  > .container {
    padding-inline: var(--container-padding-inline);
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .video-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}



.basic-header {
  margin-bottom: 50px;
  .basic-header-heading {
    text-transform: uppercase;
    font-size: var(--text-large);
    letter-spacing: 3px;
    text-align: center;

    @media screen and (min-width: 768px) {
      font-size: var(--text-x-large);
    }
  }
}




.post-item {
  padding: 2rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark-blue-text) 15%, transparent);

  &:first-child {
    padding-top: 0;
  }
  &:last-child {
    border-bottom: none;
  }

  .post-item-title {
    font-size: var(--text-normal);
    margin: 0 0 0.5rem;
    line-height: 1.2;
  }

  .post-item-meta {
    font-family: var(--font-sans);
    font-size: var(--text-xx-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold-text);
    margin: 0 0 1rem;

    @media screen and (min-width: 768px) {
      font-size: var(--text-x-small);
    }
  }

  .post-item-teaser {
    margin: 0 0 1rem;
    font-size: var(--text-small);
    span {
      font-style: italic;
    }
  }

  .post-item-action {
    margin: 0;
  }
}



.MarkupPagerNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  font-family: var(--font-sans);
  font-size: var(--text-x-small);
  > li {
    > a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.5rem;
      height: 2.5rem;
      padding: 0.25rem 0.75rem;
      border: 1px solid var(--color-dark-blue-text);
      border-radius: 5px;
      text-decoration: none;
      color: var(--color-dark-blue-text);
      transition: background-color 0.2s ease, color 0.2s ease;
      &:hover {
        background-color: var(--color-dark-blue-text);
        color: var(--color-cream-background);
      }
    }
    &.MarkupPagerNavOn > a {
      background-color: var(--color-dark-blue-text);
      color: var(--color-cream-background);
      pointer-events: none;
    }
    &.MarkupPagerNavSeparator {
      padding: 0 0.25rem;
      color: var(--color-dark-blue-text);
    }
    &.MarkupPagerNavPrevious,
    &.MarkupPagerNavNext {
      > a {
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
    }
  }
}