#gs-portfolio #case-panel-9 {
  --pxg-ink: #302b28;
  --pxg-paper: #f4eee4;
  --pxg-accent: #a13b37;
  --pxg-display: 'Instrument Sans', Arial, sans-serif;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 50px);
  color: var(--pxg-ink);
  background: #eee8dd;
  border-color: #d4c9b9;
  overflow: clip;
}

#gs-portfolio #case-panel-9:focus-visible { outline: 2px solid #a13b37; }

#gs-portfolio .pxg-hero-jump {
  align-self: center;
  padding: 8px 0;
  color: #5d473c;
  border-bottom: 1px solid #8b726370;
  font: 12px/1.4 var(--body);
}

#gs-portfolio .pxg-hero-jump > span { margin-left: 10px; }

#gs-portfolio #case-panel-9 > .pxg-case-cover {
  margin-bottom: 0;
  background: #241519;
}

#gs-portfolio #case-panel-9 > .pxg-case-cover > img {
  object-position: center 59%;
  transform: scale(1.08);
  transform-origin: left center;
}

#gs-portfolio #case-panel-9 > .pxg-case-cover::after {
  background: linear-gradient(90deg, #170c12e8, transparent 75%), linear-gradient(0deg, #170c12c4, transparent 76%);
}

#gs-portfolio #case-panel-9 .case-hero-caption > span { color: #f4ded3; }
#gs-portfolio #case-panel-9 .case-hero-caption > strong {
  font: 500 clamp(31px, 4.2vw, 58px)/1.04 var(--pxg-display);
  letter-spacing: -.04em;
}

#gs-portfolio .pxg-sequence {
  --pxg-lab-padding: clamp(18px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

#gs-portfolio .pxg-lab,
#gs-portfolio .pxg-stage,
#gs-portfolio .pxg-stage-frame { display: contents; }

#gs-portfolio .pxg-story-copy { grid-row: 1; }
#gs-portfolio .pxg-stage-track { display: none; }

#gs-portfolio .pxg-case-label {
  display: block;
  color: var(--pxg-accent);
  font: 500 10px/1.6 var(--mono);
  letter-spacing: .075em;
}

#gs-portfolio #case-panel-9 .pxg-story-copy h3,
#gs-portfolio #case-panel-9 .pxg-lab h4 {
  margin: 13px 0 0;
  font: 500 clamp(31px, 4vw, 55px)/1.04 var(--pxg-display);
  letter-spacing: -.05em;
}

#gs-portfolio #case-panel-9 .pxg-story-copy > p {
  margin-top: 14px;
  color: #5b4b40;
  font: 14px/1.75 var(--body);
  max-width: 55ch;
}

#gs-portfolio .pxg-story-beats { margin-top: 24px; }
#gs-portfolio .pxg-story-beats > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #9a847345;
}
#gs-portfolio .pxg-story-beats > li > span {
  padding-top: 2px;
  font: 10px/1.6 var(--mono);
  color: var(--pxg-accent);
}
#gs-portfolio .pxg-story-beats strong { font: 600 15px/1.35 var(--pxg-display); }
#gs-portfolio #case-panel-9 .pxg-story-beats p {
  margin-top: 2px;
  color: #5b4b40;
  font: 12px/1.65 var(--body);
}

#gs-portfolio .pxg-story-image {
  position: relative;
  grid-row: 2;
  margin-top: 18px;
}
#gs-portfolio .pxg-story-image img {
  width: 100%;
  height: clamp(200px, 47vw, 340px);
  object-fit: cover;
  object-position: 55% calc(58% + 12% * var(--work-scene, 0));
}
#gs-portfolio .pxg-story-image figcaption {
  padding: 12px 0 0;
  color: #68574c;
  font: 9px/1.5 var(--mono);
  letter-spacing: .04em;
}

#gs-portfolio .pxg-lab-heading,
#gs-portfolio .pxg-lab-readout,
#gs-portfolio #case-panel-9 .pxg-lab-note {
  background: #24191c;
  color: #f4eee4;
  padding-inline: var(--pxg-lab-padding);
}
#gs-portfolio .pxg-lab .pxg-case-label { color: #f2ae9b; }
#gs-portfolio .pxg-lab-heading {
  grid-row: 3;
  margin-top: 32px;
  padding-block: var(--pxg-lab-padding) 18px;
  border-top: 2px solid #a66857;
}
#gs-portfolio #case-panel-9 .pxg-lab h4 { font-size: clamp(27px, 3.4vw, 45px); }
#gs-portfolio #case-panel-9 .pxg-lab-heading > p {
  margin-top: 12px;
  color: #ddccc4;
  font: 13px/1.75 var(--body);
}
#gs-portfolio .pxg-lab-visual {
  grid-row: 4;
  min-width: 0;
  padding: 15px;
  background: radial-gradient(ellipse at 55% 52%, #50292e, #281d21 73%);
  border: 1px solid #72534b80;
}
#gs-portfolio .pxg-lab-visual-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #e7c2b4;
  font: 9px/1.45 var(--mono);
  letter-spacing: .04em;
}
#gs-portfolio .pxg-sole {
  position: relative;
  width: min(100%, 320px);
  margin: 1px auto 5px;
  aspect-ratio: 1;
}
#gs-portfolio .pxg-sole img { width: 100%; height: 100%; object-fit: contain; }
#gs-portfolio #case-panel-9 .pxg-lab-visual > p {
  margin: 0;
  color: #e2cfc6;
  text-align: center;
  font: 11px/1.6 var(--body);
}
#gs-portfolio .pxg-sole .pxg-port {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  color: #fff3e9;
  border: 1px solid #d5ab9b;
  border-radius: 50%;
  background: #281c20;
  transition: background .2s ease, box-shadow .2s ease;
}
#gs-portfolio .pxg-port-toe { left: 58%; top: 20%; }
#gs-portfolio .pxg-port-back { left: 36.5%; top: 35%; }
#gs-portfolio .pxg-port-front { left: 70%; top: 43%; }
#gs-portfolio .pxg-port-heel { left: 53%; top: 65%; }
#gs-portfolio .pxg-sole .pxg-port[aria-pressed=true] {
  background: #9b302e;
  border-color: #f6ac9a;
  box-shadow: 0 0 18px #e75a3d53;
}
#gs-portfolio .pxg-port > b { font: 600 13px/1 var(--pxg-display); }
#gs-portfolio .pxg-port > span {
  position: absolute;
  top: 100%;
  margin-top: 3px;
  padding: 2px 6px;
  color: #fff3e9;
  background: #24191c;
  font: 9px/1.4 var(--mono);
}

#gs-portfolio .pxg-lab-readout {
  grid-row: 5;
  min-width: 0;
  padding-top: 18px;
}

#gs-portfolio .pxg-presets { display: flex; flex-wrap: wrap; gap: 7px; }
#gs-portfolio .pxg-presets > button {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #98756a;
  color: #f1dcd1;
  font: 500 12px/1.25 var(--pxg-display);
}
#gs-portfolio .pxg-presets > button[aria-pressed=true] {
  background: #efb09d;
  border-color: #efb09d;
  color: #341c1a;
}
#gs-portfolio .pxg-lab button:focus-visible {
  outline: 2px solid #f9c6b2;
  outline-offset: 4px;
}
#gs-portfolio .pxg-setup {
  margin-top: 14px;
  padding: 19px 21px;
  background: #302226;
  border: 1px solid #74544c80;
}
#gs-portfolio .pxg-setup > h5 {
  margin-top: 5px;
  color: #f4eee4;
  font: 500 28px/1.05 var(--pxg-display);
  letter-spacing: -.04em;
}
#gs-portfolio #case-panel-9 .pxg-setup > p {
  min-height: 3.2em;
  margin-top: 10px;
  color: #e3d1c9;
  font: 12px/1.6 var(--body);
}
#gs-portfolio .pxg-flight-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  margin-top: 12px;
}
#gs-portfolio .pxg-flight { width: 100%; overflow: visible; }
#gs-portfolio .pxg-flight-grid { stroke: #d7afa530; }
#gs-portfolio .pxg-flight-target { stroke: #ebd7cc82; stroke-dasharray: 4 5; }
#gs-portfolio [data-pxg-trace] {
  stroke: #ff9c88;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
#gs-portfolio .pxg-sequence[data-work-scene-ready]:not([data-pxg-explored]) .pxg-lab:not(:focus-within) [data-pxg-trace] {
  stroke-dashoffset: calc(1 - var(--work-scene, 1));
}
#gs-portfolio .pxg-meters { display: grid; gap: 12px; }
#gs-portfolio .pxg-meters > div {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 7px;
  padding-bottom: 8px;
  font: 11px/1.3 var(--pxg-display);
  color: #e6d3cb;
}
#gs-portfolio .pxg-meters > div::before,
#gs-portfolio .pxg-meters > div::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: #6c4f4e;
}
#gs-portfolio .pxg-meters > div::after {
  background: #ef9b87;
  transform: scaleX(var(--pxg-meter));
  transform-origin: left;
  transition: transform .35s ease;
}
#gs-portfolio .pxg-meters dd { color: #ffc1b0; }
#gs-portfolio #case-panel-9 .pxg-lab-note {
  grid-row: 6;
  padding-block: 14px var(--pxg-lab-padding);
  color: #d7c3bb;
  font: 11px/1.6 var(--body);
}
#gs-portfolio .pxg-case-close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
#gs-portfolio #case-panel-9 .pxg-case-close p {
  margin-top: 6px;
  color: #5b4b40;
  font: 13px/1.65 var(--body);
  max-width: 61ch;
}
#gs-portfolio #case-panel-9 .pxg-case-close .gs-case__link {
  margin: 0;
  color: #843932;
}

/* A single frame carries the product from the tee into the lab. */
@media (min-width: 821px) and (min-height: 610px) {
  #gs-portfolio .pxg-sequence[data-work-scene-ready] {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    column-gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-story-copy {
    padding: 16px 0 20px;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-lab-heading { grid-row: 2; margin-top: 20px; }
  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-lab-readout { grid-row: 3; padding-top: 0; }
  #gs-portfolio #case-panel-9 .pxg-sequence[data-work-scene-ready] .pxg-lab-note { grid-row: 4; }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-stage {
    display: block;
    grid-column: 2;
    grid-row: 1 / 5;
    position: sticky;
    top: 104px;
    min-width: 0;
    --pxg-stage-blend: var(--work-scene, 0);
    --pxg-port-opacity: clamp(0, calc((var(--pxg-stage-blend) - .55) * 3.7), 1);
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-lab:has(:focus-visible) .pxg-stage {
    --pxg-stage-blend: 1;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-stage-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid #a8847555;
    color: #624e44;
    font: 9px/1.6 var(--mono);
    letter-spacing: .05em;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-stage-track > span:last-child { text-align: right; }
  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-stage-track::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 2px;
    background: #a13b37;
    transform: translateX(calc(100% * var(--pxg-stage-blend)));
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-stage-frame {
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    height: clamp(350px, calc(100svh - 255px), 455px);
    overflow: hidden;
    background: #24191c;
    isolation: isolate;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] :is(.pxg-story-image, .pxg-lab-visual) {
    grid-area: 1 / 1;
    margin: 0;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-story-image {
    z-index: 1;
    opacity: calc(1 - var(--pxg-stage-blend));
  }

  #gs-portfolio .pxg-sequence[data-work-scene-revealed] .pxg-story-image,
  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-lab:has(:focus-visible) .pxg-story-image {
    pointer-events: none;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-story-image > img {
    height: 100%;
    transform: scale(calc(1 + .045 * var(--pxg-stage-blend)));
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-story-image > figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 22px 16px 14px;
    background: linear-gradient(transparent, #171414b0);
    color: #fff1e4;
    opacity: max(0, calc(1 - var(--pxg-stage-blend) * 3));
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-lab-visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] :is(.pxg-lab-visual-label, .pxg-lab-visual > p, .pxg-port) {
    opacity: var(--pxg-port-opacity);
  }

  #gs-portfolio .pxg-sequence[data-work-scene-ready] .pxg-sole {
    width: min(100%, 330px, calc(100svh - 355px));
  }
}

@media (max-width: 560px) {
  #gs-portfolio #case-panel-9 { padding: 16px; }
  #gs-portfolio .pxg-sequence { --pxg-lab-padding: 14px; }
  #gs-portfolio .pxg-lab-visual { padding: 10px; }
  #gs-portfolio .pxg-setup { padding: 13px; }
  #gs-portfolio .pxg-sole .pxg-port { width: 36px; height: 36px; }
  #gs-portfolio .pxg-flight-readout { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #gs-portfolio .pxg-port,
  #gs-portfolio .pxg-meters > div::after { transition: none; }
  #gs-portfolio .pxg-story-image img { object-position: 55% 58%; }
}
.motion-paused #gs-portfolio .pxg-port,
.motion-paused #gs-portfolio .pxg-meters > div::after { transition: none; }
.motion-paused #gs-portfolio .pxg-story-image img { object-position: 55% 58%; }