.portfolio { color: #f4f7fb; background: #080d14; padding-top: 7rem; }
.portfolio .kicker { color: #91b8f5; }
.portfolio-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.portfolio-heading h2 { font-size: clamp(2.6rem, 5.4vw, 5.6rem); }
.portfolio-heading > p { max-width: 35rem; margin: 0 0 .6rem; color: #aeb8c8; font-size: 1.05rem; line-height: 1.7; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem 2rem; }
.portfolio-project { min-width: 0; }
.portfolio-project--feature { grid-column: 1 / -1; }
.portfolio-cover { position: relative; display: block; isolation: isolate; height: clamp(28rem, 39vw, 39rem); overflow: hidden; color: #fff; text-decoration: none; border-radius: 1.25rem; }
.portfolio-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,.75,.18,1); }
.portfolio-cover:focus-visible { outline: 3px solid #72a5ff; outline-offset: 5px; }
.portfolio-cover__top { position: absolute; z-index: 2; top: 2rem; left: 2rem; right: 2rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; font-size: .75rem; letter-spacing: .04em; }
.portfolio-cover__top > span:first-child { font-size: 1.15rem; font-weight: 600; }
.portfolio-cover__top > span:last-child { font-size: .65rem; }
.portfolio-cover__label { position: absolute; z-index: 2; bottom: 2rem; left: 2rem; right: 6rem; font: .75rem/1.5 "Manrope", sans-serif; letter-spacing: .06em; }
.portfolio-open { position: absolute; z-index: 2; bottom: 1.25rem; right: 1.25rem; width: 3.3rem; height: 3.3rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.5rem; transition: background .25s, color .25s, transform .3s; }
.portfolio-cover--northstar { height: clamp(29rem, 43vw, 44rem); background: #234452; }
.portfolio-cover--northstar::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg,rgba(6,25,35,.65),rgba(6,25,35,.08)),linear-gradient(0deg,rgba(6,25,35,.5),transparent 40%); }
.portfolio-cover__northstar { position: absolute; z-index: 1; inset: 28% auto auto 6%; display: flex; flex-direction: column; font: 400 clamp(3rem, 6.8vw, 7.4rem)/1.02 Georgia, serif; letter-spacing: -.055em; }
.portfolio-cover__northstar em { font-weight: 400; color: #d7e9ee; }
.portfolio-meta { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; padding: 1.5rem .1rem 0; }
.portfolio-meta p { margin: 0 0 .65rem; font-size: .9rem; font-weight: 600; }
.portfolio-meta p span { color: #aeb8c8; font-weight: 400; }
.portfolio-meta h3 { margin: 0; font: 500 clamp(1.3rem, 1.8vw, 2rem)/1.25 "Manrope", sans-serif; letter-spacing: -.045em; }
.portfolio-links { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; }
.portfolio-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.portfolio-links a + a { color: #aeb8c8; }
.portfolio-project:not(.portfolio-project--feature) .portfolio-meta { flex-direction: column; gap: .5rem; }
.portfolio-cover--signal { background: #141717; border: 1px solid #343d36; }
.signal-wordmark { font-family: "Manrope",sans-serif; font-weight: 700; letter-spacing: -.07em; text-decoration: none; }
.signal-wordmark > span { color: #d7ff62; margin-left: .2rem; }
.portfolio-cover__signal { position: absolute; top: 20%; left: 7%; right: 5%; display: flex; flex-direction: column; font: 600 clamp(2.3rem,4vw,4.8rem)/1.04 "Manrope",sans-serif; letter-spacing: -.075em; }
.portfolio-cover__signal strong { font-weight: 500; color: #d7ff62; }
.signal-mini { position: absolute; top: 49%; left: 8%; right: 8%; padding: 1rem 1.2rem; border: 1px solid #586252; border-radius: .6rem; background: #232923; box-shadow: 0 2rem 4rem #0007; transform: perspective(900px) rotateX(12deg) rotateZ(-3deg); transition: transform .8s; }
.signal-mini > div:first-child { display: flex; justify-content: space-between; gap: 1rem; font: .58rem ui-monospace,monospace; color: #a7b5a2; }
.signal-mini i { color: #d7ff62; font-style: normal; }
.signal-mini > strong { display: block; margin: .9rem 0; font-size: 1.3rem; font-weight: 500; letter-spacing: -.04em; }
.signal-mini__line { display: block; height: .3rem; margin: .4rem 0; width: 87%; background: #6a796455; }
.signal-mini__line + .signal-mini__line { width: 64%; }
.signal-mini__sources { display: flex; gap: .5rem; margin-top: .8rem; }
.signal-mini__sources span { padding: .4rem; background: #d7ff6212; border: 1px solid #d7ff6233; font-size: .48rem; color: #d7ff62; }
.portfolio-cover--aperture { color: #18191b; background: #dadbdd; }
.portfolio-cover--aperture > img { object-position: 60% center; }
.portfolio-cover__aperture { position: absolute; z-index: 1; top: 18%; left: 6%; font: 700 clamp(3rem,5.5vw,6.5rem)/.91 "Manrope",sans-serif; letter-spacing: -.09em; }
.portfolio-cover__aperture em { font-style: normal; }
.portfolio-disclosure { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid #ffffff20; color: #aeb8c8; max-width: 52rem; font-size: .85rem; line-height: 1.65; }
@media (hover:hover) and (pointer:fine) {
  .portfolio-cover:hover > img { transform: scale(1.045); }
  .portfolio-cover:hover .portfolio-open { color: #080d14; background: #f4f7fb; transform: rotate(45deg); }
  .portfolio-cover--aperture:hover .portfolio-open { background: #18191b; color: white; }
  .portfolio-cover:hover .signal-mini { transform: perspective(900px) rotateX(0deg) rotateZ(0deg) translateY(-8px); }
}
@media (max-width: 860px) {
  .portfolio-heading { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 3rem; }
  .portfolio-cover,.portfolio-cover--northstar { height: clamp(26rem,90vw,36rem); }
  .portfolio-cover__top { top: 1.25rem; left: 1.25rem; right: 1.25rem; }
  .portfolio-cover__top > span:last-child { max-width: 12ch; text-align: right; }
  .portfolio-cover__label { left: 1.25rem; bottom: 1.7rem; font-size: .65rem; }
  .portfolio-cover__northstar { left: 7%; top: 29%; font-size: clamp(2.6rem,9vw,5rem); }
  .portfolio-cover__signal { font-size: clamp(2.5rem,10vw,5rem); }
  .portfolio-cover__aperture { font-size: clamp(3.4rem,14vw,6rem); }
  .portfolio-meta { flex-direction: column; gap: .5rem; }
  .portfolio-links { flex-direction: row; flex-wrap: wrap; column-gap: 1.25rem; }
  .signal-mini { top: 49%; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-cover > img,.portfolio-open,.signal-mini { transition: none; transform: none !important; }
}