/* 01 / image and 02 / context use the same cards and responsive media. */
#work .wl-context-copy { display: none; }
#work .wl-portfolio-view-switch {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-block: 0 20px;
}
#work .wl-portfolio-view-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  margin: 0;
  padding: 9px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted, #68685f);
  cursor: pointer;
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
#work .wl-portfolio-view-button svg { display: block; flex: none; }
#work .wl-portfolio-view-button[aria-pressed="true"] { color: var(--gold, #b38b28); }
#work .wl-portfolio-view-button::after {
  content: '';
  position: absolute;
  inset-block-end: 2px;
  inset-inline: 10px;
  block-size: 1px;
  background: currentColor;
  opacity: 0;
}
#work .wl-portfolio-view-button[aria-pressed="true"]::after { opacity: 1; }
#work .wl-portfolio-view-button:hover { color: var(--ink, #171813); }
#work .wl-portfolio-view-button:focus-visible { outline: none; }
#work .wl-portfolio-view-button:focus-visible::after {
  block-size: 2px;
  border-block-end: 2px solid var(--ink, #171813);
  background: none;
  opacity: 1;
}
#work .wl-portfolio-view-tip { display: none; }
.wl-portfolio-view-announcement {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keep every approved compact role on its own line, without shrinking the text. */
html #work .wl-card-scope ul { display: block; }
html #work .wl-card-scope li { overflow-wrap: normal; }
html #work .wl-carousel-card[data-wl-compact-caption] .wl-card-caption-layout {
  display: block;
  min-block-size: 0;
}
@container wl-caption (min-width: 22rem) {
  html #work .wl-card-caption-layout:has(.wl-card-details) {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 16px;
  }
}

/* The extra ID raises specificity above the inherited gallery grid rules. */
html #work#work[data-portfolio-view="context"] .wl-carousel-track {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  direction: ltr;
}
html #work#work[data-portfolio-view="context"] .wl-carousel-card:not([data-studio-clone]) {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--wl-gap, 24px);
  row-gap: 22px;
  align-items: start;
  padding-block: clamp(32px, 3.8vw, 56px);
  border-block-start: 1px solid var(--line, #e3e3dc);
  color: inherit;
  text-decoration: none !important;
  overflow: visible;
}
html #work#work[data-portfolio-view="context"] .wl-carousel-card:not([data-studio-clone]):first-child {
  padding-block-start: 0;
  border-block-start: 0;
}
html #work#work[data-portfolio-view="context"] .wl-carousel-screen {
  grid-column: 1 / span 6;
  grid-row: 1;
  min-inline-size: 0;
  inline-size: 100%;
  margin: 0;
  direction: ltr;
  aspect-ratio: 16 / 9;
}
html #work#work[data-portfolio-view="context"] .wl-carousel-caption { display: none !important; }
html #work#work[data-portfolio-view="context"] .wl-context-copy {
  display: block;
  grid-column: 8 / span 5;
  grid-row: 1;
  min-inline-size: 0;
  padding: 0;
  color: var(--ink, #171813);
  font: 400 16px/1.55 var(--sans, Arial, sans-serif);
  text-align: start;
  overflow-wrap: break-word;
}
html #work#work .wl-context-title {
  margin: 0 0 6px;
  padding: 0;
  color: inherit;
  font: 500 clamp(26px, 2.4vw, 34px)/1.15 var(--sans, Arial, sans-serif);
  letter-spacing: -.035em;
  text-align: inherit;
}
html #work#work .wl-context-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  color: var(--muted, #68685f);
  font: 400 13px/1.5 var(--sans, Arial, sans-serif);
}
html #work#work .wl-context-date { white-space: nowrap; }
html #work#work :is(.wl-context-status, .wl-context-languages)::before {
  content: '•';
  margin-inline-end: 8px;
  color: var(--gold, #b38b28);
}
html #work#work .wl-context-description {
  max-inline-size: 42ch;
  margin: 18px 0 0;
  font: inherit;
}
html #work#work .wl-context-contribution { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
html #work#work .wl-context-contribution dt {
  margin: 0 0 3px;
  color: var(--muted, #68685f);
  font-weight: 400;
}
html #work#work .wl-context-contribution dd { margin: 0; }
html #work#work .wl-context-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}
html #work#work .wl-context-copy > .wl-context-roles { margin-block-start: 12px; }
html #work#work .wl-context-roles li { display: block; margin: 0; padding: 0; }
html #work#work .wl-context-roles li:not(:last-child)::after { content: '•'; margin-inline: 7px; color: var(--muted, #68685f); }
html #work#work .wl-context-credits {
  margin: 18px 0 0;
  color: var(--muted, #68685f);
  font-size: 13px;
  line-height: 1.6;
}
html #work#work .wl-context-credit + .wl-context-credit { margin-block-start: 3px; }
html #work#work .wl-context-credit :is(dt, dd) { display: inline; margin: 0; font-weight: 400; }
html #work#work .wl-context-credit dt::after { content: ': '; }
html #work#work[data-portfolio-view="context"][data-portfolio-direction="rtl"] .wl-carousel-card { direction: rtl; }
html #work#work[data-portfolio-direction="rtl"] .wl-context-title { letter-spacing: normal; text-align: right; }

@media (min-width: 761px) and (max-width: 1099px) {
  html #work#work[data-portfolio-view="context"] .wl-carousel-screen { grid-column: 1 / span 5; }
  html #work#work[data-portfolio-view="context"] .wl-context-copy { grid-column: 6 / span 7; }
}
@media (max-width: 760px) {
  #work .wl-portfolio-view-switch { margin-block-end: 16px; }
  html #work#work[data-portfolio-view="context"] .wl-carousel-card:not([data-studio-clone]) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding-block: 28px;
  }
  html #work#work[data-portfolio-view="context"] .wl-carousel-screen { grid-column: 1; grid-row: 1; }
  html #work#work[data-portfolio-view="context"] .wl-context-copy { grid-column: 1; grid-row: 2; }
  html #work#work .wl-context-description { margin-block-start: 14px; }
  html #work#work .wl-context-title { font-size: 26px; }
}
/* LAB flips the grid placement while the text keeps its own writing direction. */
html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] {
  --wl-context-alignment: right;
}
html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"][data-portfolio-direction="rtl"] {
  --wl-context-alignment: left;
}
html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] :is(.wl-context-copy, .wl-context-title, .wl-context-description) {
  text-align: var(--wl-context-alignment);
}
html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] .wl-context-description {
  margin-inline-start: auto;
}
html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] :is(.wl-context-meta, .wl-context-roles) {
  justify-content: flex-end;
}
@media (min-width: 761px) {
  html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] .wl-carousel-screen { grid-column: 7 / span 6; }
  html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] .wl-context-copy { grid-column: 1 / span 5; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] .wl-carousel-screen { grid-column: 8 / span 5; }
  html:is([data-wl-composition="right"], .wl-reading-reversed) #work#work[data-portfolio-view="context"] .wl-context-copy { grid-column: 1 / span 7; }
}

@media (prefers-reduced-motion: reduce) {
  #work .wl-portfolio-view-button { transition: none; }
}
html.motion-paused #work .wl-portfolio-view-button { transition: none; }