/* Four complete projects, one continuous scroll story. */
.portfolio-journey { position: relative; }
.portfolio-journey .work-panel { min-height: 0; scroll-margin-top: 120px; }
.portfolio-journey .work-panel + .work-panel { margin-top: 100px; }
.portfolio-journey .case-browser { transform: none; }
.portfolio-scroll-meter { height: 2px; background: #c1f73120; overflow: hidden; }
.portfolio-scroll-meter i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(var(--portfolio-progress,0)); transform-origin: left; }
.portfolio-pinned .portfolio-layout { position: sticky; top: var(--portfolio-top); height: var(--portfolio-height); grid-template-columns: minmax(210px,.26fr) minmax(0,1fr); gap: clamp(25px,3.5vw,60px); }
.portfolio-pinned .portfolio-selector { position: relative; top: auto; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.portfolio-pinned .portfolio-selector-top { font-size: .875rem; padding-bottom: 20px; }
.portfolio-pinned .project-choice { padding: 19px 18px; min-height: 0; gap: 10px; transition: background .15s,color .15s,border-color .15s; }
.portfolio-pinned .choice-copy strong { font-size: clamp(1.5rem,1.9vw,2rem); }
.portfolio-pinned .choice-copy small { margin-top: 7px; font-size: .875rem; }
.portfolio-pinned .choice-number { font-size: .875rem; }
.portfolio-pinned .project-choice::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #506e16; transform: scaleX(var(--chapter-progress,0)); transform-origin: left; }
.portfolio-pinned .portfolio-controls { margin-top: 20px; font-size: .875rem; }
.portfolio-pinned .portfolio-selector-note { margin-top: auto; padding-top: 20px; font-size: 1rem; }
.portfolio-pinned .portfolio-stage { display: grid; grid-template-rows: 54px minmax(0,1fr) 2px; gap: 16px; height: 100%; min-height: 0; }
.portfolio-pinned .portfolio-stage-top { margin: 0; min-height: 48px; align-items: center; font-size: 1rem; }
.portfolio-pinned .work-panels { position: relative; overflow: clip; min-height: 0; isolation: isolate; }
.portfolio-pinned .work-panel { position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding-bottom: 25px; visibility: hidden; background: #0e0e0e; will-change: transform,clip-path; }
.portfolio-pinned .work-panel + .work-panel { margin-top: 0; }
.portfolio-pinned .case-canvas { padding: 16px; }
.portfolio-pinned .case-browser { margin-bottom: 18px; box-shadow: none; }
.portfolio-pinned .case-canvas-bottom { font-size: .875rem; }
.portfolio-pinned .case-details { margin-top: 35px; gap: 35px; padding: 0 4px 8px; }
.portfolio-pinned .case-details h3 { font-size: clamp(2rem,2.6vw,2.8rem); }
.portfolio-pinned .case-details .eyebrow { font-size: .875rem; }
.portfolio-pinned .case-description p { font-size: 1rem; }
.portfolio-pinned .case-details .button { font-size: .875rem; }
.portfolio-pinned .case-features { font-size: .875rem; }
/* The real poster used by the opening GameHub slide; no external video embed. */
.case-browser.gamehub-banner { background: #0a0f0b; color: #f2fbf4; }
.gamehub-banner-brand { display: flex; align-items: center; gap: 10px; padding: 18px 22px; }
.gamehub-banner-brand > strong { font-size: 1.125rem; letter-spacing: -.03em; }
.gamehub-banner-brand > span:last-child { margin-left: auto; color: #92a398; font-size: .875rem; }
.gamehub-logo-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg,#c6ff4d,#12a160); position: relative; }
.gamehub-logo-mark::after { content: ''; position: absolute; inset: 7px; border: 2px solid #0a0f0b; border-radius: 3px; opacity: .9; }
.gamehub-banner > img { width: 100%; height: auto; display: block; }
.gamehub-banner-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px; }
.gamehub-banner-caption small { display: block; color: #c6ff4d; font-size: .875rem; margin-bottom: 12px; }
.gamehub-banner-caption strong { font-size: clamp(1.6rem,2.8vw,2.7rem); line-height: 1.12; letter-spacing: -.035em; }
.gamehub-banner-arrow { display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; color: #0a0f0b; background: #c6ff4d; font-size: 1.7rem; }
@media (min-width:981px) and (max-height:780px) {
  .portfolio-pinned .project-choice { padding: 13px 15px; }
  .portfolio-pinned .choice-copy small { margin-top: 5px; }
  .portfolio-pinned .portfolio-selector-note { display: none; }
}
@media (max-width:980px) {
  .portfolio-pinned .portfolio-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 16px; }
  .portfolio-pinned .portfolio-selector { height: auto; }
  .portfolio-pinned .portfolio-selector-top, .portfolio-pinned .portfolio-controls, .portfolio-pinned .portfolio-selector-note { display: none; }
  .portfolio-pinned .project-menu { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .portfolio-pinned .project-choice { display: flex; align-items: center; gap: 9px; padding: 15px 12px; min-height: 52px; }
  .portfolio-pinned .choice-copy strong { font-size: 1.125rem; letter-spacing: -.035em; }
  .portfolio-pinned .choice-copy small, .portfolio-pinned .choice-arrow { display: none; }
  .portfolio-pinned .case-details { grid-template-columns: 1fr 1fr; }
}
@media (max-width:600px) {
  .portfolio-pinned .portfolio-layout { gap: 12px; }
  .portfolio-pinned .project-menu { gap: 5px; }
  .portfolio-pinned .project-choice { padding: 12px 6px; justify-content: center; }
  .portfolio-pinned .choice-copy strong { font-size: .875rem; letter-spacing: -.02em; white-space: nowrap; }
  .portfolio-pinned .choice-number { display: none; }
  .portfolio-pinned .portfolio-stage { gap: 12px; }
  .portfolio-pinned .portfolio-stage-top { gap: 9px; font-size: .875rem; }
  .portfolio-pinned .portfolio-stage-top > span { line-height: 1.25; }
  .portfolio-pinned .portfolio-stage-top .case-direct-link { font-size: .8125rem; padding: 10px; gap: 8px; flex-shrink: 0; }
  .portfolio-pinned .case-canvas { padding: 10px; }
  .portfolio-pinned .case-details { grid-template-columns: 1fr; gap: 25px; margin-top: 28px; }
  .portfolio-pinned .case-details h3 { font-size: 2.25rem; }
  .portfolio-pinned .ciola-scene-copy h3 { font-size: 1.875rem; }
  .gamehub-banner-brand { padding: 15px; }
  .gamehub-banner-brand > span:last-child { display: none; }
  .gamehub-banner-caption { padding: 20px 16px; }
  .gamehub-banner-caption small { font-size: .8125rem; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-scroll-meter { display: none; }
}