/* Concise case studies. Scoped to portfolio details, not the rest of the site. */
.case-study-page {
  background: #fff;
}

.portfolio-index-page {
  background: #fff;
}

.portfolio-overview {
  width: min(1180px, 90%);
  margin: 0 auto;
  padding: 48px 0 32px;
}

.portfolio-overview h1 {
  margin: 0 0 18px;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.portfolio-overview > p:last-child {
  max-width: 780px;
  margin: 0;
  color: #45454b;
  font-size: 18px;
  line-height: 1.6;
}

.portfolio-index-page .portfolio-selection {
  padding-top: 0;
  background: #fff;
}

.portfolio-index-page .unified-portfolio-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portfolio-index-page .unified-portfolio-item figure {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #fff;
}

.portfolio-index-page .unified-portfolio-item:nth-child(-n + 5) figure {
  padding: 10px;
}

.portfolio-index-page .unified-portfolio-item figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}
.portfolio-index-page .unified-portfolio-item figure.portfolio-bass-tuner-preview { position: relative; }
.portfolio-index-page .portfolio-bass-tuner-preview .portfolio-bass-tuner-logo { position: absolute; top: 10px; left: 10px; width: clamp(48px, 24%, 72px); height: auto; aspect-ratio: 1; padding: 4px; border: 1px solid rgba(255,255,255,.75); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(0,0,0,.24); object-fit: contain; }
.portfolio-index-page .unified-portfolio-item figure.portfolio-bass-trainer-preview { position: relative; }
.portfolio-index-page .portfolio-bass-trainer-preview .portfolio-app-icon-badge { position: absolute; top: 10px; left: 10px; width: clamp(48px, 24%, 72px); height: auto; aspect-ratio: 1; padding: 4px; border: 1px solid rgba(255,255,255,.75); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(0,0,0,.24); object-fit: contain; }

.portfolio-index-page .unified-portfolio-item figure.portfolio-app-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}

.portfolio-index-page .unified-portfolio-item figure.portfolio-app-strip img {
  width: auto;
  height: 100%;
  max-width: calc((100% - 16px) / 3);
}

.portfolio-index-page .unified-portfolio-item .portfolio-body {
  min-height: 0;
  padding: 12px 14px;
}

@media (max-width: 1000px) {
  .portfolio-index-page .unified-portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .portfolio-index-page .unified-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .portfolio-index-page .unified-portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* Editorial folio template: same content in standalone and billboard previews. */
.case-study-page { --folio-width: 1000px; background: #fff; }
.case-study-page .site-header { padding-inline: max(24px, calc((100% - var(--folio-width)) / 2)); background: #fff; backdrop-filter: none; border-bottom: 0; min-height: 76px; }
.case-study-page .brand { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 19px; }
.case-study-page .brand img { display: none; }
.case-study-page .primary-nav a { font-size: 15px; }
.case-study-shell { width: min(var(--folio-width), calc(100% - 96px)); margin: 0 auto; padding: 42px 0 70px; }
.case-study-heading { margin: 0 0 38px; }
.case-study-kicker { margin: 0 0 12px; color: #757570; font-size: 12px; letter-spacing: .035em; font-weight: 400; text-transform: none; }
.case-study h1 { margin: 0; max-width: 28ch; color: #282823; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.6vw, 44px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; text-transform: none; overflow-wrap: break-word; }
.case-study a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.case-study a:hover { color: #53534c; }
.case-study a:focus-visible { outline: 2px solid #30302c; outline-offset: 5px; }
.case-study-website-preview { margin: 0 0 42px; }
.case-study-website-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.case-study-website-preview-heading h2 { margin: 0; color: #34342e; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; line-height: 1.3; }
.case-study-website-preview-heading a { color: #44443d; font-size: 14px; }
.case-study-website-preview iframe { display: block; width: 100%; height: min(72vh, 720px); min-height: 440px; border: 1px solid #e6e6df; background: #080a0d; }
.case-study-website-preview-note { margin: 9px 0 0; color: #757570; font-size: 12px; line-height: 1.5; }
.case-study-cover { margin: 0; }
.case-study-bass-showcase { padding: clamp(18px, 4vw, 42px); color: #f8f1df; background: linear-gradient(145deg, #21180f, #100e0b 72%); }
.case-study-bass-showcase__brand { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.case-study-bass-showcase__brand > img { display: block; width: clamp(72px, 12vw, 104px); height: auto; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; }
.case-study-bass-showcase__brand p { margin: 0 0 6px; color: #f8f1df; font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.case-study-bass-showcase__brand span { color: #c8b993; font-size: 13px; line-height: 1.5; }
.case-study-bass-showcase__screens { display: grid; grid-template-columns: minmax(210px, .78fr) minmax(0, 1.22fr); align-items: stretch; gap: clamp(12px, 2vw, 22px); }
.bass-trainer-screen { display: flex; min-width: 0; min-height: 450px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; color: #373027; background: #f4efe4; text-decoration: none; }
.bass-trainer-screen img { display: block; width: auto; height: 390px; max-width: 100%; object-fit: contain; }
.bass-trainer-screen--wide img { width: 100%; height: auto; max-height: 330px; }
.bass-trainer-screen span { color: #5f584c; font-size: 12px; line-height: 1.4; text-align: center; }
.case-study-bass-showcase figcaption { color: #c8b993; text-align: center; }
.case-study-cover--branded { position: relative; isolation: isolate; }
.case-study-app-badge { position: absolute; z-index: 2; top: 18px; left: 18px; display: grid; width: clamp(68px, 10%, 104px); aspect-ratio: 1; place-items: center; overflow: hidden; padding: 7px; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 5px 20px rgba(0,0,0,.22); }
.case-study-cover--branded .case-study-app-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.case-study-cover--slot-update { display: flex; flex-direction: column; align-items: center; padding: 18px; background: #171411; }
.case-study-cover--slot-update img { display: block; width: min(100%, 635px); max-height: none; object-fit: contain; }
.case-study-cover--slot-update figcaption { width: 100%; margin-top: 12px; color: #e4dfd3; font-size: 12px; line-height: 1.5; text-align: center; }
.case-study-update { margin: 58px 0 68px; }
.case-study-update-heading { margin-bottom: 20px; }
.case-study-update-heading .case-study-kicker { margin-bottom: 8px; }
.case-study-update-heading h2 { margin: 0; color: #34342e; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; letter-spacing: -.025em; line-height: 1.25; text-transform: none; }
.case-study-update-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.case-study-update-card { min-width: 0; margin: 0; }
.case-study-update-image { position: relative; overflow: hidden; aspect-ratio: 1.9 / 1; background: #18140f; }
.case-study-update-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-study-update-card--memory .case-study-update-image { aspect-ratio: 2.9 / 1; }
.case-study-update-card--memory .case-study-update-image img { height: auto; object-fit: initial; transform: translateY(-23%); }
.case-study-update-card figcaption { display: grid; gap: 4px; margin-top: 11px; color: #757570; font-size: 13px; line-height: 1.5; }
.case-study-update-card figcaption strong { color: #34342e; font-size: 15px; font-weight: 600; }
.case-study .detail-image-link { display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.case-study-cover img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; border-radius: 0; box-shadow: none; }
.case-study-cover figcaption, .case-study-gallery figcaption, .case-study-edition figcaption { margin-top: 10px; color: #757570; font-size: 12px; line-height: 1.5; text-align: left; }
.case-study-screen-pair { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 36px); }
.case-study-screen-pair > a { min-width: 0; flex: 0 1 auto; }
.case-study-screen-pair img { width: auto; height: 480px; max-width: 100%; object-fit: contain; }
.case-study-cover--apps .case-study-screen-pair { padding: 20px 0; background: #f7f7f5; }
.case-study-summary { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); margin: 58px 0 68px; }
.case-study-summary h2 { margin: 0; color: #34342e; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; letter-spacing: -.025em; line-height: 1.25; text-transform: none; }
.case-study-summary p { margin: 0 0 16px; color: #55554e; font-size: 15px; line-height: 1.7; }
.case-study-summary .case-study-deck { color: #35352f; font-size: 17px; line-height: 1.6; }
.case-study-summary p:last-child { margin-bottom: 0; }
.case-study-facts { margin-top: 26px; }
.case-study-facts h3 { margin: 0 0 6px; color: #35352f; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.case-study-facts .case-study-role { color: #6d6d64; font-size: 14px; line-height: 1.6; }
.case-study-store { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 16px; }
.case-study-store a, .case-study-links a { display: inline-flex; align-items: center; min-height: 44px; color: #44443d; font-size: 15px; }
.case-study-store p { flex-basis: 100%; font-size: 12px; color: #757570; }
.case-study-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px 16px; margin: 0 0 58px; }
.case-study-gallery figure, .case-study-edition figure { min-width: 0; margin: 0; }
.case-study-gallery img, .case-study-edition img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; object-fit: contain; }
.case-study-gallery > figure:only-child { grid-column: 1 / -1; }
.case-study-gallery--screens img { height: 480px; object-fit: contain; object-position: center; }
.case-study-gallery--screens figcaption { text-align: center; }
.case-study-comparison { display: grid; grid-template-columns: 1fr; gap: 44px; margin: 0 0 58px; }
.case-study-edition { min-width: 0; }
.case-study-edition--original { width: calc(50% - 8px); }
.case-study-edition h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; line-height: 1.3; text-transform: none; }
.case-study-edition-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; align-items: start; }
.case-study-edition-screens > figure:only-child { grid-column: 1 / -1; }
.case-study-series-note { margin: 0 0 20px; color: #757570; font-size: 13px; line-height: 1.5; }
.case-study-app-store-series { overflow: visible; padding: 0; }
.case-study-app-store-series img { height: 480px; object-fit: contain; }
.case-study-app-store-series:focus-visible { outline: 2px solid #30302c; outline-offset: 5px; }
.case-study-video { margin: 0 0 58px; border: 0; border-radius: 0; box-shadow: none; }
.case-study-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.case-study-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 54px; padding-top: 18px; border-top: 1px solid #e6e6df; }
.case-study-page .site-footer { padding: 38px max(24px, calc((100% - var(--folio-width)) / 2)); border-color: #e6e6df; }
.case-study-page .footer-inner { align-items: flex-start; font-size: 14px; }
.case-study-page .footer-inner nav { display: grid; gap: 6px; }
@media (max-width: 900px) {
  .case-study-page .primary-nav { top: 76px; }
  .portfolio-index-page .primary-nav { top: 52px; }
}
@media (max-width: 640px) {
  .case-study-page .site-header { min-height: 64px; padding-inline: 20px; }
  .case-study-page .primary-nav { top: 64px; }
  .case-study-shell { width: calc(100% - 40px); padding: 30px 0 48px; }
  .case-study-heading { margin-bottom: 28px; }
  .case-study-bass-showcase { padding: 16px; }
  .case-study-bass-showcase__brand { gap: 12px; margin-bottom: 18px; }
  .case-study-bass-showcase__brand span { font-size: 11px; }
  .case-study-bass-showcase__screens { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bass-trainer-screen { min-height: 0; padding: 12px; }
  .bass-trainer-screen img { height: clamp(260px, 86vw, 360px); }
  .bass-trainer-screen--wide img { height: auto; max-height: none; }
  .case-study-update { margin: 36px 0 44px; }
  .case-study-update-grid { grid-template-columns: 1fr; gap: 24px; }
  .case-study-cover--slot-update { padding: 10px; }
  .case-study-website-preview { margin-bottom: 32px; }
  .case-study-website-preview-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .case-study-website-preview iframe { height: 68vh; min-height: 360px; }
  .case-study-summary { grid-template-columns: 1fr; gap: 22px; margin: 36px 0 44px; }
  .case-study-summary h2 { font-size: 25px; }
  .case-study-gallery { gap: 26px 12px; margin-bottom: 40px; }
  .case-study-gallery--screens img, .case-study-app-store-series img { height: clamp(220px, 60vw, 360px); }
  .case-study-screen-pair { gap: 12px; }
  .case-study-screen-pair img { height: clamp(230px, 62vw, 390px); }
  .case-study-edition--original { width: 100%; }
  .case-study-comparison { gap: 34px; }
  .case-study-edition-screens--wide { grid-template-columns: 1fr; }
  .case-study-page .footer-inner { flex-direction: column; gap: 20px; }
  .case-study-page .footer-inner nav { display: flex; flex-wrap: wrap; gap: 12px; }
  .portfolio-overview { width: calc(100% - 32px); padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { html:has(.case-study-page) { scroll-behavior: auto; } }