.showcase {
  --gallery-ink: #142e26;
  --gallery-paper: #fffdf6;
  --gallery-muted: #4f6157;
}
.design-intro {
  align-items: center;
  gap: 24px 52px;
  margin-bottom: 26px;
}
.design-intro h2 {
  font-size: clamp(38px, 4.3vw, 61px);
  max-width: 630px;
}
.design-intro p {
  color: var(--gallery-muted);
  font-size: 15px;
  max-width: 475px;
}
.design-intro .eyebrow { color: #33634f; }
.design-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 32px;
}
.design-jumps a {
  padding: 8px 14px;
  border: 1px solid #bac9bb;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  color: #234b3c;
  text-decoration: none;
}
.design-jumps a:hover { background: #e4eddb; }

.design-group + .design-group { margin-top: clamp(46px, 7vw, 83px); }
.design-group-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 19px;
  padding-bottom: 12px;
}
.design-group-head h3 {
  margin: 0;
  color: var(--gallery-ink);
  font: normal clamp(27px, 3vw, 39px)/1.15 Georgia, serif;
  letter-spacing: -.7px;
}
.design-group-head p { margin: 0; font-size: 13px; color: var(--gallery-muted); }
.publication-grid, .campaign-grid, .pitch-grid { display: grid; gap: 17px; }
.publication-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campaign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pitch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.publication, .campaign-piece, .pitch-case {
  min-width: 0;
  border-radius: 9px;
  border: 1px solid #d8ded1;
  background: var(--gallery-paper);
  overflow: hidden;
}
.gallery-art {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.gallery-art img { display: block; }
.publication-art {
  height: clamp(225px, 29vw, 350px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.publication-art img {
  width: auto;
  height: 78%;
  max-height: 268px;
  max-width: 72%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 17px 38px #08182c46;
  transition: transform .25s ease;
}
.publication-art:hover img { transform: translateY(-3px) rotate(-1deg); }
.publication-art.parrotica {
  background: radial-gradient(ellipse at 68% 11%, #5676aa 0, transparent 60%), #182d58;
}
.publication-art.adela {
  background: radial-gradient(ellipse at 33% 0, #655878 0, transparent 67%), #24273f;
}
.gallery-peek {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 9px;
  border-radius: 4px;
  background: #fffdf5;
  color: #203d33;
  border: 1px solid #ffffff60;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 10px #09241c25;
}
.gallery-art:hover .gallery-peek { color: #fffdf5; background: #265a47; }

.campaign-art {
  background: var(--stage, #e5e9f2);
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.campaign-art img {
  width: auto;
  height: 88%;
  max-width: 83%;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 12px 22px #0a222336;
  transition: transform .25s ease;
}
.campaign-art:hover img { transform: scale(1.035); }
.gallery-copy, .pitch-copy { padding: clamp(15px, 2.5vw, 25px); }
.gallery-kicker {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.15px;
  color: #436b56;
}
.gallery-copy h4, .pitch-copy h4 {
  margin: 0 0 10px;
  color: var(--gallery-ink);
  font: normal 24px/1.16 Georgia, serif;
  letter-spacing: -.38px;
}
.deck-cover-card { display: block; }
.deck-subtitle {
  display: block;
  margin-top: 5px;
  color: var(--gallery-muted);
  font: 700 13px/1.45 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
.gallery-copy p, .pitch-copy p {
  font-size: 14px;
  line-height: 1.62;
  margin: 0;
  color: var(--gallery-muted);
}
.gallery-copy .gallery-source {
  display: inline-block;
  margin-top: 14px;
  color: #254f3e;
  font-weight: 700;
  font-size: 12px;
  text-underline-offset: 3px;
}
.carousel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(15px, 2.2vw, 28px);
}
.carousel-grid .campaign-piece { display: grid; grid-template-rows: 1fr auto auto; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  background: #e4eff1;
}
.carousel-frame {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(8px, 2vw, 18px);
  height: clamp(320px, 42vw, 490px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.carousel-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 24px #12363f26;
}
.carousel-frame:focus-visible {
  outline: 3px solid #1b5663;
  outline-offset: -5px;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px clamp(12px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
  color: var(--gallery-muted);
  font-size: 12px;
}
.carousel-controls button {
  min-width: 74px;
  min-height: 44px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--gallery-paper);
  color: var(--gallery-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.carousel-controls button:hover:not(:disabled) { background: #d8ebee; }
.carousel-controls button:disabled { opacity: .45; cursor: default; }
.carousel-position { text-align: center; font-variant-numeric: tabular-nums; }
.carousel-controls[hidden], .gallery-modal-actions[hidden] { display: none; }
.design-context {
  font-size: 12px;
  margin: 16px 0 0;
  color: var(--gallery-muted);
}
.pitch-visual {
  padding: 19px;
  background: var(--pitch-bg, #deece4);
  color: var(--gallery-ink);
  min-height: 171px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.pitch-visual > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.pitch-visual ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.pitch-visual li {
  padding: 8px 5px;
  background: #fffcf2d0;
  border: 1px solid #214f3524;
  border-radius: 4px;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.pitch-visual li b {
  display: block;
  font-size: 15px;
  font-family: Georgia, serif;
  line-height: 1;
  margin-bottom: 5px;
  color: #376651;
}
.pitch-visual strong {
  font: normal 23px/1.1 Georgia, serif;
}
.pitch-copy dl { margin: 13px 0 0; }
.pitch-copy dt { font-size: 12px; font-weight: 700; margin-top: 10px; }
.pitch-copy dd { margin: 3px 0 0; color: var(--gallery-muted); font-size: 13px; }

.gallery-modal {
  width: min(760px, calc(100% - 28px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid #607768;
  border-radius: 10px;
  background: #fffdf6;
  color: #172f26;
  box-shadow: 0 22px 70px #0b1d17a0;
}
.gallery-modal::backdrop { background: #0c1c17c2; }
.gallery-modal-header, .gallery-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 17px;
}
.gallery-modal-header h2 {
  font: bold 15px/1.35 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  margin: 0;
}
.gallery-modal button {
  border: 1px solid #b0bfae;
  color: #244b3e;
  background: #fffdf6;
  border-radius: 5px;
  padding: 6px 11px;
  cursor: pointer;
  font-size: 13px;
}
.gallery-modal button:hover:not(:disabled) { background: #e5eddf; }
.gallery-modal button:disabled { opacity: .45; cursor: default; }
.gallery-modal-stage {
  margin: 0;
  display: grid;
  place-items: center;
  background: #e7ebe1;
  padding: 9px;
}
.gallery-modal-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(65dvh, 530px);
  object-fit: contain;
}
.gallery-modal-position { color: #465b4f; font-size: 12px; text-align: center; }
@media (max-width: 880px) {
  .campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pitch-grid { grid-template-columns: 1fr; }
  .pitch-case { display: grid; grid-template-columns: .75fr 1fr; }
  .pitch-grid.deck-cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pitch-case.deck-cover-card { display: block; }
}
@media (max-width: 620px) {
  .design-intro { gap: 15px; }
  .publication-grid, .campaign-grid, .carousel-grid, .pitch-case { grid-template-columns: 1fr; }
  .pitch-grid.deck-cover-grid { grid-template-columns: 1fr; }
  .carousel-frame { height: auto; aspect-ratio: 4 / 5; }
  .campaign-art { aspect-ratio: 10 / 7; }
  .publication-art { height: 235px; }
  .design-jumps { gap: 6px; }
  .design-jumps a { padding: 7px 10px; }
  .gallery-copy h4, .pitch-copy h4 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-art img { transition: none; }
}
.stage-templates { --stage: #dedcd1; }
.stage-status { --stage: #dbe7fa; }
.stage-sender { --stage: #dfe9f4; }
.stage-eid { --stage: #eee4d3; }
.stage-august { --stage: #e3e3da; }
.stage-november { --stage: #dce9fb; }
.partnership { --pitch-bg: #e9eed9; }
.expansion { --pitch-bg: #eee5d4; }