/* Paper's Case Study 3 compositions; responsive behavior follows the shared baseline. */
@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../asset/fonts/caveat-regular.ttf') format('truetype');
}

.case-study-3 .back-icon img { filter: url(#case-3-nav-ink); }
.case-study-3 #case-3-title { scroll-margin-top: 32px; }
.case-study-3 .metadata dd { margin: 0; }
.case-study-3 .metadata hr { width: 100%; }
.case-study-3 .cs3-secondary-ink { color: var(--color-text-secondary); }
.case-study-3 .next-project-preview img { height: auto; }
.case-study-3 .overview .text-block > p + p { margin-top: 16px; }
.case-study-3 .cs3-overview-grid {
  display: grid;
  grid-template-columns: minmax(0,480fr) minmax(0,280fr);
  gap: var(--case-overview-image-gap);
}
.case-study-3 .cs3-overview-column { display: contents; }
.case-study-3 .cs3-overview-column:first-child > :last-child { grid-column: 1; grid-row: 2; display: grid; align-items: center; }
.case-study-3 .cs3-overview-column:last-child > :first-child { grid-column: 2; grid-row: 1; }
.case-study-3 .cs3-overview-column .metrics { flex: 1; }
.case-study-3 .showcase-frame,
.case-study-3 .showcase { border-radius: var(--case-image-frame-radius); }

.case-study-3 .cs3-globe-animation {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62.5%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  visibility: hidden;
}
.case-study-3 .cs3-globe-showcase.is-animated .cs3-globe-animation { visibility: visible; }
.case-study-3 .cs3-globe-showcase.is-animated > .showcase { opacity: 0; }

/* Native source artwork scales once inside normal-flow aspect-ratio slots. */
.case-study-3 .cs3-composition {
  width: 100%;
  min-width: 0;
  aspect-ratio: calc(var(--source-width) / var(--source-height));
  container-type: inline-size;
  position: relative;
}
.case-study-3 .cs3-source {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--source-width);
  height: var(--source-height);
  transform: scale(calc(100cqw / var(--source-width)));
  transform-origin: top left;
}
.case-study-3 .cs3-framed {
  border: 1px solid var(--color-border);
  border-radius: var(--case-image-frame-radius);
  overflow: hidden;
}
.case-study-3 .cs3-svg-figure {
  padding: 24px 24px 24px;
  border-width: 1px;
}
.case-study-3 .cs3-question { background: #FDFAFA; border-width: 1px; }
.case-study-3 .cs3-question p {
  font: 600 20px/32px var(--font-project-title);
  letter-spacing: -.3px;
  color: var(--case-color-heading);
}
.case-study-3 .cs3-diagram-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.case-study-3 .cs3-diagram-heading > strong { font-size: 14px; line-height: 20px; }
.case-study-3 .cs3-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 16px;
}
.case-study-3 .cs3-legend span { display: inline-flex; align-items: center; gap: 4px; }
.case-study-3 .cs3-legend span::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--case-progress-complete);
}
.case-study-3 .cs3-legend .cs3-existing::before { background: #FED5CC; border-color: #D5A399; }
.case-study-3 .cs3-legend .cs3-new::before { background: radial-gradient(circle,#91C8BE 0 2px,#E6F5F2 2px); border-color: #91C8BE; }
.case-study-3 .cs3-legend .cs3-flow-new::before { background: #FDFAFA; border-style: dashed; }

.case-study-3 .cs3-prose-rows { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.case-study-3 .cs3-prose-rows > li {
  display: grid;
  grid-template-columns: 212px minmax(0,1fr);
  align-items: start;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--case-image-frame-radius);
}
.case-study-3 .cs3-row-label { display: flex; align-items: start; gap: 8px; }
.case-study-3 .cs3-row-symbol { flex: 0 0 24px; text-align: center; }

.case-study-3 .cs3-pair .carousel-track { overflow: visible; display: grid; gap: 8px; }
.case-study-3 .cs3-badge-carousel .carousel-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
.case-study-3 .cs3-badge-card {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--case-image-frame-radius);
}
.case-study-3 .cs3-badge-art { width: 120px; height: auto; align-self: center; }
.case-study-3 .cs3-badge-art[src*='-pack'] { width: 198px; max-width: 100%; }
.case-study-3 .cs3-adoption-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 8px; }
.case-study-3 .cs3-adoption-grid > .case-stack { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.case-study-3 .cs3-adoption-grid .carousel-track { height: 100%; }
.case-study-3 .cs3-adoption-grid .cs3-badge-carousel .carousel-track { grid-template-columns: repeat(2,minmax(0,1fr)); }
.case-study-3 .cs3-adoption-grid > :last-child .carousel-track { grid-template-columns: minmax(0,1fr); }
.case-study-3 .cs3-state-pair .carousel-track { display: grid; overflow: visible; }
.case-study-3 .cs3-annotation-pair .carousel-track { grid-template-columns: minmax(0,376fr) minmax(0,336fr); gap: 0; }
.case-study-3 .cs3-state-composition { gap: 0; position: relative; }
.case-study-3 .cs3-state-arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.case-study-3 .cs3-state-composition.has-connected-arrow .cs3-sharing-connector { visibility: hidden; }
.case-study-3 .cs3-touchpoints { width: calc(100% + 46px); margin-left: -24px; }
.case-study-3 .cs3-touchpoints .carousel-track { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding-right: 2px; }
.case-study-3 .cs3-outcome { gap: 32px; }
.case-study-3 .cs3-outcome .outcome-divider { margin-block: -16px 64px; }
.case-study-3 .cs3-outcome + .cs3-award { margin-top: -36px; }

/* Original award photograph, source crop, badge rows and native caption. */
.case-study-3 .cs3-award { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.case-study-3 .cs3-award-scene {
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: 1440px;
  min-height: 484px;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 82px 20px 30px;
  --cs3-badge-row-width: 1464px;
  --cs3-badge-loop-scale: 1;
  --cs3-badge-loop-gap: calc(var(--cs3-badge-row-width) * 144 / 8784);
  --cs3-badge-loop-duration: calc(80s * var(--cs3-badge-loop-scale) * 8928 / 8784);
}
.case-study-3 .cs3-award-rows {
  position: absolute;
  inset: 36px 0 0;
  overflow: hidden;
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  mask-image: linear-gradient(to right,transparent,black 21%,black 79%,transparent);
}
.case-study-3 .cs3-award-row { display: flex; width: max-content; margin-left: calc(51px - var(--cs3-badge-row-width) - var(--cs3-badge-loop-gap)); animation: cs3-badges-left var(--cs3-badge-loop-duration) linear infinite; animation-play-state: paused; }
.case-study-3 .cs3-award-row:nth-child(2) { margin-left: calc(123px - var(--cs3-badge-row-width) - var(--cs3-badge-loop-gap)); animation-direction: reverse; }
.case-study-3 .cs3-award-row img { width: var(--cs3-badge-row-width); height: auto; flex: 0 0 auto; margin-right: var(--cs3-badge-loop-gap); }
.case-study-3 .cs3-award-scene.is-moving .cs3-award-row { animation-play-state: running; }
.case-study-3 .cs3-award-scene:focus-within .cs3-award-row { animation-play-state: paused; }
@keyframes cs3-badges-left { from { transform: translateX(0); } to { transform: translateX(calc(-1 * (var(--cs3-badge-row-width) + var(--cs3-badge-loop-gap)))); } }
@media (prefers-reduced-motion: reduce) {
  .case-study-3 .cs3-award-row { animation: none; }
}
.case-study-3 .cs3-award-photo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 532px;
  padding: 8px 8px 24px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 0 2px #00000014, 0 2px 6px #0000001A;
  overflow: hidden;
}
.case-study-3 .cs3-award-crop { aspect-ratio: 516 / 284; overflow: hidden; border-radius: 4px; }
.case-study-3 .cs3-award-crop img { width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; }
.case-study-3 .cs3-award-photo figcaption { font: 400 24px/32px Caveat,sans-serif; color: var(--case-color-heading); letter-spacing: 0; }
.case-study-3 .cs3-award > p { text-align: center; }

@media (max-width: 899px) {
  .case-study-3 .cs3-touchpoints { width: 100%; margin-left: 0; }
  .case-study-3 .overview .text-block > p + p { margin-top: 22px; }
  .case-study-3 .cs3-outcome + .cs3-award { margin-top: 0; }
  .case-study-3 .cs3-award { gap: 24px; }
  .case-study-3 .cs3-award-scene { min-height: 0; padding: clamp(56px,calc(100vw * 2 / 15),80px) 20px; }
  .case-study-3 .cs3-award-rows { inset: 0; display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); align-items: center; gap: 0; }
  .case-study-3 .cs3-award-photo {
    --cs3-award-card-width: min(532px,calc(100vw - 64px));
    width: var(--cs3-award-card-width);
    gap: calc(var(--cs3-award-card-width) * 24 / 532);
    padding: calc(var(--cs3-award-card-width) * 8 / 532)
      calc(var(--cs3-award-card-width) * 8 / 532)
      calc(var(--cs3-award-card-width) * 24 / 532);
    border-radius: calc(var(--cs3-award-card-width) * 10 / 532);
  }
  .case-study-3 .cs3-award-crop { border-radius: calc(var(--cs3-award-card-width) * 4 / 532); }
  .case-study-3 .cs3-award-photo figcaption { font-size: 20px; line-height: 28px; }
  .case-study-3 #case-3-title { scroll-margin-top: calc(88px + env(safe-area-inset-top)); }
  .case-study-3 .cs3-question p { font-size: 18px; line-height: 28px; }
  .case-study-3 .cs3-outcome .outcome-divider { margin-bottom: 32px; }
}
@media (max-width: 751px) {
  .case-study-3 .cs3-adoption-grid { display: flex; flex-direction: column; gap: 32px; }
  .case-study-3 .cs3-pair { width: 100vw; margin-left: calc(50% - 50vw); }
  .case-study-3 .cs3-pair .carousel-track {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 8px var(--case-carousel-end-gutter) 8px var(--case-mobile-content-gutter);
    align-items: stretch;
  }
  .case-study-3 .cs3-pair .carousel-track > * { width: min(340px,calc(100vw - 56px)); }
  .case-study-3 .cs3-badge-carousel .carousel-track > * { width: min(232px,calc(100vw - 56px)); }
  .case-study-3 .cs3-touchpoints .carousel-track > * { width: calc(min(340px,100vw - 56px) * 252 / 376); }
  .case-study-3 .cs3-adoption-grid > .case-stack { display: flex; }
  .case-study-3 .cs3-annotation-pair .cs3-composition,
  .case-study-3 .cs3-annotation-pair .cs3-source { --source-width: 376px !important; }
  .case-study-3 .cs3-state-pair .carousel-track { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .case-study-3 .cs3-state-pair .cs3-composition { width: min(376px,100%); }
  .case-study-3 .cs3-state-pair + .cs3-composition { margin-top: 0; }
  .case-study-3 .cs3-state-composition { gap: 32px; }

}
@media (max-width: 619px) {
  .case-study-3 .cs3-overview-grid .metrics { gap: 12px; }
  .case-study-3 .cs3-overview-grid .metrics li { padding: 12px; }
  .case-study-3 .cs3-overview-grid .metric-number { font-size: 28px; line-height: 42px; }
  .case-study-3 .cs3-overview-grid .metric-description { font-size: 14px; line-height: 22px; margin-top: 4px; }
  .case-study-3 .cs3-overview-grid { display: contents; }
  .case-study-3 .cs3-overview-column > * { grid-column: auto !important; grid-row: auto !important; }
  .case-study-3 .cs3-overview-column .metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-study-3 .cs3-prose-rows > li { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .case-study-3 .cs3-prose-rows > li > p { padding-left: 32px; }
  .case-study-3 .cs3-diagram-heading { flex-direction: column; align-items: start; }
  .case-study-3 .cs3-svg-figure { padding: 16px; }
  .case-study-3 .cs3-award-scene {
    --cs3-badge-row-width: 1000px;
    --cs3-badge-loop-scale: calc(1000 / 1464);
  }
  .case-study-3 .cs3-award-row,
  .case-study-3 .cs3-award-row:nth-child(2) { margin-left: calc(-1 * (var(--cs3-badge-row-width) + var(--cs3-badge-loop-gap))); }
}