/* A contact sheet for retouches and a separate two-up display for design sets. */
.work .work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 15px;
}
.work-grid > .work-card { grid-column: span 4; min-width: 0; }
.work-grid > .wide { grid-column: 1 / -1; }
.work-grid > .proof-card { grid-column: span 2; }
.work-grid > .campaign-card { grid-column: span 6; }

.work .proof-card {
  --paper-tab: #dcecf8;
  border-radius: 11px;
  border: 1px solid #bbb3d2;
  box-shadow: 0 3px 0 #d9d4e9;
  display: flex;
  flex-direction: column;
}
.proof-card:nth-of-type(3n + 2) { --paper-tab: #e0d9f7; }
.proof-card:nth-of-type(3n + 3) { --paper-tab: #d4e9d9; }
.work .proof-card[data-category="jewelry"] { --paper-tab: #ffe0c8; }
.proof-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 7px 9px;
  min-height: 31px;
  background: var(--paper-tab);
  border-bottom: 1px solid #33295425;
  font: 650 clamp(10px, .83vw, 12px)/1.2 var(--body);
  color: #372f58;
}
.proof-bar i {
  width: 13px;
  height: 4px;
  flex: none;
  background: radial-gradient(circle, #73698c 1.45px, transparent 1.7px) 0 0 / 6px 4px repeat-x;
}
.work .proof-card .work-media {
  margin: 7px 7px 0;
  aspect-ratio: 1 / 1.02;
  background: #fbfafa;
  border-radius: 5px;
  border: 1px solid #30286412;
  overflow: hidden;
}
.proof-card .work-media > img { object-fit: contain; }
.work .proof-card.swap .zoom-btn {
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  opacity: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  cursor: zoom-in;
}
.work .proof-card.swap .zoom-btn:is(:hover,:focus-visible) { background: transparent; }
.proof-card.swap .zoom-btn svg {
  position: absolute;
  top: 5px;
  right: 5px;
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  padding: 5px;
  background: #fffdf9f5;
  border: 1px solid #a69abd;
  border-radius: 50%;
  color: var(--ink);
}
.work .proof-card .work-caption {
  align-items: flex-start;
  flex: 1;
  padding: 10px 9px 9px;
  gap: 5px;
}
.proof-card .work-caption h3 {
  font-size: clamp(14px,1.1vw,17px);
  line-height: 1.16;
  letter-spacing: -.026em;
}
.work .proof-card .work-caption .circle-link {
  width: 23px; height: 23px; border-color: #cec6da;
}
.proof-card .circle-link .icon { width: 12px; height: 12px; }
.proof-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #cbc4d8;
  background: #f6f3fa;
  border-radius: 7px;
  margin: 0 9px 10px;
  padding: 2px;
}
.proof-switch button {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 2px;
  color: #51496b;
  font: 600 11px/1.15 var(--body);
}
.proof-switch [aria-pressed="true"] { color: #294335; background: #d5ebdc; border-color: #b3cebc; }
.proof-switch [data-view="before"][aria-pressed="true"] { color: #573729; background: #ffdfc6; border-color: #e4bf9e; }
.work .proof-card:hover { transform: none; border-color: #9b8bb4; }

/* Real artwork is printed on three overlapping sheets. */
.work-heading[data-category="design"] { margin-top: 20px; padding-top: 30px; }
.work-heading[data-category="design"] h3 { display: flex; align-items: center; gap: 11px; }
.board-symbol { width: 35px; height: 35px; flex: none; transform: rotate(-6deg); }
.work .campaign-card {
  --board: #dbe7f5;
  --board-border: #aea9c6;
  border: 1px solid var(--board-border);
  border-radius: 15px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 3px 0 #d8d2e8;
  transform: none;
}
.campaign-card:nth-of-type(3n + 2) { --board: #fae1ce; }
.campaign-card:nth-of-type(3n) { --board: #dfecde; }
.work .campaign-card .work-media {
  aspect-ratio: 2.1;
  width: 100%;
  position: relative;
  background-color: var(--board);
  background-image: radial-gradient(#65587c48 .75px, transparent .95px);
  background-size: 11px 11px;
  border-bottom: 1px solid var(--board-border);
  isolation: isolate;
  overflow: hidden;
}
.campaign-cover::before, .campaign-cover::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
  border: solid #857995;
}
.campaign-cover::before { left: 13px; top: 13px; border-width: 1.5px 0 0 1.5px; }
.campaign-cover::after { right: 13px; bottom: 13px; border-width: 0 1.5px 1.5px 0; }
.campaign-sheet {
  --spread: 0%;
  --angle: 0deg;
  --lift: -1%;
  position: absolute; top: 50%; left: 50%;
  display: block; width: 34.5%; aspect-ratio: 1;
  background: white; padding: 4px;
  border: 1px solid #8c829d;
  border-radius: 4px;
  box-shadow: 2px 5px 0 #56456e23, 0 6px 13px #46334e17;
  transform: translate(-50%, -50%) translate(var(--spread),var(--lift)) rotate(var(--angle));
  cursor: zoom-in;
  transition: box-shadow .23s ease, scale .23s ease;
}
.campaign-sheet.sheet-left { --spread: -75%; --angle: -10deg; --lift: 5%; z-index: 1; }
.campaign-sheet.sheet-right { --spread: 75%; --angle: 9deg; --lift: 4%; z-index: 2; }
.campaign-sheet.sheet-front { z-index: 3; }
.campaign-sheet:focus-visible { z-index: 5; outline-color: var(--ink); }
.work .campaign-sheet img {
  position: static;
  width: 100%; height: 100%;
  display: block; object-fit: contain;
  border-radius: 2px;
}
.work .campaign-card .work-caption { padding: 19px 20px 12px; gap: 14px; align-items: start; }
.campaign-card .work-caption h3 { font-size: clamp(21px,1.8vw,28px); letter-spacing: -.037em; }
.campaign-card .work-caption p { font-size: 13px; line-height: 1.55; margin-top: 7px; }
.campaign-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 20px; padding: 10px 0 14px;
  border-top: 1px solid #ddd6e6;
}
.open-campaign {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; background: #eae3fa;
  color: var(--ink); border-radius: 7px; padding: 7px 11px;
  font: 650 12px/1.2 var(--body);
}
.open-campaign:hover { background: #dcd1f4; }
.campaign-count { color: #584e6e; font: 550 12px/1.4 var(--body); }
@media (prefers-reduced-motion: no-preference) {
  .board-in-view .campaign-sheet { animation: unfold-sheets .62s cubic-bezier(.18,.68,.25,1) backwards; }
  .board-in-view .sheet-right { animation-delay: .07s; }
  .board-in-view .sheet-front { animation-delay: .04s; }
  @keyframes unfold-sheets {
    from { transform: translate(-50%,-50%) translate(0,8%) rotate(0); }
    to { transform: translate(-50%,-50%) translate(var(--spread),var(--lift)) rotate(var(--angle)); }
  }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .campaign-sheet:hover { scale: 1.025; box-shadow: 0 9px 18px #66507a40; }
  .proof-card.swap .zoom-btn:hover svg { background: #e4ddfa; }
}

/* Listing detail: one readable image, direct thumbnails and keyboard navigation. */
.work-lightbox:has(.listing-viewer) { width: min(780px,94vw); padding: 16px; }
.viewer-header { padding: 0 43px 12px 2px; }
.viewer-header h3 { font-size: clamp(19px,2vw,26px); letter-spacing: -.035em; }
.viewer-stage {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 38px;
  gap: 8px; align-items: center;
  border: 1px solid #d6cee5; border-radius: 10px;
  padding: 8px; background: #e8e3f2;
}
.viewer-image {
  width: 100%;
  height: min(55dvh,540px);
  grid-column: 2;
  grid-row: 1;
  object-fit: contain;
}
.viewer-back, .viewer-next {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ada1c1;
  background: #fffdf9; color: var(--ink); font: 600 18px/1 var(--body);
  grid-row: 1;
}
.viewer-back {grid-column:1}
.viewer-next {grid-column:3}
.viewer-back:hover,.viewer-next:hover { background: #dcd3f0; }
.viewer-bottom { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-width: 0; }
.viewer-index { min-width: 44px; font: 600 13px var(--body); color: var(--ink); white-space: nowrap; }
.viewer-thumbs {
  position: relative;
  display: flex; overflow-x: auto; gap: 5px; padding: 4px 2px 7px;
  scrollbar-width: thin; min-width: 0;
}
.viewer-thumbs button {
  flex: 0 0 40px; height: 40px;
  border: 1px solid #c2b8d5; border-radius: 5px; padding: 2px; background: white;
}
.viewer-thumbs button[aria-pressed="true"] { border: 2px solid #534385; padding: 1px; }
.viewer-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.viewer-description { font-size: 13px; line-height: 1.5; margin: 5px 2px 0; color: #514963; }
@media (max-width:1099px) {
  .work-grid > .proof-card { grid-column: span 4; }
  .work .proof-card .work-media { aspect-ratio: 1.35; }
  .work .proof-card .work-caption h3 { font-size: 16px; }
}
@media (max-width:700px) {
  .work .work-grid { gap: 12px; }
  .work-grid > .proof-card { grid-column: span 6; }
  .work-grid > .campaign-card { grid-column: 1 / -1; }
  .work .proof-card .work-media { aspect-ratio: 1.35; }
  .work .campaign-card .work-media { aspect-ratio: 2.1; }
}
@media (max-width:420px) {
  .work .work-grid { gap: 11px; }
  .work .proof-card .work-caption h3 { font-size: 14px; }
  .work .proof-card .work-caption { padding: 8px 7px; }
  .proof-switch { margin: 0 7px 8px; }
  .proof-switch button { padding: 6px 2px; }
  .work-lightbox:has(.listing-viewer) { padding: 9px; }
  .viewer-stage { grid-template-columns: 26px minmax(0,1fr) 26px; gap: 4px; padding: 4px; }
  .viewer-back,.viewer-next { width: 26px; height: 30px; }
  .viewer-image { height: auto; aspect-ratio: 1; }
}

.work-heading[data-category="ads"] { margin-top: 20px; padding-top: 30px; }
.work-heading[data-category="ads"] h3 { display: flex; align-items: center; gap: 11px; }
.work .social-card { --board: #f5ddcd; --board-border: #c6a997; }
.work .email-card { --board: #d8e8e3; --board-border: #a5bcb4; }
.work .social-card .campaign-cover {
  background-image: linear-gradient(125deg,#ffefdd00 50%,#f0c4ad 50.2%);
  background-size: 100% 100%;
}
.work .email-card .campaign-cover {
  background-image: linear-gradient(#899e9629 1px,transparent 1px),linear-gradient(90deg,#899e9629 1px,transparent 1px);
  background-size: 18px 18px;
}
.social-card .campaign-sheet {
  width: 35%; aspect-ratio: 1 / 1.14;
  padding: 6px 5px 4.5%;
  background: #fffaf0;
  border: 1px solid #988376; border-radius: 5px;
}
.social-card .sheet-post { --spread: -50%; --lift: -2%; --angle: -7deg; z-index: 1; }
.social-card .sheet-post-alt { --spread: 48%; --lift: 4%; --angle: 7deg; z-index: 2; }
.social-card .campaign-sheet::after {
  content: ""; position: absolute; left: 7%; right: 7%; bottom: 4%; height: 7%;
  background: radial-gradient(circle at 4% 50%,#d9c3b5 0 3px,transparent 3.7px),
              linear-gradient(90deg,transparent 10%,#decbbd 10% 38%,transparent 38%) left center / 100% 2px no-repeat;
}
.email-card .campaign-sheet {
  aspect-ratio: auto; overflow: hidden; background: #fffdf8; border: 1.5px solid #788780;
}
.email-card .sheet-desktop {
  width: 63%; height: 80%; --spread: -12%; --lift: 1%; --angle: -3deg;
  border-radius: 7px; padding: 15px 4px 4px;
}
.email-card .sheet-desktop::before {
  content: ""; position: absolute; left: 5px; top: 4px; width: 23px; height: 6px;
  background: radial-gradient(circle,#adbeb3 2px,transparent 2.4px) left center / 7px 6px repeat-x;
}
.email-card .sheet-phone {
  width: 23%; height: 71%; --spread: 100%; --lift: 13%; --angle: 5deg; z-index: 2;
  border-radius: 12px; border-width: 2px; padding: 9px 3px 5px;
}
.email-card .sheet-phone::before {
  content: ""; position: absolute; left: 39%; right: 39%; top: 3px;
  height: 2px; border-radius: 2px; background: #7f9187;
}
.work .email-card .campaign-sheet img { object-fit: cover; object-position: center top; }
.email-card .open-campaign { color: #284938; background: #dbecdf; }
.social-card .open-campaign { color: #553d31; background: #f7e2d4; }
.email-card .open-campaign:hover { background: #c9e1d1; }
.social-card .open-campaign:hover { background: #f0d2be; }
.single-cover .campaign-sheet { --spread: 0%; }
.viewer-canvas { grid-column: 2; grid-row: 1; min-width: 0; }
.viewer-canvas img { display: block; }
.email-viewer .viewer-canvas {
  height: min(55dvh,580px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 4px; background: #fff; scrollbar-color: #9284ac #eee9f4;
}
.email-viewer .viewer-image { width: 100%; height: auto; aspect-ratio: auto; }
.email-viewer .viewer-thumbs img { object-fit: cover; object-position: top; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .email-card .campaign-sheet img { transition: object-position .5s ease-out; }
  .email-card .campaign-sheet:is(:hover,:focus-visible) img { object-position: center 48%; transition-duration: 2s; }
}