html[data-wl-portfolio] #work [data-expand-projects] { display: none !important; }
html[data-wl-portfolio] #work .wl-index-controls { min-height: 0; }

html[data-wl-viewer-open] { overflow: hidden; }
.wl-project-viewer {
  --wl-viewer-paper: var(--bg, #FCFCF9);
  --wl-viewer-bar: calc(4rem + env(safe-area-inset-top, 0px));
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--wl-viewer-paper);
  color: var(--ink, #171813);
}
.wl-project-viewer::backdrop { background: transparent; }
.wl-project-viewer[open] { animation: wl-viewer-enter 180ms ease-out both; }
@keyframes wl-viewer-enter { from { opacity: 0; } to { opacity: 1; } }
.wl-viewer-bar {
  position: sticky;
  z-index: 6;
  inset-block-start: 0;
  box-sizing: border-box;
  height: var(--wl-viewer-bar);
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: var(--wl-viewer-scrollbar, 0px);
  border-block-end: 1px solid var(--line, #E3E3DC);
  background: var(--wl-viewer-paper);
}
.wl-viewer-bar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  inline-size: min(var(--wl-shell-width, 1440px), calc(100% - 40px));
  block-size: 100%;
  margin-inline: auto;
}
.wl-viewer-actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 20px);
  min-inline-size: 0;
}
.wl-viewer-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-block-size: 44px;
  color: inherit;
  font: 500 17px/1.2 var(--sans, Arial, sans-serif);
  letter-spacing: -.04em;
  text-decoration: none;
  white-space: nowrap;
}
.wl-viewer-brand span { color: var(--gold, #D4AF37); }
.wl-viewer-identity {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 0;
  gap: clamp(10px, 1.35vw, 20px);
}
.wl-viewer-identity .wl-viewer-brand { flex: none; }
.wl-project-switcher {
  position: relative;
  min-inline-size: 0;
}
.wl-viewer-bar .wl-project-switch {
  max-inline-size: 100%;
  padding-inline-start: clamp(10px, 1.35vw, 20px);
  color: var(--muted, #62635B);
  font-size: .8125rem;
}
.wl-project-switch > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-project-switch::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  block-size: 1rem;
  inline-size: 1px;
  background: var(--line, #E3E3DC);
}
.wl-project-switch svg { flex: none; }
.wl-project-choices {
  position: absolute;
  z-index: 2;
  inset-block-start: 100%;
  inset-inline-start: 0;
  inline-size: min(20rem, calc(100vw - 40px));
  max-block-size: min(68dvh, 36rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--wl-viewer-paper);
  border: 1px solid var(--line, #E3E3DC);
  box-shadow: 0 14px 32px rgb(0 0 0 / .08);
}
.wl-project-choices[hidden] { display: none; }
.wl-project-choices ul { margin: 0; padding: 6px; list-style: none; }
.wl-project-choices :is(a, [aria-current="page"]) {
  display: flex;
  align-items: center;
  min-block-size: 40px;
  padding: 7px 12px;
  color: inherit;
  font: 400 .875rem/1.35 var(--sans, Arial, sans-serif);
  text-decoration: none;
}
.wl-project-choices [aria-current="page"] { color: var(--muted, #62635B); }
.wl-project-choices a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, currentColor 6%, transparent);
}
@media (max-width: 800px) {
  .wl-project-switcher { position: static; }
  .wl-project-switch::before { content: none; }
  .wl-viewer-bar .wl-project-switch { padding-inline-start: 0; }
  .wl-project-choices :is(a, [aria-current="page"]) { min-block-size: 44px; }
}
.wl-viewer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 2vw, 32px);
}
.wl-viewer-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  font: 400 .875rem/1.2 var(--sans, Arial, sans-serif);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.wl-viewer-nav a:is(:hover, [aria-current="location"])::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 7px;
  block-size: 1px;
  background: var(--gold, #D4AF37);
}
.wl-viewer-actions { justify-content: flex-end; }
@media (max-width: 800px) {
  .wl-project-viewer { --wl-viewer-bar: calc(6rem + env(safe-area-inset-top, 0px)); }
  .wl-viewer-bar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr 1fr;
    column-gap: 8px;
    row-gap: 0;
  }
  .wl-viewer-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
  }
  .wl-viewer-nav a { min-inline-size: min(44px, 16vw); font-size: .8125rem; }
  .wl-viewer-actions { gap: 4px; }
}
@media (max-width: 360px) {
  .wl-viewer-nav { gap: 3px; }
}
#work [data-wl-compact-caption] .wl-carousel-caption strong,
.wl-viewer-bar h2 {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#work .wl-carousel-card[data-wl-compact-caption] .wl-carousel-number,
#work .wl-carousel-card[aria-haspopup="dialog"][aria-controls="wl-project-viewer"] .wl-carousel-arrow {
  display: none !important;
}
@media (hover: hover) and (pointer: fine) {
  #work .wl-carousel-card > .wl-carousel-caption {
    opacity: 0;
    transition: opacity 180ms ease-out;
  }
  #work .wl-carousel-card:has(> .wl-carousel-screen:hover) > .wl-carousel-caption,
  #work .wl-carousel-track:not(:has(> .wl-carousel-card > .wl-carousel-screen:hover))
    > .wl-carousel-card:focus-visible > .wl-carousel-caption {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #work .wl-carousel-card > .wl-carousel-caption { transition: none; }
}
html.motion-paused #work .wl-carousel-card > .wl-carousel-caption {
  transition: none;
}
#work .wl-card-caption-stack {
  flex: 1 1 100%;
  min-inline-size: 0;
  container: wl-caption / inline-size;
  font: 400 .875rem/1.25rem var(--sans, Arial, sans-serif);
}
#work#work .wl-carousel-card[data-wl-compact-caption] .wl-card-kind {
  display: block;
  min-block-size: 0;
  margin: 0 !important;
  font: 600 1rem/1.25rem var(--sans, Arial, sans-serif) !important;
  color: var(--ink, #171813);
}
.wl-card-details {
  min-inline-size: 0;
  margin-block-start: .25rem;
  color: var(--ink, #171813);
}
.wl-card-scope { text-align: right; }
.wl-card-scope ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wl-card-scope li { overflow-wrap: anywhere; }
.wl-card-meta {
  display: flex;
  align-items: baseline;
  column-gap: .5rem;
  color: var(--muted, #62635B);
}
.wl-card-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wl-card-status {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
}
.wl-card-date + .wl-card-status {
  padding-inline-start: .5rem;
  background: linear-gradient(var(--line, #E3E3DC), var(--line, #E3E3DC)) left center / 1px .75rem no-repeat;
}
html[dir=rtl] .wl-card-date + .wl-card-status { background-position: right center; }
.wl-card-status::before {
  content: "";
  flex: none;
  align-self: center;
  box-sizing: border-box;
  inline-size: .375rem;
  block-size: .375rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.wl-card-status[data-stage="online"]::before { background: currentColor; }
.wl-card-status[data-stage="ongoing"]::before { background: #D4AF37; border-color: #9E7C12; }
@container wl-caption (min-width: 22rem) {
  .wl-card-caption-layout:has(.wl-card-details) {
    display: grid;
    grid-template-columns: minmax(0, 1.618034fr) minmax(0, 1fr);
    grid-template-areas: "context details" "meta details";
    grid-template-rows: auto 1fr;
    column-gap: 1rem;
    min-block-size: 3.75rem;
    align-items: start;
    align-items: first baseline;
  }
  .wl-card-context { grid-area: context; }
  .wl-card-meta { grid-area: meta; align-self: start; }
  .wl-card-details { grid-area: details; margin-block-start: 0; }
}
@container wl-caption (width < 22rem) {
  .wl-card-scope ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: .75rem;
  }
}
.wl-viewer-bar button {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 0;
  white-space: nowrap;
  font: 500 clamp(.72rem, 1.25vw, .85rem)/1.3 var(--sans, Arial, sans-serif);
  cursor: pointer;
}
.wl-viewer-bar button:hover { text-decoration: underline; }
.wl-viewer-bar :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

html[data-wl-portfolio] #projects-index,
html[data-wl-portfolio] #projects-inner { display: none !important; }
.wl-viewer-stage {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  inline-size: 100%;
  block-size: calc(100% - var(--wl-viewer-bar));
  min-block-size: 0;
  background: var(--wl-viewer-paper);
}
.wl-viewer-stage > iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
.wl-viewer-stage[data-presentation] {
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
}
html[data-wl-portfolio] .wl-viewer-stage #projects-inner[data-wl-case-presentation] {
  display: block !important;
  box-sizing: border-box;
  inline-size: min(var(--wl-shell-width, 1440px), calc(100% - 2rem)) !important;
  max-inline-size: none !important;
  margin-inline: auto !important;
  overflow: visible !important;
}
html[data-wl-portfolio] #projects-inner[data-wl-case-presentation] > :not([data-wl-selected-presentation]),
html[data-wl-portfolio] #projects-inner[data-wl-case-presentation] details.project > summary,
html[data-wl-portfolio] #projects-inner[data-wl-case-presentation] :is(.case-sequence, .wl-case-footer-back, .case-back) {
  display: none !important;
}
.wl-viewer-stage [data-wl-selected-presentation] {
  animation: wl-viewer-enter 180ms ease-out both;
}
.wl-viewer-bar button[hidden] { display: none; }
.wl-viewer-stage > iframe {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.wl-viewer-stage[data-ready] > iframe {
  opacity: 1;
  pointer-events: auto;
}
.wl-viewer-stage[aria-busy="true"]::after {
  content: "";
  grid-area: 1 / 1;
  inline-size: clamp(72px, 14vw, 144px);
  block-size: 1px;
  background: var(--gold, #D4AF37);
  pointer-events: none;
  transform-origin: left center;
  animation: wl-viewer-load 1.55s 120ms cubic-bezier(.33, 0, .24, 1) infinite both;
}
html[dir="rtl"] .wl-viewer-stage[aria-busy="true"]::after { transform-origin: right center; }
@keyframes wl-viewer-load {
  0% { opacity: 0; transform: scaleX(.04); }
  14% { opacity: 1; }
  76% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-project-viewer[open], .wl-viewer-stage[aria-busy="true"]::after,
  .wl-viewer-stage [data-wl-selected-presentation] { animation: none; }
  .wl-viewer-stage > iframe { transition: none; }
}
html.motion-paused .wl-project-viewer[open],
html.motion-paused .wl-viewer-stage[aria-busy="true"]::after,
html.motion-paused .wl-viewer-stage [data-wl-selected-presentation] { animation: none; }
html.motion-paused .wl-viewer-stage > iframe { transition: none; }

/* A blank HEDJ surface for the archive tile. */
#work .wl-archive-blank {
  position: relative;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 58%, #FFFFFF 44%, #FCFCF9 75%, #F1F1EB 100%);
}
#work .wl-archive-blank::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -5%;
  background:
    radial-gradient(ellipse 38% 82% at 0% 50%, rgb(227 227 220 / .88), transparent 78%),
    radial-gradient(ellipse 38% 82% at 100% 50%, rgb(234 234 228 / .82), transparent 78%),
    radial-gradient(ellipse 76% 48% at 50% 100%, rgb(241 241 235 / .64), transparent 82%);
  opacity: .64;
  transform: translate3d(-1.5%, 0, 0) scale(1.04);
  transform-origin: center;
  animation: wl-archive-drift 32s cubic-bezier(.45, 0, .55, 1) infinite alternate,
    wl-archive-breathe 17s ease-in-out infinite alternate;
  will-change: transform, opacity;
  pointer-events: none;
}
#work .wl-archive-blank::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: inset 0 9px 24px -16px #E3E3DC;
  pointer-events: none;
}
@keyframes wl-archive-drift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1.04); }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.08); }
}
@keyframes wl-archive-breathe {
  from { opacity: .36; }
  to { opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  #work .wl-archive-blank::after { animation: none; opacity: .55; transform: none; }
}
html.motion-paused #work .wl-archive-blank::after {
  animation-play-state: paused;
  will-change: auto;
}