/* Measured at https://www.memorable.sh/. Homepage utility spacing is retained:
   12vh section padding, 8/6/5/4.5/4vh heading gaps, 1.3vw card gutters,
   1.8vw feature padding, and 1.2vw FAQ padding, with its mobile variants. */
:root {
  --portfolio-section-space: 12vh;
  --portfolio-heading-space: 6vh;
  --portfolio-content-space: 10vh;
  --portfolio-card-gap: 1.3vw;
  --portfolio-card-padding: 1.8vw;
}

/* Keep the requested sticky projects; match the reference's section boundary
   while allowing the last stack to release, without adding a second spacer. */
#case-studies.project-stack-section {
  padding-top: 12vh;
  padding-bottom: max(0px, calc(12vh - var(--stack-step) * 3));
}
.project-stack-heading { margin-bottom: 5vh; }
.project-stack-list { padding-bottom: calc(var(--stack-step) * 3); }

/* Original FAQ spacing, with the five cards filling both desktop rows. */
#faq-section > div:last-child { align-items: stretch; }
@media (min-width: 1024px) {
  #faq-section > div:last-child { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #faq-section [data-faq-card] { grid-column: span 2; }
  #faq-section [data-faq-card]:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #faq-section [data-faq-card]:last-child { grid-column: 1 / -1; }
}

/* Authored interior pages follow the same viewport-based spacing cadence. */
.portfolio-section { margin-block: var(--portfolio-section-space); }
.portfolio-section > h2 { margin-bottom: var(--portfolio-heading-space); }
.portfolio-story-layout { margin-top: 4vh; margin-bottom: 12vh; }
.portfolio-story-section { padding-bottom: var(--portfolio-content-space); }
.portfolio-story-section:last-child { padding-bottom: 0; }
.portfolio-project-grid { margin-top: 7vh; margin-bottom: 12vh; }
.portfolio-project-grid,
.portfolio-service-grid { gap: var(--portfolio-card-gap); }
.portfolio-service { padding: var(--portfolio-card-padding); }
.portfolio-cover { margin-bottom: var(--portfolio-content-space); }
.portfolio-note { margin-bottom: var(--portfolio-content-space); }
.portfolio-cta { padding-block: 14vh 15vh; }

/* Six narrative chapters, then a single direct product launch. */
.portfolio-story { min-width: 0; }
.portfolio-story-chapter {
  scroll-margin-top: 13vh;
  padding-bottom: var(--portfolio-content-space);
}
.portfolio-story-chapter > .portfolio-story-section:last-child { padding-bottom: 0; }
.portfolio-toc { font-size: clamp(14px, 1.1vw, 18px); gap: 22px; }
.portfolio-toc a:focus-visible { outline: 1px solid #b19fff; outline-offset: 5px; }
.portfolio-evidence-note {
  border-left: 2px solid #9d7db3;
  padding: 12px 18px;
  margin: 0 0 32px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.7;
  background: #ffffff04;
}
.portfolio-live-product .portfolio-actions { margin-bottom: 0; }
.portfolio-anchor { position: absolute; scroll-margin-top: 13vh; }
.portfolio-case-actions .portfolio-button { white-space: nowrap; }

@media (max-width: 767px) {
  :root {
    --portfolio-section-space: 9vh;
    --portfolio-heading-space: 3.5vh;
    --portfolio-content-space: 6vh;
    --portfolio-card-gap: 3vh;
    --portfolio-card-padding: 4vw;
  }
  #case-studies.project-stack-section {
    padding-top: 6vh;
    padding-bottom: max(0px, calc(3vh - var(--stack-step) * 3));
  }
  .project-stack-heading { margin-bottom: 4vh; }
  .portfolio-toc {
    display: flex;
    position: sticky;
    top: 82px;
    z-index: 20;
    gap: 22px;
    max-height: none;
    overflow-x: auto;
    padding: 10px 2px;
    margin-bottom: 32px;
    border-left: 0;
    border-bottom: 1px solid #ffffff20;
    background: #08080aee;
    backdrop-filter: blur(15px);
    font-size: 14px;
  }
  .portfolio-toc a { flex: 0 0 auto; padding: 6px 0; }
  .portfolio-story-chapter, .portfolio-story-section, .portfolio-anchor { scroll-margin-top: 148px; }
  .portfolio-case-actions .portfolio-button { font-size: 10px; padding: 13px 12px; gap: 10px; min-height: 44px; }
}