/* =========================================================
   PROJECTS — W5
   Portals for established projects; quieter treatments for
   future and smaller work.
   ========================================================= */

.projects-intro {
   display: grid;
   grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr);
   gap: clamp(42px, 7vw, 105px);
   align-items: center;
   padding: clamp(50px, 5.5vw, 80px) 7% 0
}

.projects-intro__icon {
   width: min(100%, 350px);
   justify-self: center
}

.projects-intro__icon img {
   display: block;
   width: 100%;
   height: auto;
   filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5))
}

.projects-intro h1 {
   margin: .25rem 0 1rem;
   font-family: var(--display);
   font-size: clamp(4.6rem, 9vw, 8.5rem);
   font-weight: 400;
   line-height: .9;
   letter-spacing: -.045em
}

.projects-intro__lead {
   margin: 0 0 1rem;
   color: rgba(255, 255, 255, .9);
   font-size: clamp(1.2rem, 2vw, 1.55rem);
   line-height: 1.55
}

.projects-intro__copy>p:last-child {
   color: rgba(255, 255, 255, .68);
   font-size: 1.05rem;
   line-height: 1.7
}

.projects-intro.ruled-section::after {
   grid-column: 1/-1;
   justify-self: center;
   width: min(1040px, 88%);
   margin: clamp(34px, 4vw, 54px) auto 0
}

.portal-section {
   padding: clamp(48px, 5vw, 76px) 5% 0
}

.section-heading {
   text-align: center;
   margin: 0 auto clamp(48px, 6vw, 76px)
}

.section-heading h2,
.future-heading h2,
.more-heading h2,
.project-desk__heading h2 {
   margin: .25rem 0 0;
   font-family: var(--display);
   font-size: clamp(2.8rem, 4.8vw, 4.8rem);
   font-weight: 400;
   line-height: 1
}

.portal-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(34px, 4vw, 68px);
   max-width: 1270px;
   margin: 0 auto
}

.project-portal {
   text-align: center
}

.portal {
   position: relative;
   display: block;
   width: min(100%, 370px);
   aspect-ratio: 1/1.18;
   margin: 0 auto;
   text-decoration: none;
   isolation: isolate
}

.portal__scene {
   position: absolute;
   z-index: 0;
   left: 12.5%;
   top: 9%;
   width: 75%;
   aspect-ratio: 1;
   border-radius: 50%;
   display: grid;
   place-items: center;
   overflow: hidden;
   background: radial-gradient(circle at 50% 42%, rgba(255, 102, 0, .12), rgba(12, 12, 12, .92) 58%, #020202 76%);
   box-shadow: inset 0 0 60px rgba(0, 0, 0, .85);
   transition: transform .22s ease, filter .22s ease
}

.portal__scene::before {
   content: "";
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 38px);
   opacity: .7
}

.portal__scene span {
   position: relative;
   color: rgba(255, 255, 255, .16);
   font-family: var(--display);
   font-size: clamp(2rem, 4vw, 4rem);
   letter-spacing: .05em
}

.portal__frame {
   position: absolute;
   z-index: 2;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   pointer-events: none;
   filter: drop-shadow(0 16px 25px rgba(0, 0, 0, .55));
   transition: filter .22s ease
}

.portal:hover .portal__scene,
.portal:focus-visible .portal__scene {
   transform: scale(1.025);
   filter: brightness(1.18)
}

.portal:hover .portal__frame,
.portal:focus-visible .portal__frame {
   filter: drop-shadow(0 0 11px rgba(255, 102, 0, .28)) drop-shadow(0 16px 25px rgba(0, 0, 0, .55))
}

.project-portal__copy {
   max-width: 330px;
   margin: .5rem auto 0
}

.project-portal__copy h3 {
   margin: .25rem 0 .4rem;
   font-family: var(--display);
   font-size: clamp(2.5rem, 3.6vw, 3.9rem);
   font-weight: 400;
   line-height: .95
}

.project-portal__copy h3 a {
   color: #fff;
   text-decoration: none
}

.project-portal__copy h3 a:hover {
   color: var(--orange)
}

.project-portal__copy>p:not(.kicker) {
   margin: 0 0 1rem;
   color: rgba(255, 255, 255, .52)
}

.project-link {
   color: var(--orange);
   font-family: var(--ui);
   font-size: .68rem;
   font-weight: 700;
   letter-spacing: .09em;
   text-decoration: none;
   text-transform: uppercase
}

.project-link:hover {
   text-decoration: underline;
   text-underline-offset: .3em
}

.projects-divider {
   width: min(1040px, 88%);
   height: 1px;
   margin: clamp(65px, 8vw, 118px) auto;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 15%, rgba(255, 102, 0, .58) 50%, rgba(255, 255, 255, .16) 85%, transparent)
}

.future-projects,
.more-projects {
   padding: 0 7%
}

.future-heading,
.more-heading {
   max-width: 850px;
   margin-bottom: clamp(40px, 5vw, 65px)
}

.future-heading>p:last-child,
.more-heading>p:last-child {
   color: rgba(255, 255, 255, .64);
   font-size: 1.05rem;
   line-height: 1.7
}

.future-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border-top: 1px solid rgba(255, 255, 255, .11);
   border-bottom: 1px solid rgba(255, 255, 255, .11)
}

.future-list article {
   min-height: 220px;
   padding: 34px clamp(20px, 3vw, 44px);
   border-right: 1px solid rgba(255, 255, 255, .09)
}

.future-list article:last-child {
   border-right: 0
}

.future-list span {
   color: var(--orange);
   font-family: var(--ui);
   font-size: .61rem;
   font-weight: 700;
   letter-spacing: .12em
}

.future-list h3 {
   margin: 1rem 0 .7rem;
   font-family: var(--display);
   font-size: clamp(2rem, 3vw, 3rem);
   font-weight: 400;
   line-height: 1
}

.future-list p {
   margin: 0;
   color: rgba(255, 255, 255, .52);
   line-height: 1.6
}

.more-projects {
   margin-top: clamp(76px, 9vw, 125px)
}

.more-list {
   border-top: 1px solid rgba(255, 255, 255, .11)
}

.more-list>a {
   display: grid;
   grid-template-columns: 70px minmax(0, 1fr) auto;
   gap: 28px;
   align-items: center;
   padding: 25px 10px;
   color: #fff;
   text-decoration: none;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.more-list__number {
   color: rgba(255, 255, 255, .18);
   font-family: var(--display);
   font-size: 2.1rem
}

.more-list strong {
   display: block;
   font-family: var(--display);
   font-size: clamp(1.7rem, 2.5vw, 2.6rem);
   font-weight: 400
}

.more-list small {
   display: block;
   margin-top: .2rem;
   color: rgba(255, 255, 255, .43);
   font-family: var(--ui);
   font-size: .65rem;
   letter-spacing: .06em
}

.more-list b {
   color: var(--orange);
   font-family: var(--ui);
   font-size: .65rem;
   letter-spacing: .1em
}

.more-list>a:hover strong {
   color: var(--orange)
}

.project-desk {
   margin-top: clamp(78px, 9vw, 135px);
   padding: clamp(60px, 7vw, 100px) 7% 42px;
   background: radial-gradient(ellipse at 50% 20%, rgba(255, 102, 0, .055), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, .018), transparent)
}

.project-desk__heading {
   text-align: center;
   margin-bottom: clamp(44px, 6vw, 72px)
}

.project-desk__links {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent)
}

.project-desk__links>a {
   display: flex;
   min-height: 260px;
   flex-direction: column;
   align-items: center;
   padding: 28px 20px;
   text-align: center;
   color: #fff;
   text-decoration: none;
   background: #070707
}

.project-desk__links img {
   width: min(115px, 48%);
   height: auto;
   margin-bottom: 20px;
   object-fit: contain
}

.project-desk__links span {
   color: var(--orange);
   font-family: var(--ui);
   font-size: .6rem;
   font-weight: 700;
   letter-spacing: .12em
}

.project-desk__links strong {
   margin-top: auto;
   font-family: var(--display);
   font-size: 1.7rem;
   font-weight: 400
}

.project-desk__links small {
   margin-top: .45rem;
   color: rgba(255, 255, 255, .48);
   font-family: var(--body);
   font-size: .88rem;
   line-height: 1.4
}

.project-desk__links>a:hover,
.project-desk__links>a:focus-visible {
   background: linear-gradient(180deg, rgba(255, 102, 0, .07), transparent 75%), #080808
}

.return-top {
   display: flex;
   width: max-content;
   max-width: 100%;
   flex-direction: column;
   align-items: center;
   margin: 42px auto 0;
   color: rgba(255, 255, 255, .55);
   font-family: var(--ui);
   font-size: .62rem;
   font-weight: 700;
   letter-spacing: .12em;
   text-decoration: none
}

.return-top img {
   width: 58px;
   height: auto;
   margin-bottom: 7px
}

.return-top:hover {
   color: var(--orange)
}

@media(max-width:1000px) {
   .portal-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 820px
   }

   .project-portal:last-child {
      grid-column: 1/-1;
      width: min(100%, 390px);
      justify-self: center
   }

   .future-list {
      grid-template-columns: 1fr
   }

   .future-list article {
      min-height: auto;
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .09)
   }

   .future-list article:last-child {
      border-bottom: 0
   }

   .project-desk__links {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:800px) {
   .projects-intro {
      grid-template-columns: 1fr;
      padding-inline: 28px
   }

   .projects-intro__icon {
      width: min(60vw, 270px)
   }

   .projects-intro__copy {
      text-align: center
   }

   .portal-section,
   .future-projects,
   .more-projects,
   .project-desk {
      padding-inline: 28px
   }
}

@media(max-width:620px) {
   .portal-grid {
      grid-template-columns: 1fr
   }

   .project-portal:last-child {
      grid-column: auto;
      width: auto
   }

   .portal {
      width: min(84vw, 350px)
   }

   .more-list>a {
      grid-template-columns: 50px 1fr
   }

   .more-list b {
      grid-column: 2
   }

   .project-desk__links {
      grid-template-columns: 1fr
   }

   .project-desk__links>a {
      min-height: 210px
   }
}