@font-face {
    font-family: 'The Future';
    src: url('/fonts/subset-TheFuture-Regular.woff2') format('woff2'),
        url('/fonts/subset-TheFuture-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'The Future';
    src: url('/fonts/subset-TheFuture-Medium.woff2') format('woff2'),
        url('/fonts/subset-TheFuture-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

    * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
    }
    
    :root {
       --bg-light: #ffffff;
       --panel-dark: #282525;
       --text-dark: #111;
       --text-light: #ffffff;
       --menu-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }
    
    body {
       font-family: "The Future", Arial, sans-serif;
       background: var(--panel-dark);
       color: var(--text-light);
       line-height: 1.6;
    }
    
    a {
       text-decoration: none;
       color: inherit;
    }
    strong {font-weight: 500;}
    img {
       display: block;
       width: 100%;
       height: auto;
    }
/* HEADER */
    .site-header {
      background: var(--bg-light);
      padding: 28px 40px 24px;
      position: relative;
      z-index: 20;
    }

    .header-inner {
      max-width: 1600px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .logo svg{
      height: 3rem;
      width: auto;
    }

    .menu-wrap {
      position: relative;
    }

    .menu-toggle {
      width: 52px;
      height: 52px;
      border: none;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .burger {
      width: 34px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .burger span {
      display: block;
      height: 4px;
      width: 100%;
      background: #211c1f;
      border-radius: 2px;
      transition: 0.3s ease;
    }

    .menu-toggle.active .burger span:nth-child(1) {
      transform: translateY(10px) rotate(45deg);
    }

    .menu-toggle.active .burger span:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle.active .burger span:nth-child(3) {
      transform: translateY(-10px) rotate(-45deg);
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 16px);
      right: 0;
      width: 320px;
      background: #fff;
      box-shadow: var(--menu-shadow);
      padding: 18px 0;
      display: none;
    }

    .dropdown-menu.open {
      display: block;
    }

    .dropdown-menu a {
      display: block;
      padding: 14px 40px;
      font-size: 1.5rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #111;
      transition: background 0.2s ease;
    }

    .dropdown-menu a.active {
      text-decoration: underline;
    }

    /* MAIN ABOUT SECTION */
    .about-section {
      margin: 0 auto;
      display: flex;
      min-height: 860px;
      position: relative;
  background: var(--panel-dark);
    }

    .about-image,
    .about-content {
      width: 50%;
    }

    .about-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-content {
      background: var(--panel-dark);
      color: var(--text-light);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 80px 90px 100px;
      position: relative;
    }

    .content-inner {
      max-width: 650px;
      width: 100%;
      text-align: left;
    }

    .page-title {
      text-align: center;
      font-size: 2.5rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 90px;
    }

    .copy p {
      font-size: 1.4rem;
      line-height: 1.9;
      margin-bottom: 34px;
      font-weight: 400;

    }

    .uppercase {
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .copy h2 {
      font-size: 1.6rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      margin: 22px 0 8px;
    }

    /* Vertical copyright: top -> bottom */
    .copyright-vertical {
      writing-mode: vertical-lr;
      font-size: 0.8rem;
      color: #f1eeee;
        transform: rotate(180deg);
  padding: 30px 10px;
  overflow: hidden;
      display: none;
    }
    .copyright-horizontal {
      font-size: 0.6rem;
      color: #f1eeee;
position: absolute;
  bottom: 30px;
  max-width: 650px;
  width: calc( 100% - 48px );
  text-align: left;
    }

    .copyright-vertical-mobile {
      display: none;
    }


/* FOOTER */
.site-footer {
  background: var(--bg-light);
  padding: 62px 72px 58px;
  color: #2d2a2a;
}

.footer-inner {
  max-width: 1700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 0.95fr 1.05fr auto;
  align-items: start;
  gap: 70px;
}

.footer-block {
  font-size: 1.45rem;
  /*letter-spacing: 0.08em;*/
  line-height: 1.55;
  color: #2d2a2a;
}

.footer-block .small {
  font-size: 1.35rem;
  /*letter-spacing: 0.07em;*/
}
.footer-block .wider {
  letter-spacing: 0.03rem;
}

.footer-social {
  justify-self: end;
  padding-top: 2px;
}

.footer-social svg {
  width: 54px;
  height: 54px;
  stroke: #2d2a2a;
}

    /* TABLET */
    @media (max-width: 1024px) {
      .site-header {
        padding: 24px 24px 20px;
      }

      .logo svg {
        height: 2.4rem;
      }

      .about-content {
        padding: 60px 50px 80px;
      }

      .page-title {
        font-size: 2.4rem;
        margin-bottom: 60px;
      }


/* TABLET */
@media (max-width: 1024px) {
  .site-footer {
    padding: 46px 40px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px 70px;
  }

  .footer-social {
    justify-self: start;
  }
}

    }

    /* MOBILE / TABLET STACKED */
    @media (max-width: 768px) {
      .site-header {
        padding: 20px 18px;
      }

      .logo svg {
        height: 2rem;
      }

      .menu-toggle {
        width: 46px;
        height: 46px;
      }

      .dropdown-menu {
        width: calc(100vw - 36px);
        max-width: 320px;
	right: -18px;
      }

      .about-section {
        flex-direction: column;
        min-height: auto;
      }

      .about-image,
      .about-content {
        width: 100%;
      }

      .about-image {
        position: relative;
      }

      .about-image img {
        height: auto;
        min-height: 380px;
        object-fit: cover;
      }

      .about-content {
        padding: 48px 24px 70px;
      }

      .content-inner {
        max-width: 100%;
      }

      .page-title {
        font-size: 2rem;
        margin-bottom: 40px;
      }

      .copy p {
        font-size: 0.98rem;
        line-height: 1.8;
      }

      .copyright-horizontal {
	font-size: 0.5rem;
	}
      .copyright-vertical {
        display: none;
      }
      .copyright-vertical-mobile {
        display: none;
      font-size: 0.8rem;
      color: #f1eeee;
      letter-spacing: 0.03em;
      white-space: wrap;
	padding: 20px;
    }

 .site-footer {
    padding: 64px 16px 56px;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px 12px;
    align-items: end;
  }

  .footer-block {
    font-size: 1.225rem;
    line-height: 1.55;
  }

  .footer-block .small {
    font-size: 0.92rem;
  }

  /* Foundation block */
  .footer-block:first-child {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 1.225rem;
  }

  .footer-block:first-child .small {
    font-size: 0.92rem;
  }

  /* Contact */
  .footer-block:nth-child(2) {
    grid-column: 1;
    text-align: left;
  }

  /* Partnered with */
  .footer-block:nth-child(3) {
    grid-column: 1;
    text-align: left;
  }

  /* Instagram */
  .footer-social {
    grid-column: 2;
    justify-self: end;
    align-self: end;
    padding-bottom: 2px;
  }

  .footer-social svg {
    width: 48px;
    height: 48px;
  }

    }

/* screens */
.screen-about {
  opacity: 0;
}

.screen-logo,.screen-quote {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  background: var(--panel-dark);
  color: #ffffff;
pointer-events: none;
}

.screen.active {
  opacity: 1;
}

/* center content */
.center {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

/* styling */
.screen-logo svg {
  height: 7rem;
  width: auto;
  max-width: 70%;
}

.screen-quote p.quote {
  font-size: 2.2rem;
  line-height: 1.5;
  letter-spacing: 1.7px;
}
.screen-quote p.author {
  font-size: 2rem;
  line-height: 1.5;
  margin-top: 20px;
}

@media (max-width: 768px) {
.screen-quote p.quote {
  font-size: 1.5rem;
}
.screen-quote p.author {
  font-size: 1.2rem;
}

	
}


/* SHARED PAGE VARIANTS */
body.page-about,
body.page-onview,
body.page-programs,
body.page-opportunities,
body.page-contact,
body.page-visit {
  background: var(--panel-dark);
  color: var(--text-light);
}

.onview-inner {
  max-width: 700px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 55px;
}

.onview-title {
  font-size: 3.25rem;
  line-height: 1.12;
  margin-bottom: 170px;
}

.event-details.copy-sized {
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 70px;
}

.event-details.copy-sized p {
  margin-bottom: 34px;
}

.read-more {
  margin-top: auto;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-weight: 400;
}

.programs-inner {
  padding-bottom: 55px;
}

.programs-copy h2 {
  text-align: left;
}

.programs-copy a,
.event-details a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1024px) {
  .onview-title {
    font-size: 2.85rem;
    margin-bottom: 120px;
  }
}

@media (max-width: 768px) {
  .onview-inner,
  .programs-inner {
    padding-bottom: 45px;
  }

  .onview-title {
    font-size: 2.2rem;
    margin-bottom: 80px;
  }

  .event-details.copy-sized {
    font-size: 0.98rem;
    line-height: 1.8;
    margin-bottom: 50px;
  }

  .event-details.copy-sized p {
    margin-bottom: 24px;
  }

  .read-more {
    font-size: 1rem;
  }
}