/* Selected work: a restrained image crop, generous gutters, and a quiet reading column. */
#zz_work_lb {
  --zz-work-panel-gap: clamp(1rem, 2.7777777778vw, 2.5rem);
  display: flex;
  padding: var(--zz-work-panel-gap);
  background: #f3f3f1;
  color: #262627;
  overflow: hidden;
}
#zz_work_lb[hidden] { display: none; }
#zz_work_lb .zz-panel-lb-inner {
  position: relative;
  width: min(100%, 76rem);
  max-height: calc(100dvh - 2 * var(--zz-work-panel-gap));
  margin: auto;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
#zz_work_lb .zz-web-worklb-scroll {
  max-height: calc(100dvh - 2 * var(--zz-work-panel-gap));
  padding: clamp(3.75rem, 5.5555555556vw, 5rem) clamp(2.5rem, 4.4444444444vw, 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#zz_work_lb .zz-panel-lb-close {
  position: absolute;
  inset: clamp(.75rem, 1.3888888889vw, 1.25rem) clamp(.75rem, 1.3888888889vw, 1.25rem) auto auto;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  background: #fff;
  font-size: 1.75rem;
  color: #262627;
}
#zz_work_lb .zz-web-workdetail {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(3rem, 5.5555555556vw, 5rem);
  row-gap: 2.5rem;
}
#zz_work_lb .zz-web-workdetail-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  align-self: center;
}
#zz_work_lb .zz-web-workdetail-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
#zz_work_lb .zz-web-workdetail-name {
  margin: 0;
  font-size: clamp(1.125rem, 1.6666666667vw, 1.5rem);
  font-weight: 700;
  line-height: 2;
  letter-spacing: .02em;
}
#zz_work_lb .zz-web-workdetail-lead {
  margin: 1rem 0 0;
  font-size: clamp(.875rem, 1.0416666667vw, .9375rem);
  font-weight: 400;
  line-height: 2.2;
}
#zz_work_lb .zz-web-workdetail .zz-kotobun-text { margin-top: 1.5rem; }
#zz_work_lb .zz-web-workdetail .zz-kotobun-text p {
  font-size: clamp(.8125rem, .9375vw, .84375rem);
  line-height: 2.3;
  -webkit-text-stroke: 0;
}
#zz_work_lb .zz-web-workdetail .zz-kotobun-text p + p { margin-top: 1em; }
#zz_work_lb .zz-web-work-scope {
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(38, 38, 39, .14);
}
#zz_work_lb .zz-web-work-scope dt {
  font-size: .6875rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .02em;
  color: #6f727b;
}
#zz_work_lb .zz-web-work-scope dd { margin: .5rem 0 0; }
#zz_work_lb .zz-web-work-scope ul { display: block; }
#zz_work_lb .zz-web-work-scope li {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: .75rem;
  line-height: 2.2;
}
#zz_work_lb .zz-web-work-scope li + li::before {
  content: ' / ';
  white-space: pre;
  color: rgba(38, 38, 39, .4);
}
#zz_work_lb .zz-web-workdetail-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  margin: 1.75rem 0 0;
  font-size: .75rem;
  line-height: 2.2;
}
#zz_work_lb .zz-web-workdetail-links a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
  padding-block: .375rem;
  color: #262627;
  text-decoration: underline;
  text-decoration-color: rgba(38, 38, 39, .3);
  text-underline-offset: .5em;
  transition: text-decoration-color .25s ease;
}
#zz_work_lb .zz-web-workdetail-links a:hover { text-decoration-color: currentColor; }
#zz_work_lb a:focus-visible, #zz_work_lb button:focus-visible {
  outline: 2px solid #262627;
  outline-offset: 4px;
}
/* Long supplied screenshots are presented as a selected frame on the detail page too. */
.zz-work-detail__hero.zz-work-detail__hero--screen {
  width: min(76%, 60rem);
  margin: clamp(2rem, 4.1666666667vw, 3.75rem) auto 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.zz-work-detail__hero--screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 768px) {
  #zz_work_lb { --zz-work-panel-gap: .875rem; }
  #zz_work_lb .zz-web-worklb-scroll { padding: 4.5rem 1.5rem 2.5rem; }
  #zz_work_lb .zz-web-workdetail { grid-template-columns: 1fr; gap: 2.5rem; }
  #zz_work_lb .zz-web-workdetail-name { font-size: 1.125rem; }
  #zz_work_lb .zz-web-workdetail-lead { margin-top: .875rem; }
  #zz_work_lb .zz-web-workdetail .zz-kotobun-text { margin-top: 1.5rem; }
  #zz_work_lb .zz-web-workdetail .zz-kotobun-text p { font-size: .8125rem; }
  #zz_work_lb .zz-web-workdetail-links { column-gap: 1.5rem; }
  .zz-work-detail__hero.zz-work-detail__hero--screen { width: 100%; margin-top: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  #zz_work_lb { animation: none; }
  #zz_work_lb .zz-web-workdetail-links a { transition: none; }
}