/* The front room: warm light, collectible cards and a visible spatial hierarchy. */
.portal-frame {
  background:
    radial-gradient(ellipse at 45% 45%, #6c4c2726, transparent 60%), #090a0d;
}
.silk-canvas {
  position: fixed;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.65;
}
.portal-constellation {
  opacity: 0.32;
}
.portal-frame::before {
  opacity: 0.2;
}
.portal-frame::after {
  opacity: 0.55;
}
.portal-topbar {
  position: relative;
  z-index: 30;
  min-height: 82px;
  border-bottom: 1px solid #e7c38c0d;
}
.portal-nav-note {
  flex: 1;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.19em;
}
.portal-topbar .portal-contact {
  color: #d6bd97;
  font-size: 11px;
  white-space: nowrap;
}
.portal-topbar .command-trigger {
  gap: 18px;
  padding: 9px 13px;
}
.portal-main {
  height: max(650px, calc(100svh - 195px));
}
.portal-wordmark {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 44%;
  width: 100%;
  translate: -50% -50%;
  text-align: center;
  font: 700 clamp(110px, 20vw, 330px) / 1 var(--font-sans);
  letter-spacing: -0.09em;
  color: #d4b68905;
  white-space: nowrap;
  pointer-events: none;
}
.portal-space-orbit {
  border-color: #e7c38c13;
}
.portal-space-orbit::after {
  border-color: #e7c38c09;
}
.portal-intro {
  top: 48%;
}
.portal-eyebrow {
  color: #baa07c;
  font-size: 8px;
  letter-spacing: 0.12em;
  margin-bottom: 15px;
}
.portal-intro h1 {
  font-size: clamp(28px, 2.9vw, 46px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.045em;
  margin-bottom: 18px;
}
.portal-intro h1 > span:not(.blur-glyph) {
  color: #e8c593;
}
.portal-lede {
  font-size: 11px;
  color: #9c958c;
  margin-bottom: 19px;
}
.portal-craft {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: #bca17d;
  font-size: 8px;
  letter-spacing: 0.18em;
}
.portal-craft i {
  font-style: normal;
  color: #786d5d;
  font-size: 12px;
}
.portal-explore {
  font-size: 8px;
  color: #8a7f6e;
}
.portal-card {
  border-radius: 15px;
  background:
    radial-gradient(
      ellipse at 60% 0%,
      rgba(var(--card-accent), 0.17),
      transparent 85%
    ),
    linear-gradient(145deg, #ffffff04, #ffffff00), #101217;
  box-shadow:
    0 24px 65px #0009,
    0 0 0 4px #ffffff02;
}
.portal-card-index {
  font-size: 6px;
  letter-spacing: 0.14em;
  opacity: 0.65;
}
.portal-card h2 {
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.035em;
}
.portal-card-description {
  color: #b7aaa0;
  font-size: 9px;
}
.portal-card .card-glow {
  border-radius: inherit;
}
.portal-slot-about .portal-art img,
.portal-slot-strengths .portal-art img {
  filter: drop-shadow(0 22px 20px #0008);
}
.portal-slot-work {
  --slot-width: 24%;
}
.portal-work .portal-art {
  inset: -1% -4% 0;
  transform: rotate(-2deg);
}
.portal-work .portal-art img {
  opacity: 0.82;
}
.portal-work h2 {
  font-size: clamp(24px, 2.4vw, 35px);
}
.portal-card.is-selected {
  box-shadow:
    0 36px 95px #000b,
    0 0 35px rgba(var(--card-accent), 0.11);
}
.portal-selection {
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #e7c38c0b;
}
.portal-selection p,
.portal-selection > span {
  font-size: 7px;
  color: #827762;
}
.space-reset {
  pointer-events: auto;
  margin-left: auto;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 9px;
  color: #ae9672;
  border: 1px solid #d9ba882e;
  border-radius: 20px;
  background: #18161999;
}
.space-reset:hover {
  border-color: #d9ba8866;
  color: #e9c796;
}
.portal-footer {
  min-height: 113px;
  align-items: start;
  padding-top: 20px;
}
.portal-footer p {
  display: none;
}
.portal-footer a {
  margin-right: 135px;
}
@media (min-width: 1000px) {
  .portal-card {
    user-select: none;
    -webkit-user-drag: none;
  }
  .effects-on .portal-slot.is-dragging {
    z-index: 30;
    transform: translate3d(
        calc(var(--stage-x, 0px) * var(--depth) + var(--drag-x, 0px)),
        calc(var(--stage-y, 0px) * var(--depth) + var(--drag-y, 0px)),
        90px
      )
      rotate(var(--drag-angle, 0deg)) scale(1.06);
    transition: none;
    cursor: grabbing;
  }
  .effects-on .portal-slot.is-dragging .portal-card {
    transform: none;
    cursor: grabbing;
  }
  .effects-on .portal-slot.is-dragging .portal-float {
    animation-play-state: paused;
  }
  .portal-frame.is-dragging .portal-slot:not(.is-dragging) {
    pointer-events: none;
  }
}
@media (max-width: 999px) {
  .portal-nav-note {
    display: none;
  }
  .portal-topbar {
    min-height: 72px;
    gap: 12px;
  }
  .portal-topbar .command-trigger {
    margin-left: auto;
    gap: 0;
    font-size: 10px;
    padding: 7px 10px;
  }
  .portal-topbar .command-trigger kbd {
    display: none;
  }
  .portal-topbar .portal-contact {
    display: none;
  }
  .portal-main {
    height: 1260px;
  }
  .portal-wordmark {
    top: 18%;
    font-size: 29vw;
  }
  .portal-intro {
    top: 72px;
  }
  .portal-intro h1 {
    font-size: 25px;
    margin-bottom: 10px;
  }
  .portal-eyebrow {
    margin-bottom: 10px;
  }
  .portal-lede {
    font-size: 10px;
    margin-bottom: 11px;
  }
  .portal-craft {
    gap: 11px;
    font-size: 7px;
    margin-bottom: 12px;
  }
  .portal-explore {
    font-size: 7px;
  }
  .portal-slot-about {
    --slot-y: 285px;
  }
  .portal-slot-work {
    --slot-width: 48%;
    --slot-y: 355px;
  }
  .portal-slot-strengths {
    --slot-y: 595px;
  }
  .portal-slot-studio {
    --slot-y: 630px;
  }
  .portal-slot-local-ai {
    --slot-y: 885px;
  }
  .portal-slot-notes {
    --slot-y: 990px;
  }
  .portal-slot-contact {
    --slot-y: 1125px;
  }
  .space-reset {
    display: none;
  }
  .portal-selection {
    padding-block: 14px 0;
  }
  .portal-footer {
    min-height: 0;
    padding-bottom: 125px;
  }
  .portal-footer a {
    margin-right: 0;
  }
  .portal-card h2 {
    font-size: 23px;
  }
  .portal-work h2 {
    font-size: 25px;
  }
}
@media (min-width: 600px) and (max-width: 999px) {
  .portal-main {
    height: 1470px;
  }
  .portal-slot-about {
    --slot-y: 350px;
  }
  .portal-slot-work {
    --slot-y: 425px;
  }
  .portal-slot-strengths {
    --slot-y: 680px;
  }
  .portal-slot-studio {
    --slot-y: 735px;
  }
  .portal-slot-local-ai {
    --slot-y: 1000px;
  }
  .portal-slot-notes {
    --slot-y: 1140px;
  }
  .portal-slot-contact {
    --slot-y: 1310px;
  }
}
@media (max-width: 360px) {
  .portal-card h2 {
    font-size: 20px;
  }
  .portal-intro h1 {
    font-size: 23px;
  }
  .portal-card-description {
    font-size: 8px;
  }
}
.portal-explore .space-desktop-hint,
.portal-explore .space-mobile-hint {
  color: inherit;
  margin: 0;
}
.space-mobile-hint {
  display: none !important;
}
@media (max-width: 999px) {
  .space-desktop-hint {
    display: none !important;
  }
  .space-mobile-hint {
    display: inline !important;
  }
}
@media (max-width: 999px) {
  .portal-intro {
    top: 110px;
  }
  .portal-main {
    height: 1300px;
  }
  .portal-slot-about {
    --slot-y: 325px;
  }
  .portal-slot-work {
    --slot-y: 395px;
  }
  .portal-slot-strengths {
    --slot-y: 635px;
  }
  .portal-slot-studio {
    --slot-y: 670px;
  }
  .portal-slot-local-ai {
    --slot-y: 925px;
  }
  .portal-slot-notes {
    --slot-y: 1030px;
  }
  .portal-slot-contact {
    --slot-y: 1165px;
  }
}
@media (min-width: 600px) and (max-width: 999px) {
  .portal-main {
    height: 1510px;
  }
  .portal-slot-about {
    --slot-y: 390px;
  }
  .portal-slot-work {
    --slot-y: 465px;
  }
  .portal-slot-strengths {
    --slot-y: 720px;
  }
  .portal-slot-studio {
    --slot-y: 775px;
  }
  .portal-slot-local-ai {
    --slot-y: 1040px;
  }
  .portal-slot-notes {
    --slot-y: 1180px;
  }
  .portal-slot-contact {
    --slot-y: 1350px;
  }
}

.portal-work .portal-art img {
  width: 66%;
  height: 66%;
  margin: 4% auto auto;
  object-fit: contain;
  border-radius: 25%;
  transform: rotate(8deg);
}