/* ==========================================================================
   Case study pages — Hilbert / Emeris
   Reuses base resets, fonts, and reveal from styles.css
   Spec: Figma case pages (page 1728, media 1128, text 656/800, inset 164)
   ========================================================================== */

:root {
  --case-media: 1128px;
  --case-text: 800px;
  --case-text-narrow: 656px;
  --case-inset: 164px;
  --case-card: #f9fafc;
  --case-card-emeris: #efefef;
  --ink: #000000;
  --muted: rgba(0, 0, 0, 0.64);
  --muted-soft: rgba(0, 0, 0, 0.54);
  --muted-faint: rgba(0, 0, 0, 0.4);
  --hairline: rgba(0, 0, 0, 0.1);
  --case-card-ring: none;
  --case-ui-shadow: var(--site-shadow);
}

body {
  --index-chevron-left-offset: 548px;

  color: var(--ink);
  background: #ffffff;
}

.case-page {
  width: 100%;
  min-height: 100svh;
  padding: 166px 0 140px;
  overflow-x: clip;
  font-weight: 400;
  color: var(--ink);
  background: #ffffff;
}

.case-wrap {
  width: 100%;
  padding: 0 32px;
}

/* Text column is centered on the page (656px at 1728 → x=536);
   media hangs 164 left of it. left = 50% − 656/2 − 164 = 50% − 492px */
.case-content {
  width: var(--case-media);
  margin-left: calc(50% - 492px);
}

/* --- floating home navigation --- */
.case-home-button {
  position: fixed;
  top: calc(48px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 40;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 56px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--site-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.2px;
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(-50%);
  transition:
    box-shadow 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

.case-home-button:hover,
.case-home-button:focus-visible {
  background: #fff;
  box-shadow: var(--site-shadow);
  transform: translateX(-50%) translateY(-1px);
}

.case-home-button:active {
  transform: translateX(-50%) scale(0.98);
}

/* --- vertical rhythm --- */
.case-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: stretch;
}

.section-group {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: stretch;
}

.section-group--48 {
  gap: 48px;
}

.section-group--40 {
  gap: 40px;
}

.section-group--32 {
  gap: 32px;
}

/* left-inset text column */
.lede {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: var(--case-text);
  margin-left: var(--case-inset);
}

.lede--narrow {
  max-width: var(--case-text-narrow);
}

/* spacing utilities: additive to the 24px lede gap */
.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

/* --- typography --- */
.eyebrow {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: var(--muted-soft);
  margin-bottom: -8px; /* eyebrow → next = 16px */
}

.statement {
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.7px;
  font-weight: 600;
  color: var(--ink);
}

.subhead {
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.7px;
  font-weight: 600;
  color: var(--ink);
}

.section-title {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.2px;
  font-weight: 600;
  color: var(--ink);
}

.minor-head {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.6px;
  font-weight: 600;
  color: var(--ink);
}

/* inline emphasis label (Figma "Why?", "Decision", further/lesson titles) */
.sub-label {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  font-weight: 600;
  color: var(--ink);
}

.body {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--muted);
  max-width: var(--case-text);
}

.body-lines span {
  display: block;
}

.divider-inline {
  width: 100%;
  height: 1px;
  margin: 16px 0; /* 24 gap + 16 = 40 each side */
  background: var(--hairline);
  border: 0;
}

/* --- header --- */
.case-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  margin-left: var(--case-inset);
}

.case-logo {
  height: 28px;
  width: 94px;
}

.case-h1 {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.2px;
  font-weight: 600;
  color: var(--ink);
}

/* --- hero carousel --- */
.hero-carousel {
  width: 100%;
  padding-left: var(--case-inset);
  overflow: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
  scroll-padding-left: var(--case-inset);
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.hero-carousel::-webkit-scrollbar {
  display: none;
}

.hero-track {
  display: flex;
  gap: 24px;
  width: max-content;
  transform: translate3d(var(--case-carousel-offset, 0px), 0, 0);
  will-change: transform;
}

.hero-carousel.is-dragging {
  cursor: grabbing;
}

.hero-track img {
  display: block;
  width: 856px;
  aspect-ratio: 856 / 580;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: var(--site-shadow);
  scroll-snap-align: start;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.hero-track img:last-child {
  width: 893px;
  aspect-ratio: 893 / 580;
}

/* --- overview meta --- */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-label {
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--ink);
}

.meta-value {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--muted);
}

/* Hilbert meta labels are Semi Bold (600); Emeris/Drop stay Medium (500) */
.case-page--hilbert .meta-label {
  font-weight: 600;
}

/* --- deliverable cards: edge protrudes so card text aligns to the lede axis --- */
.deliverables {
  --deliverable-edge-offset: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: calc(100% + (var(--deliverable-edge-offset) * 2));
  margin-left: calc(var(--deliverable-edge-offset) * -1);
}

.deliverable {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: var(--case-card);
  box-shadow: var(--case-card-ring);
}

.deliverable-stat {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.4px;
  font-weight: 600;
  color: var(--ink);
}

.deliverable-desc {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--muted);
}

/* --- objectives cards (row of 2, 656 wide) --- */
/* Cards overhang the text column by their 24px padding on each side, so the
   card title + list text align to the main text axis (Figma: cards frame x=-24) */
.obj-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: calc(var(--case-text-narrow) + 48px);
  margin-left: calc(var(--case-inset) - 24px);
}

.obj-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  background: var(--case-card);
  box-shadow: var(--case-card-ring);
}

.obj-card-title {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.4px;
  font-weight: 600;
  color: var(--ink);
}

.obj-card ol {
  margin: 0;
  padding-left: 21px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obj-card li {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--muted);
}

/* --- media block (frame exports carry their own background + inset) --- */
.media {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.media img,
.media video {
  display: block;
  width: 100%;
  height: auto;
}

.case-page--hilbert .case-media-frame {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 760px;
  padding: 45px 134px;
  border-radius: 16px;
  background: #f9fafc;
  overflow: hidden;
}

.case-page--hilbert .case-media-frame img,
.case-page--hilbert .case-media-frame video {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.case-page--hilbert .case-video-frame {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3024 / 2048;
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(25, 44, 69, 0.06),
    0 1px 1px -0.5px rgba(25, 44, 69, 0.04),
    0 3px 3px -1.5px rgba(25, 44, 69, 0.02),
    0 6px 10px -3px rgba(25, 44, 69, 0.03),
    0 10px 18px -8px rgba(25, 44, 69, 0.02),
    0 16px 20px 0 rgba(0, 0, 0, 0.03);
}

.case-page--hilbert .case-video-frame video {
  height: 100%;
  max-height: none;
  object-fit: cover;
  transform: scale(1.004);
}

.caption {
  display: flex;
  gap: 24px;
  padding-left: var(--case-inset);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--muted);
}

.caption-label {
  color: var(--muted-faint);
  white-space: nowrap;
}

/* --- results / learnings split layout --- */
.split {
  display: grid;
  grid-template-columns: 234px minmax(0, 1fr);
  gap: 32px;
  width: 100%;
  max-width: var(--case-text);
  margin-left: var(--case-inset);
}

.split-label {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.6px;
  font-weight: 600;
  color: var(--ink);
}

.cards-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: var(--case-card);
  box-shadow: var(--case-card-ring);
}

.info-card-title {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
  font-weight: 600;
  color: var(--ink);
}

.info-card-body {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--muted);
}

/* ==========================================================================
   Emeris case study
   Spec: Figma 1563:3592 (page 1728, hero viewport 936, text 656)
   ========================================================================== */

.case-page--emeris {
  padding-top: 196px;
}

.case-page--emeris .case-content {
  gap: 80px;
}

.emeris-header {
  gap: 32px;
  max-width: 546px;
}

.emeris-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.emeris-logo {
  display: flex;
  align-items: flex-start;
  width: 222px;
  height: 24px;
  overflow: visible;
}

.emeris-logo-mark {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.emeris-logo-wordmark {
  display: block;
  width: 76px;
  height: 12.44px;
  margin-top: 5px;
  margin-left: 7px;
  flex: 0 0 auto;
}

.emeris-hero-copy {
  width: 448px;
}

.hero-carousel--emeris {
  width: 936px;
  margin-top: -8px;
  margin-left: var(--case-inset);
  padding-left: 0;
  scroll-padding-left: 0;
}

.hero-track--emeris {
  gap: 24px;
}

.hero-track--emeris img,
.hero-track--emeris img:last-child {
  width: 817px;
  height: 580px;
  aspect-ratio: auto;
  object-fit: cover;
  box-shadow: var(--site-shadow);
}

.hero-track--emeris .emeris-hero-shot--stake-flow {
  width: 836px;
}

.case-page--emeris .meta-row {
  gap: 40px;
}

.case-page--emeris .eyebrow {
  font-weight: 500;
  color: var(--muted);
}

.case-page--emeris .meta-value {
  font-size: 20px;
  line-height: 28px;
}

.case-page--emeris .emeris-hero-copy {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.4px;
}

.case-page--emeris .obj-card {
  background: var(--case-card-emeris);
  box-shadow: none;
}

/* Emeris obj card titles are Semi Bold (600) at 16px (Hilbert's are 17px) */
.case-page--emeris .obj-card-title {
  font-size: 16px;
}

.case-page--emeris .meta--domain {
  width: 140px;
}

.case-page--emeris .meta--timeline {
  width: 96px;
}

.case-page--emeris .meta--platform {
  width: 80px;
}

/* ==========================================================================
   Drop — header + centered image gallery
   ========================================================================== */
.drop-header {
  gap: 32px;
  max-width: 546px;
}

.drop-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drop-logo {
  display: block;
  height: 20px;
}

.drop-logo img {
  display: block;
  width: auto;
  height: 20px;
}

.case-page--drop .meta-row {
  gap: 40px;
}

.case-page--drop .meta-value {
  font-size: 20px;
  line-height: 28px;
}

/* gallery is centered in the viewport (Figma slides: 846 wide, centered),
   independent of the inset text column the header sits in */
.drop-gallery {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 846px;
  max-width: 100%;
  margin: 72px auto 0;
}

.drop-slide {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Cards overhang the text column by their 24px padding on each side so the
   card title + body align to the main text axis (same as .obj-cards). */
.case-card-grid {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--case-text-narrow) + 48px);
  margin-left: calc(var(--case-inset) - 24px);
}

.case-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Nested grids fill their (already-inset) parent; overhang -24 each side so
   the card text aligns to the parent's text axis. */
.case-card-grid--nested {
  width: calc(100% + 48px);
  max-width: none;
  margin-left: -24px;
  gap: 16px;
}

.case-mini-card,
.case-list-card {
  background: var(--case-card-emeris);
}

.case-mini-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border-radius: 16px;
  box-shadow: none;
}

.case-mini-card-title {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.4px;
  font-weight: 600;
  color: var(--ink);
}

.case-mini-card-body {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--muted);
}

.case-list-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border-radius: 12px;
  background-image: none;
}

.case-list-card--light {
  background: #ffffff;
  background-image: none;
  box-shadow: var(--site-shadow);
}

.case-list-card-title {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.4px;
  font-weight: 600;
  color: var(--ink);
}

.case-list-card ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 25.5px;
}

.case-list-card li {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--muted);
}

.case-list-card-body {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--muted);
}

.case-callout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 736px;
  margin-left: -40px;
  padding: 40px;
  border-radius: 16px;
  background: #fdf8be;
}

.case-callout-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-callout .minor-head {
  color: #0f1011;
  letter-spacing: -0.4px;
}

.case-callout .body {
  color: #5a5304;
}

.case-callout strong {
  font-weight: 500;
}

.case-callout .case-list-card-title {
  color: #0f1011;
}

.case-callout .case-list-card-body {
  color: #4f5460;
}

.media-wide {
  width: 936px;
  margin-left: -140px;
  overflow: hidden;
  border-radius: 8px;
}

.media-wide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-wide--intro {
  height: 654px;
}

.media-wide--decision {
  height: 649px;
  border-radius: 12px;
  box-shadow: var(--case-ui-shadow);
}

.decision-label {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: #0fc512;
  margin-bottom: -8px;
}

.decision-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.decision-copy {
  gap: 32px;
}

.decision-copy > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.decision-copy .body + .body {
  margin-top: 24px;
}

.section-group--solution {
  gap: 72px;
}

.section-group--64 {
  gap: 64px;
}

.further-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.further-grid > div,
.lesson-stack > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lesson-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==========================================================================
   Denario — header + full/half media gallery
   Spec: Figma 1932:14510 (gallery 846 wide, slide radius 16, gap 32)
   ========================================================================== */
.denario-header {
  gap: 32px;
  max-width: 546px;
}

.denario-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.denario-logo {
  display: block;
  height: 20px;
}

.denario-logo img {
  display: block;
  width: auto;
  height: 20px;
}

.case-page--denario .meta-row {
  gap: 40px;
}

.case-page--denario .meta-value {
  font-size: 20px;
  line-height: 28px;
}

/* gallery is centered in the viewport (Figma frame 846 wide, centered),
   independent of the inset header column */
.denario-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: 846px;
  max-width: 100%;
  margin: 72px auto 0;
}

.denario-slide {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #f2f2f2;
}

.denario-slide--full {
  grid-column: 1 / -1;
  aspect-ratio: 846 / 531;
}

.denario-slide--half {
  aspect-ratio: 407 / 531;
}

.denario-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* source clip is baked upside-down — rotate it back 180° */
.denario-media--flip180 {
  transform: rotate(180deg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1360px) {
  body {
    --index-chevron-left-offset: 620px;
  }

  .case-content {
    width: 100%;
    max-width: var(--case-media);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1040px) {
  :root {
    --case-inset: 0px;
  }

  .hero-carousel--emeris,
  .case-card-grid,
  .media-wide {
    margin-left: 0;
  }

  /* no inset to hang into — drop the 24px overhang */
  .obj-cards {
    margin-left: 0;
    max-width: var(--case-text-narrow);
  }

  .case-card-grid {
    max-width: var(--case-text-narrow);
  }

  .case-card-grid--nested {
    width: 100%;
    margin-left: 0;
  }

  .case-callout {
    width: 100%;
    margin-left: 0;
  }

  .hero-carousel--emeris,
  .media-wide {
    width: 100%;
  }

  .media-wide--intro,
  .media-wide--decision {
    height: auto;
  }

  .media-wide img {
    height: auto;
  }

  .case-page--hilbert .case-media-frame {
    height: auto;
    padding: clamp(20px, 4vw, 45px) clamp(32px, 11.9vw, 134px);
  }

  /* Tablet + mobile: keep the transform-drag carousel (overflow visible, from
     the base rule) so the images' full shadow is never clipped. The images are
     made fluid below so the fixed 856px desktop width no longer overflows and
     cuts the product screens off; touch-action: pan-y lets the JS handle the
     horizontal swipe while vertical scrolls the page. */
  .hero-track img,
  .hero-track img:last-child,
  .hero-track--emeris img,
  .hero-track--emeris img:last-child,
  .hero-track--emeris .emeris-hero-shot--stake-flow {
    width: calc(100vw - 64px);
    height: auto;
  }

  .hero-track--emeris img,
  .hero-track--emeris img:last-child,
  .hero-track--emeris .emeris-hero-shot--stake-flow {
    aspect-ratio: 817 / 580;
  }
}

@media (max-width: 720px) {
  .case-page {
    padding: 64px 0 96px;
  }

  .case-wrap {
    padding: 0 20px;
  }

  .case-home-button {
    top: calc(env(safe-area-inset-top, 0px) + 48px);
    left: 50%;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 10px 16px;
    background: #fff;
  }

  .case-home-button:hover,
  .case-home-button:focus-visible {
    width: auto;
  }

  .case-content {
    gap: 64px;
  }

  .section-group {
    gap: 40px;
  }

  .case-h1,
  .section-title {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -0.8px;
  }

  .statement,
  .subhead {
    font-size: 24px;
    line-height: 31px;
    letter-spacing: -0.5px;
  }

  .body {
    font-size: 16px;
    line-height: 24px;
  }

  .case-page--hilbert .case-media-frame {
    padding: clamp(16px, 5.5vw, 24px);
  }

  /* Mobile: native horizontal scroll-snap carousel — same mechanics as the
     reference .impact__carousel (a horizontal scroller that never clips).
     The carousel breaks full-bleed to the viewport edges (the .case-page
     overflow-x:clip contains it) and carries its own symmetric edge padding,
     so the first/last screen sit inside the margin and the next screen peeks.
     overflow-x:auto hands the swipe to native scroll (the JS transform-drag
     steps aside since overflow-x is no longer visible); scroll-snap makes each
     screen a snap point. overflow-x:auto forces overflow-y to clip, which would
     cut the image's vertical shadow — so the scroller carries 72px of block
     padding (room for the 0 8px 64px shadow) and cancels it with an equal
     negative margin-block, keeping the vertical rhythm (flex gap) unchanged. */
  .hero-carousel {
    /* transform-free full-bleed — the reveal system clears `transform` on
       `.is-settled`, so translateX(-50%) can't be used here. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: -72px;
    padding: 72px 20px;
    overflow-x: auto;
    overflow-y: clip;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 20px;
    cursor: default;
    touch-action: pan-x;
    user-select: auto;
    -webkit-user-select: auto;
  }

  .hero-track {
    gap: 12px;
    /* trailing space so the last screen can start-align under scroll-snap */
    padding-right: 20px;
  }

  .hero-track img,
  .hero-track img:last-child,
  .hero-track--emeris img,
  .hero-track--emeris img:last-child,
  .hero-track--emeris .emeris-hero-shot--stake-flow {
    width: calc(100vw - 64px);
    height: auto;
    box-shadow: var(--site-shadow);
    scroll-snap-align: start;
  }

  .case-page--emeris {
    padding-top: 64px;
  }

  .emeris-header {
    max-width: none;
  }

  .emeris-hero-copy {
    width: 100%;
  }

  .hero-track--emeris img,
  .hero-track--emeris img:last-child,
  .hero-track--emeris .emeris-hero-shot--stake-flow {
    aspect-ratio: 817 / 580;
  }

  .case-card-grid--three,
  .case-card-grid--two,
  .further-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-card-grid,
  .case-card-grid--nested,
  .case-list-card,
  .case-mini-card,
  .case-callout,
  .case-callout-block {
    min-width: 0;
  }

  .case-callout {
    padding: 32px 24px;
  }

  .case-list-card-title,
  .case-list-card-body,
  .case-mini-card-title,
  .case-mini-card-body,
  .case-callout .body {
    overflow-wrap: anywhere;
  }

  .deliverables,
  .obj-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .deliverables {
    width: 100%;
    margin-left: 0;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .caption {
    flex-direction: column;
    gap: 4px;
    padding-left: 0;
  }

  .drop-gallery {
    margin-top: 48px;
    gap: 16px;
  }

  .drop-slide {
    border-radius: 12px;
  }

  .denario-gallery {
    margin-top: 48px;
    gap: 16px;
  }

  .denario-slide {
    border-radius: 12px;
  }
}