#portfolio-hero{
      --ink: #16151b;
      --paper: #f9f9fb;
      --purple: #7151ba;
      --lime: #d8ff3f;
      --side-space: var(--portfolio-gutter);
    }

    #portfolio-hero{
      scroll-behavior: smooth;
      background: var(--ink);
    }

    #portfolio-hero{
      min-width: 320px;
      margin: 0;
      overflow-x: hidden;
      color: var(--paper);
      background: var(--ink);
      font-family:var(--font-ui);
    }

    #portfolio-hero a{ color: inherit; text-decoration: none; }
    #portfolio-hero button{ font: inherit; }

    #portfolio-hero .hero{
      position: relative;
      z-index: 1;
      height: 100vh;
      min-height: 620px;
      overflow: hidden;
      isolation: isolate;
      background: #000;
    }

    #portfolio-hero .hero::before{
      content: none;
    }

    #portfolio-hero .hero::after{
      content: none;
    }

    #portfolio-hero .wordmark{
      position: absolute;
      z-index: 1;
      top: clamp(112px, 17vh, 175px);
      left: 50%;
      width: 100%;
      margin: 0;
      color: #fff;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(68px, 14.2vw, 232px);
      font-stretch: condensed;
      font-weight: 900;
      letter-spacing: 0.038em;
      line-height: 0.78;
      text-align: center;
      transform: translate(-50%, 30px);
      opacity: 0;
      white-space: nowrap;
    }

    #portfolio-hero .is-ready .wordmark{ animation: hero-title-in 900ms cubic-bezier(.2, .72, .25, 1) 70ms forwards; }

    #portfolio-hero .media-stage{
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
    }

    #portfolio-hero .portrait-video{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: none;
      transform: scale(1);
      transform-origin: center;

      opacity: 1;
    }

    #portfolio-hero .is-ready .portrait-video{ animation: hero-video-in 1.2s cubic-bezier(.2, .75, .25, 1) 120ms forwards; }

    #portfolio-hero .media-caption{
      position: absolute;
      z-index: 3;
      top: 56%;
      left: var(--side-space);
      max-width: 255px;
      color: #fff;
      opacity: 0;
      transform: translateY(14px);
    }

    #portfolio-hero .is-ready .media-caption{ animation: hero-copy-in 620ms ease-out 540ms forwards; }

    #portfolio-hero .eyebrow{
      display: block;
      margin-bottom: 11px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.095em;
      line-height: 1.25;
    }

    #portfolio-hero .positioning-copy{
      margin: 0;
      font-size: clamp(16px, 1.27vw, 20px);
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.45;
    }

    #portfolio-hero .profile{
      position: absolute;
      z-index: 3;
      top: 48.5%;
      right: var(--side-space);
      display: flex;
      gap: 17px;
      width: min(265px, 24vw);
      color: #fff;
    }

    #portfolio-hero .profile::before{
      display: block;
      width: 2px;
      flex: 0 0 2px;
      align-self: stretch;
      content: "";
      background: #fff;
      transform: scaleY(0);
      transform-origin: top;
    }

    #portfolio-hero .is-ready .profile::before{ animation: hero-line-in 570ms cubic-bezier(.2, .8, .3, 1) 720ms forwards; }

    #portfolio-hero .profile-list{
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    #portfolio-hero .profile-row{
      margin: 0;
      color: rgb(255 255 255 / 88%);
      font-size: 12px;
      line-height: 1.42;
      opacity: 0;
      transform: translateY(12px);
    }

    #portfolio-hero .profile-row span{
      display: inline-block;
      width: 38px;
      color: rgb(255 255 255 / 64%);
    }

    #portfolio-hero .is-ready .profile-row{ animation: hero-profile-in 460ms ease-out forwards; }
    #portfolio-hero .is-ready .profile-row:nth-child(1){ animation-delay: 870ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(2){ animation-delay: 950ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(3){ animation-delay: 1030ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(4){ animation-delay: 1110ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(5){ animation-delay: 1190ms; }

    #portfolio-hero .hero-actions{
      position: absolute;
      z-index: 4;
      bottom: clamp(27px, 5.3vh, 55px);
      left: var(--side-space);
      display: flex;
      gap: 9px;
      opacity: 0;
      transform: translateY(10px);
    }

    #portfolio-hero .is-ready .hero-actions{ animation: hero-copy-in 520ms ease-out 800ms forwards; }

    #portfolio-hero .hero-button{
      display: inline-flex;
      min-height: 35px;
      align-items: center;
      justify-content: center;
      border: 1px solid #fff;
      border-radius: 999px;
      padding: 0 15px;
      color: #fff;
      background: transparent;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    }

    #portfolio-hero .hero-button:hover, #portfolio-hero .hero-button:focus-visible{
      background: #fff;
      color: #343749;
      transform: translateY(-2px);
    }

    #portfolio-hero .hero-footer{
      position: absolute;
      z-index: 4;
      right: var(--side-space);
      bottom: clamp(26px, 5.3vh, 55px);
      margin: 0;
      color: rgb(255 255 255 / 82%);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.13em;
      line-height: 1.7;
      text-align: right;
      opacity: 0;
    }

    #portfolio-hero .is-ready .hero-footer{ animation: hero-footer-in 520ms ease-out 910ms forwards; }

    #portfolio-hero .hero::before{
      position: absolute;
      z-index: 2;
      inset: 0;
      content: "";
      pointer-events: none;
      background: radial-gradient(circle at 50% 52%, rgb(18 42 58 / 10%), rgb(0 0 0 / 72%) 72%);
      opacity: 1;
      animation: hero-entry-wash 460ms cubic-bezier(.4, 0, 1, 1) 40ms forwards;
    }

    #portfolio-hero .hero::after{
      position: absolute;
      z-index: 1;
      inset: 0;
      content: "";
      pointer-events: none;
      background: radial-gradient(circle at 50% 58%, transparent 18%, rgb(0 0 0 / 18%) 82%), linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 32%));
      opacity: .82;
    }

    #portfolio-hero .is-ready .portrait-video{
      animation: hero-video-in 1s cubic-bezier(.16, 1, .3, 1) 90ms forwards;
    }

    #portfolio-hero .is-ready .wordmark{
      animation: hero-title-in 760ms cubic-bezier(.16, 1, .3, 1) 80ms forwards;
    }

    #portfolio-hero .is-ready .media-caption{ animation-delay: 360ms; }
    #portfolio-hero .is-ready .profile::before{ animation-delay: 520ms; }
    #portfolio-hero .is-ready .profile-row{ animation-delay: 620ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(2){ animation-delay: 690ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(3){ animation-delay: 760ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(4){ animation-delay: 830ms; }
    #portfolio-hero .is-ready .profile-row:nth-child(5){ animation-delay: 900ms; }
    #portfolio-hero .is-ready .hero-actions{ animation-delay: 650ms; }
    #portfolio-hero .is-ready .hero-footer{ animation-delay: 760ms; }

    #portfolio-hero .source-profile-screen{
      position: relative;
      z-index: 2;
      padding: var(--portfolio-space-section) var(--side-space) clamp(80px, 10vw, 160px);
      background: #f6f4ef;
    }

    #portfolio-hero #hero-source-profile-host{
      display: block;
      width: min(var(--portfolio-content-max), 100%);
      margin: 0 auto;
    }

    #portfolio-hero .source-profile-screen .dylan-side-rail, #portfolio-hero .source-profile-screen .mobile-system-nav{ display: none !important; }

    #portfolio-hero .curious-overlay{
      position: fixed;
      z-index: 100;
      inset: 0;
      overflow: hidden;
      visibility: hidden;
      background: #f4f2ee;
      color: #131313;
      opacity: 0;
      transform: translateY(104%);
      transition: transform 720ms cubic-bezier(.72, 0, .18, 1), opacity 260ms ease, visibility 0s linear 720ms;
    }

    #portfolio-hero .curious-overlay.is-open{
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      transition: transform 720ms cubic-bezier(.72, 0, .18, 1), opacity 260ms ease;
    }

    #portfolio-hero .curious-overlay::before{
      position: absolute;
      inset: 0;
      content: "";
      pointer-events: none;
      background-image: radial-gradient(rgb(19 19 19 / 15%) .55px, transparent .65px);
      background-size: 7px 7px;
      opacity: .23;
    }

    #portfolio-hero .curious-scroll{
      position: relative;
      z-index: 1;
      height: 100%;
      overflow: auto;
      overscroll-behavior: contain;
    }

    #portfolio-hero .curious-universe{
      position: relative;
      width: 100%;
      min-width: 980px;
      min-height: max(760px, 100vh);
      overflow: hidden;
      isolation: isolate;
    }

    #portfolio-hero .curious-close{
      position: fixed;
      z-index: 12;
      top: 22px;
      right: clamp(20px, 3vw, 46px);
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 2px solid #151515;
      border-radius: 50%;
      padding: 0 0 3px;
      color: #151515;
      background: #f4f2ee;
      font-size: 28px;
      font-weight: 400;
      line-height: 1;
      cursor: pointer;
      transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }

    #portfolio-hero .curious-close:hover, #portfolio-hero .curious-close:focus-visible{
      color: #f4f2ee;
      background: #151515;
      transform: rotate(90deg);
    }

    #portfolio-hero .curious-heading{
      position: relative;
      z-index: 5;
      display: grid;
      justify-items: center;
      padding-top: clamp(48px, 6.4vh, 72px);
      text-align: center;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 430ms ease 310ms, transform 600ms cubic-bezier(.2, .8, .2, 1) 310ms;
    }

    #portfolio-hero .curious-overlay.is-open .curious-heading{
      opacity: 1;
      transform: translateY(0);
    }

    #portfolio-hero .curious-eyebrow{
      margin: 0;
      font-family:var(--font-ui);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
      line-height: 1.2;
    }

    #portfolio-hero .curious-heading h2{
      margin: 7px 0 0;
      font-size: clamp(68px, 7.6vw, 138px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: .88;
    }

    #portfolio-hero .curious-heading p:last-child{
      margin: 12px 0 0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    #portfolio-hero .curious-character-wrap{
      position: absolute;
      z-index: 4;
      bottom: -18px;
      left: 50%;
      width: clamp(238px, 22vw, 370px);
      aspect-ratio: 9 / 16;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 450ms ease 510ms, transform 680ms cubic-bezier(.2, .8, .2, 1) 500ms;
    }

    #portfolio-hero .curious-overlay.is-open .curious-character-wrap{
      opacity: 1;
      transform: translate(-50%, -4px);
    }

    #portfolio-hero .curious-character-wrap::after{
      position: absolute;
      right: 8%;
      bottom: 3%;
      left: 8%;
      height: 7%;
      content: "";
      border-radius: 50%;
      background: rgb(19 19 19 / 14%);
      filter: blur(12px);
    }

    #portfolio-hero .curious-character{
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      mix-blend-mode: multiply;
      transition: opacity 170ms ease, transform 250ms ease;
    }

    #portfolio-hero .curious-card{
      position: absolute;
      z-index: 3;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      width: clamp(206px, 18.2vw, 296px);
      height: clamp(148px, 13.1vw, 208px);
      overflow: hidden;
      border: 5px solid #151515;
      border-radius: 3px;
      padding: 0;
      color: #f6f4ef;
      background: #151515;
      box-shadow: 7px 8px 0 rgb(19 19 19 / 18%);
      cursor: pointer;
      opacity: 0;
      transform: rotate(var(--tilt)) translateY(48px) scale(.94);
      transition: opacity 430ms ease var(--delay), transform 520ms cubic-bezier(.2, .8, .2, 1) var(--delay), box-shadow 220ms ease, z-index 0s linear 220ms;
    }

    #portfolio-hero .curious-overlay.is-open .curious-card{
      opacity: 1;
      transform: rotate(var(--tilt)) translateY(0) scale(1);
    }

    #portfolio-hero .curious-card:hover, #portfolio-hero .curious-card:focus-visible, #portfolio-hero .curious-card.is-active{
      z-index: 8;
      outline: none;
      box-shadow: 12px 16px 0 rgb(19 19 19 / 22%);
      transform: rotate(var(--tilt)) translateY(-17px) scale(1.05);
      transition-delay: 0s;
    }

    #portfolio-hero .curious-card[data-card="auto"]{ top: 47%; left: -4.4vw; --tilt: -10deg; --delay: 450ms; }
    #portfolio-hero .curious-card[data-card="story"]{ top: 34%; left: 17%; --tilt: -8deg; --delay: 520ms; }
    #portfolio-hero .curious-card[data-card="pixel"]{ top: 31%; left: 50%; --tilt: 1.6deg; --delay: 590ms; transform-origin: center; margin-left: calc(clamp(206px, 18.2vw, 296px) / -2); }
    #portfolio-hero .curious-card[data-card="web"]{ top: 34%; right: 17%; --tilt: 9deg; --delay: 660ms; }
    #portfolio-hero .curious-card[data-card="architecture"]{ top: 49%; right: -4.2vw; --tilt: 12deg; --delay: 730ms; }

    #portfolio-hero .curious-card-media{
      position: relative;
      min-height: 0;
      overflow: hidden;
      background: #fefefe;
    }

    #portfolio-hero .curious-card-video{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      background: #dfe7ec;
    }

    #portfolio-hero .curious-card-caption{
      display: grid;
      gap: 3px;
      min-height: 48px;
      padding: 8px 10px 9px;
      color: #f8f7f2;
      background: #151515;
      text-align: left;
    }

    #portfolio-hero .curious-card-caption small{
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .12em;
      line-height: 1;
      opacity: .6;
    }

    #portfolio-hero .curious-card-caption strong{
      font-size: clamp(12px, 1.04vw, 16px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1.1;
    }

    #portfolio-hero .auto-preview{
      position: relative;
      display: grid;
      grid-template-columns: 25% 1fr;
      width: 100%;
      height: 100%;
      color: #18243b;
      background: #eaf0ff;
      font-family:var(--font-ui);
    }

    #portfolio-hero .auto-preview::before{
      position: absolute;
      top: 11%;
      right: 10%;
      width: 22%;
      height: 7%;
      content: "";
      border-radius: 99px;
      background: #c2f03d;
    }

    #portfolio-hero .auto-sidebar{ padding: 13% 12%; background: #18243b; }
    #portfolio-hero .auto-sidebar i{ display: block; height: 4px; margin-bottom: 10px; border-radius: 2px; background: rgb(255 255 255 / 48%); }
    #portfolio-hero .auto-sidebar i:first-child{ width: 86%; background: #c2f03d; }
    #portfolio-hero .auto-sidebar i:nth-child(2){ width: 65%; }
    #portfolio-hero .auto-sidebar i:nth-child(3){ width: 78%; }
    #portfolio-hero .auto-sidebar i:last-child{ width: 52%; }

    #portfolio-hero .auto-flow{ position: relative; padding: 18% 9% 0; }
    #portfolio-hero .auto-flow b{ position: absolute; display: block; width: 22%; height: 24%; border: 2px solid #18243b; border-radius: 7px; background: #fff; }
    #portfolio-hero .auto-flow b::after{ position: absolute; top: 50%; right: -31%; width: 28%; height: 2px; content: ""; background: #18243b; }
    #portfolio-hero .auto-flow b:nth-child(1){ top: 27%; left: 11%; background: #ffd84f; }
    #portfolio-hero .auto-flow b:nth-child(2){ top: 47%; left: 42%; background: #7fd3ff; }
    #portfolio-hero .auto-flow b:nth-child(3){ top: 17%; right: 7%; background: #ff7494; }
    #portfolio-hero .auto-flow b:nth-child(3)::after{ display: none; }

    #portfolio-hero .architecture-preview{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #29205c;
    }

    #portfolio-hero .architecture-preview::before, #portfolio-hero .architecture-preview::after{
      position: absolute;
      content: "";
      border: 2px solid #f3ff85;
      border-radius: 50%;
    }

    #portfolio-hero .architecture-preview::before{ inset: 12% 25%; }
    #portfolio-hero .architecture-preview::after{ inset: 28% 8%; border-color: #ffbfdf; }
    #portfolio-hero .architecture-core{
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      display: grid;
      width: 30%;
      aspect-ratio: 1;
      place-items: center;
      border: 3px solid #171326;
      border-radius: 50%;
      background: #8df0ff;
      color: #171326;
      font-size: clamp(11px, 1.1vw, 17px);
      font-weight: 900;
      transform: translate(-50%, -50%);
    }

    #portfolio-hero .architecture-node{
      position: absolute;
      z-index: 2;
      display: block;
      width: 21%;
      height: 17%;
      border: 2px solid #171326;
      border-radius: 4px;
      background: #ff748d;
    }

    #portfolio-hero .architecture-node:nth-of-type(2){ top: 16%; left: 12%; background: #ffd84f; }
    #portfolio-hero .architecture-node:nth-of-type(3){ top: 18%; right: 10%; background: #c4f13e; }
    #portfolio-hero .architecture-node:nth-of-type(4){ bottom: 12%; left: 16%; background: #c8abff; }
    #portfolio-hero .architecture-node:nth-of-type(5){ right: 12%; bottom: 14%; background: #ffb13e; }

    #portfolio-hero .curious-tip{
      position: absolute;
      z-index: 6;
      bottom: 21px;
      left: 50%;
      margin: 0;
      border-bottom: 2px solid #151515;
      padding: 0 8px 5px;
      font-size: 12px;
      font-weight: 900;
      transform: translateX(-50%);
      white-space: nowrap;
      opacity: 0;
      transition: opacity 430ms ease 880ms;
    }

    #portfolio-hero .curious-overlay.is-open .curious-tip{ opacity: 1; }

    #portfolio-hero body.universe-open{ overflow: hidden; }

    #portfolio-hero .universe-section{
      position: relative;
      z-index: 2;
      padding: var(--portfolio-space-section) var(--side-space) clamp(96px, 10vw, 164px);
      color: #131313;
      background: #f6f4ef;
    }

    #portfolio-hero .universe-section::before{
      position: absolute;
      inset: 0;
      content: "";
      pointer-events: none;
      background-image: radial-gradient(rgb(19 19 19 / 13%) .55px, transparent .65px);
      background-size: 7px 7px;
      opacity: .18;
    }

    #portfolio-hero .universe-inner{
      position: relative;
      z-index: 1;
      width: min(var(--portfolio-content-max), 100%);
      min-height: clamp(1040px, 80vw, 1220px);
      margin: 0 auto;
      isolation: isolate;
    }

    #portfolio-hero .universe-heading{
      position: relative;
      z-index: 5;
      display: grid;
      justify-items: center;
      padding-top: 2px;
      text-align: center;
    }

    #portfolio-hero .universe-eyebrow{
      margin: 0;
      font-family:var(--font-ui);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
      line-height: 1.2;
    }

    #portfolio-hero .universe-heading h2{
      margin: 7px 0 0;
      font-size: clamp(68px, 7.6vw, 138px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: .88;
    }

    #portfolio-hero .universe-heading p:last-child{
      margin: 12px 0 0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    #portfolio-hero .universe-character-wrap{
      position: absolute;
      z-index: 2;
      top: clamp(540px, 46vw, 620px);
      left: 50%;
      width: clamp(214px, 20vw, 312px);
      aspect-ratio: 9 / 16;
      transform: translateX(-50%);
    }

    #portfolio-hero .universe-character-wrap::after{
      position: absolute;
      right: 8%;
      bottom: 3%;
      left: 8%;
      height: 7%;
      content: "";
      border-radius: 50%;
      background: rgb(19 19 19 / 14%);
      filter: blur(12px);
    }

    #portfolio-hero .universe-character{
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      mix-blend-mode: normal;
      isolation: isolate;
    }

    #portfolio-hero .universe-character-frame{
      position: absolute;
      inset: 0;
      display: block;
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: contain;
      opacity: 1;
      pointer-events: none;
      filter: blur(0);
      transform: translate3d(0, 0, 0) scale(1);
      transition: opacity 120ms ease, filter 120ms ease, transform 180ms ease;
      will-change: opacity, filter, transform;
    }

    #portfolio-hero .universe-character-frame.is-changing{
      opacity: .78;
      filter: blur(1px);
      transform: translate3d(0, 1px, 0) scale(.994);
    }

    #portfolio-hero .universe-card{
      position: absolute;
      z-index: 3;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      width: clamp(202px, 17.1vw, 272px);
      height: clamp(146px, 12vw, 190px);
      overflow: hidden;
      border: 5px solid #151515;
      border-radius: 3px;
      padding: 0;
      color: #f6f4ef;
      background: #151515;
      box-shadow: 7px 8px 0 rgb(19 19 19 / 18%);
      cursor: pointer;
      transform: rotate(var(--tilt));
      transition: transform 220ms ease, box-shadow 220ms ease, z-index 0s linear 220ms;
    }

    #portfolio-hero .universe-card:hover, #portfolio-hero .universe-card:focus-visible, #portfolio-hero .universe-card.is-active{
      z-index: 6;
      outline: none;
      box-shadow: 12px 16px 0 rgb(19 19 19 / 22%);
      transform: rotate(var(--tilt)) translateY(-15px) scale(1.04);
    }

    #portfolio-hero .universe-card[data-card="auto"]{ top: clamp(330px, 28vw, 382px); left: -1.7%; --tilt: -10deg; }
    #portfolio-hero .universe-card[data-card="story"]{ top: clamp(234px, 20vw, 268px); left: 15%; --tilt: -8deg; }
    #portfolio-hero .universe-card[data-card="pixel"]{ top: clamp(215px, 18vw, 246px); left: 50%; --tilt: 1.6deg; margin-left: calc(clamp(202px, 17.1vw, 272px) / -2); }
    #portfolio-hero .universe-card[data-card="web"]{ top: clamp(234px, 20vw, 268px); right: 15%; --tilt: 9deg; }
    #portfolio-hero .universe-card[data-card="architecture"]{ top: clamp(330px, 28vw, 382px); right: -1.7%; --tilt: 12deg; }

    #portfolio-hero .universe-card-media{
      position: relative;
      min-height: 0;
      overflow: hidden;
      background: #fefefe;
    }

    #portfolio-hero .universe-card-video{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      background: #dfe7ec;
    }

    #portfolio-hero .universe-card-caption{
      display: grid;
      gap: 3px;
      min-height: 48px;
      padding: 8px 10px 9px;
      color: #f8f7f2;
      background: #151515;
      text-align: left;
    }

    #portfolio-hero .universe-card-caption small{
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .12em;
      line-height: 1;
      opacity: .6;
    }

    #portfolio-hero .universe-card-caption strong{
      font-size: clamp(12px, 1.04vw, 16px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1.1;
    }

    #portfolio-hero .universe-tip{
      position: absolute;
      z-index: 6;
      bottom: 0;
      left: 50%;
      margin: 0;
      border-bottom: 2px solid #151515;
      padding: 0 8px 5px;
      font-size: 12px;
      font-weight: 900;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    @keyframes hero-entry-wash { to { opacity: 0; } }
    @keyframes hero-title-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
    @keyframes hero-video-in { from { opacity: .78; filter: blur(3px) brightness(.86); transform: scale(1.035); } to { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); } }
    @keyframes hero-line-in { to { transform: scaleY(1); } }
    @keyframes hero-profile-in { to { opacity: 1; transform: translateY(0); } }
    @keyframes hero-copy-in { to { opacity: 1; transform: translateY(0); } }
    @keyframes hero-footer-in { to { opacity: 1; } }

    @media (prefers-reduced-motion: reduce){
      #portfolio-hero .hero::before{ animation: none; opacity: 0; }
      #portfolio-hero .portrait-video,
      #portfolio-hero .wordmark,
      #portfolio-hero .media-caption,
      #portfolio-hero .profile-row,
      #portfolio-hero .hero-actions,
      #portfolio-hero .hero-footer{ animation: none !important; opacity: 1; transform: none; filter: none; }
      #portfolio-hero .wordmark{ transform: translateX(-50%); }
      #portfolio-hero .profile::before{ transform: scaleY(1); }
      #portfolio-hero .universe-character-frame{ transition: none; }
    }

    @media (max-width: 920px){
      #portfolio-hero .media-caption{ top: 58%; max-width: 225px; }
      #portfolio-hero .profile{ top: 49%; width: 220px; }
      #portfolio-hero .profile-row{ font-size: 11px; }
    }

    @media (max-width: 720px){
      #portfolio-hero .hero{ min-height: 660px; }
      #portfolio-hero .wordmark{
        top: 15.5vh;
        font-size: clamp(48px, 13.4vw, 96px);
        letter-spacing: 0.025em;
      }
      #portfolio-hero .media-stage{
        inset: 0;
      }
      #portfolio-hero .portrait-video{ transform: scale(1); }
      #portfolio-hero .is-ready .portrait-video{ animation-name: hero-video-in; }
      #portfolio-hero .media-caption{
        top: auto;
        bottom: 114px;
        left: var(--side-space);
        max-width: min(265px, calc(100vw - 40px));
      }
      #portfolio-hero .eyebrow{ margin-bottom: 7px; font-size: 10px; }
      #portfolio-hero .positioning-copy{ font-size: 15px; }
      #portfolio-hero .profile{
        top: auto;
        right: var(--side-space);
        bottom: 181px;
        width: min(190px, 47vw);
        gap: 10px;
      }
      #portfolio-hero .profile-list{ gap: 4px; }
      #portfolio-hero .profile-row{ font-size: 9px; line-height: 1.35; }
      #portfolio-hero .profile-row span{ width: 30px; }
      #portfolio-hero .hero-actions{ bottom: 28px; }
      #portfolio-hero .hero-button{ min-height: 33px; padding: 0 13px; font-size: 11px; }
      #portfolio-hero .hero-footer{ right: 20px; bottom: 76px; font-size: 8px; line-height: 1.55; }

      #portfolio-hero .curious-universe{ min-width: 0; min-height: 930px; }
      #portfolio-hero .curious-heading{ padding: 58px 54px 0; }
      #portfolio-hero .curious-eyebrow{ font-size: 8px; line-height: 1.35; }
      #portfolio-hero .curious-heading h2{ margin-top: 9px; font-size: clamp(50px, 16vw, 72px); line-height: .92; }
      #portfolio-hero .curious-heading p:last-child{ margin-top: 9px; font-size: 10px; line-height: 1.45; }
      #portfolio-hero .curious-close{ top: 17px; right: 17px; width: 33px; height: 33px; border-width: 1.5px; font-size: 23px; }
      #portfolio-hero .curious-character-wrap{ top: 340px; bottom: auto; width: min(53vw, 245px); }
      #portfolio-hero .curious-card{ width: 164px; height: 122px; border-width: 3px; box-shadow: 4px 5px 0 rgb(19 19 19 / 18%); }
      #portfolio-hero .curious-card:hover, #portfolio-hero .curious-card:focus-visible, #portfolio-hero .curious-card.is-active{ box-shadow: 7px 8px 0 rgb(19 19 19 / 22%); transform: rotate(var(--tilt)) translateY(-8px) scale(1.025); }
      #portfolio-hero .curious-card[data-card="auto"]{ top: 305px; left: -32px; --tilt: -9deg; }
      #portfolio-hero .curious-card[data-card="story"]{ top: 422px; left: 6px; --tilt: -6deg; }
      #portfolio-hero .curious-card[data-card="pixel"]{ top: 292px; right: -12px; left: auto; margin-left: 0; --tilt: 6deg; }
      #portfolio-hero .curious-card[data-card="web"]{ top: 544px; right: -33px; --tilt: 11deg; }
      #portfolio-hero .curious-card[data-card="architecture"]{ top: 680px; right: 44px; left: auto; --tilt: -5deg; }
      #portfolio-hero .curious-card-caption{ min-height: 37px; padding: 6px 7px 7px; }
      #portfolio-hero .curious-card-caption small{ font-size: 6px; }
      #portfolio-hero .curious-card-caption strong{ font-size: 10px; }
      #portfolio-hero .curious-tip{ bottom: 23px; font-size: 10px; }

      #portfolio-hero .universe-section{ padding: 66px var(--side-space) 84px; }
      #portfolio-hero .universe-inner{ min-height: 970px; }
      #portfolio-hero .universe-heading{ padding: 0 30px; }
      #portfolio-hero .universe-eyebrow{ font-size: 8px; line-height: 1.35; }
      #portfolio-hero .universe-heading h2{ margin-top: 9px; font-size: clamp(50px, 16vw, 72px); line-height: .92; }
      #portfolio-hero .universe-heading p:last-child{ margin-top: 9px; font-size: 10px; line-height: 1.45; }
      #portfolio-hero .universe-character-wrap{ top: 500px; width: min(48vw, 230px); }
      #portfolio-hero .universe-card{ width: 164px; height: 122px; border-width: 3px; box-shadow: 4px 5px 0 rgb(19 19 19 / 18%); }
      #portfolio-hero .universe-card:hover, #portfolio-hero .universe-card:focus-visible, #portfolio-hero .universe-card.is-active{ box-shadow: 7px 8px 0 rgb(19 19 19 / 22%); transform: rotate(var(--tilt)) translateY(-8px) scale(1.025); }
      #portfolio-hero .universe-card[data-card="auto"]{ top: 355px; left: -31px; --tilt: -9deg; }
      #portfolio-hero .universe-card[data-card="story"]{ top: 481px; left: 4px; --tilt: -6deg; }
      #portfolio-hero .universe-card[data-card="pixel"]{ top: 324px; right: -10px; left: auto; margin-left: 0; --tilt: 6deg; }
      #portfolio-hero .universe-card[data-card="web"]{ top: 603px; right: -34px; --tilt: 11deg; }
      #portfolio-hero .universe-card[data-card="architecture"]{ top: 712px; right: 42px; left: auto; --tilt: -5deg; }
      #portfolio-hero .universe-card-caption{ min-height: 37px; padding: 6px 7px 7px; }
      #portfolio-hero .universe-card-caption small{ font-size: 6px; }
      #portfolio-hero .universe-card-caption strong{ font-size: 10px; }
      #portfolio-hero .universe-tip{ bottom: 0; font-size: 10px; }
    }

    @media (max-height: 700px) and (min-width: 721px){
      #portfolio-hero .media-caption{ top: 54%; }
      #portfolio-hero .profile{ top: 45%; }
      #portfolio-hero .wordmark{ top: 19vh; }
    }

    @media (prefers-reduced-motion: reduce){
      #portfolio-hero{ scroll-behavior: auto; }
      #portfolio-hero *, #portfolio-hero *::before, #portfolio-hero *::after{ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    }