.portfolio-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.55rem;
}

/* The panel's travel gutter can extend into section padding, but never past
   the screen. clip on just this axis preserves normal vertical page flow and
   does not introduce a scrolling container like overflow:hidden would. */
.portfolio { overflow-x: clip; }

/* Contain boundary gestures without intercepting browser history. */
.compendium-sheet, .media-gallery-dialog, .detail-overlay { overscroll-behavior: contain; }
.compendium-sheet { touch-action: pan-y pinch-zoom; }
.compendium-sheet.is-gesturing { transition: none; user-select: none; cursor: grabbing; }
.compendium-sheet img { -webkit-user-drag: none; }
.gallery-drag-track, .gallery-drag-slide { position: absolute; inset: 0; }
.media-gallery-stage { overflow: hidden; }
.media-gallery-stage img { -webkit-user-drag: none; user-select: none; }
.media-gallery-stage.is-gesturing { cursor: grabbing; user-select: none; }
.gallery-drag-slide.is-preview { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .compendium-sheet { transition: none; }
}

/* Compact navigation ends at x=32px. Reserve a 12px content buffer without
   spending the same amount of scarce space on the opposite side. */
@media (max-width: 1023px) {
  .landing, .summary, .portfolio, .contact {
    padding-left: max(44px, 7vw);
    padding-right: max(12px, calc(7vw - 12px));
  }
}

.portfolio-views {
  --explore-frame-height: min(70svh, 720px);
  --experience-frame-height: var(--explore-frame-height);
  --experience-frame-max: none;
  --experience-scene-height: min(56.25cqw, 62svh, 620px);
  position: relative; display: flow-root; margin-top: clamp(1.5rem, 3vw, 2.5rem); overflow-anchor: none;
}
/* Let the horizontal slide travel through the surrounding negative space.
   Keep vertical clipping without changing panel width or settled alignment. */
.portfolio-views.is-switching {
  /* clip-path masks paint but does not contain scrollable overflow. Clip the
     moving panels as well, with the same visible travel gutter. */
  overflow: clip;
  overflow-clip-margin: 7rem;
  clip-path: inset(0 calc(-1 * clamp(1.5rem, 8vw, 7rem)));
}
.portfolio-views > [data-portfolio-panel] { padding-top: 0; }
.portfolio-views .fluency-scene { margin-top: 0; height: var(--explore-frame-height); min-height: 0; }
.fluency-frame-shell { position: relative; }
.fluency-frame-shell > .fluency-scene {
  /* Preserve the original top/side border and its interaction colors.
     Draw the bottom separately so its center can remain genuinely empty. */
  border-image-width: 1 1 0 1;
}
.fluency-frame-shell > .fluency-scene::after {
  --result-gap-half: min(10rem, 50%);
  content: '';
  position: absolute;
  z-index: 3;
  bottom: 0;
  inset-inline: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(var(--fluency-border-angle), var(--fluency-frame-start), var(--fluency-frame-middle) 46%, var(--fluency-frame-end));
  mask-image: linear-gradient(to right, black calc(50% - var(--result-gap-half)), transparent calc(50% - var(--result-gap-half)), transparent calc(50% + var(--result-gap-half)), black calc(50% + var(--result-gap-half)));
}
.fluency-frame-shell > .fluency-result-control {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  translate: -50% 33.333%;
  width: min(19rem, calc(100% - 1rem));
  min-width: 0;
  background: transparent;
  touch-action: manipulation;
}
.portfolio-views .fluency-intro { margin-top: 2.5rem; gap: .8rem; }
.portfolio-views .fluency-clear-help { order: -1; margin: 0; }
.portfolio-views .keyword-search-intro { max-width: none; }

@media (max-width: 620px) {
  .portfolio-views { --explore-frame-height: 74svh; --experience-scene-height: min(125cqw, var(--explore-frame-height)); }
}

@media (max-width: 820px) {
  .portfolio-views.is-switching { overflow-clip-margin: 4rem; }
  .portfolio-head {
    align-items: center;
    flex-direction: column;
  }

  .portfolio-tabs {
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .portfolio-views.is-switching { overflow-clip-margin: 2rem; }
}
/* A hidden entry point, with an accessible keyboard focus treatment. */
.article-highlight[role="button"]:focus-visible {
  outline: 2px solid #00c8ff;
  outline-offset: 5px;
}
.perspective-dialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid #c8b3ff;
  border-radius: 0;
  background: #080c18;
  color: #f5f7fb;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 100px #0009;
}
.perspective-dialog::backdrop { background: rgb(3 6 13 / 88%); }
.perspective-dialog h2 { margin: .8rem 0 1rem; line-height: 1.2; }
.perspective-dialog .kicker { color: #e281ff; }
.perspective-close {
  display: block;
  margin-left: auto;
  border: 0;
  padding: .5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.perspective-note { color: #adb6c9; font-size: .85rem; line-height: 1.6; }
.perspective-copy { font-size: 1rem; line-height: 1.75; }
.perspective-copy p { margin: 1.25rem 0; }