/* Shared type, interactions, and accessibility for the portfolio's secondary pages. */
@font-face {
  font-family: "Lisu Bosa";
  src: url("assets/portfolio/lisu-bosa-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Lisu Bosa";
  src: url("assets/portfolio/lisu-bosa-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Lisu Bosa";
  src: url("assets/portfolio/lisu-bosa-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Lisu Bosa";
  src: url("assets/portfolio/lisu-bosa-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lisu Bosa";
  src: url("assets/portfolio/lisu-bosa-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

.portfolio-page {
  --100dvh: 100vh;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
@supports (height: 100dvh) {
  .portfolio-page { --100dvh: 100dvh; }
}
.portfolio-layout {
  width: 100%;
  overflow-x: clip;
}
.portfolio-layout img { max-width: none; }
.page-about .site-nav a { font-weight: 500; }
.portfolio-layout figure { margin: 0; }
.portfolio-layout h1, .portfolio-layout h2 {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-variation-settings: inherit;
}
.portfolio-layout button { font: inherit; cursor: pointer; }
.portfolio-layout [hidden] { display: none !important; }
.portfolio-layout a:focus-visible, .portfolio-layout button:focus-visible { outline-offset: -2px; }
.portfolio-layout .textContents ul, .portfolio-layout .textContents ol { padding-inline-start: 1.5em; }
.portfolio-layout .textContents ul { list-style: disc; }
.portfolio-layout .textContents ol { list-style: decimal; }
.portfolio-layout .adjustLetterSpacing::after {
  content: "";
  margin-left: calc(var(--letter-spacing, 0px) * -1);
}

.is-waiting { opacity: 0; }
.is-waiting:focus-within { opacity: 1; }
.has-revealed { animation: page-reveal .55s var(--ease) both; }
[data-reveal="rise"] { --reveal-start: translateY(40px); }
@keyframes page-reveal {
  from { opacity: 0; transform: var(--reveal-start, none); }
  to { opacity: 1; transform: none; }
}

#container [data-project-filter] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 19px;
  border: 1px dashed #000;
  border-radius: 100px;
  color: #000;
  background: #fff;
  white-space: nowrap;
}
#container [data-project-filter] * {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
#container [data-project-filter][aria-pressed="true"] {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}
#container [data-project-filters] { flex-wrap: wrap; }

#container [data-process-toggle] { color: inherit; background: transparent; border: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page-map [data-process-toggle], [data-see-more] {
    transition: translate .3s var(--ease-out-cubic), scale .3s var(--ease-out-cubic);
  }
  .page-map [data-process-toggle]:hover { translate: 15px; scale: 1.34; }
  .page-map [data-process-toggle="research"][aria-expanded="false"]:hover { translate: 20px; }
  [data-see-more]:hover { translate: 15px; scale: 1.09; }
  [data-see-more="recognition"]:hover { scale: 1.05; }
}
.page-map { --detail-accent: var(--brown); }
[data-process-row] > * { transition: opacity .3s var(--ease-out-cubic); }
[data-process].is-expanded [data-process-row] > :not(:has([aria-expanded="true"])) { opacity: .35; }
#container .process-detail {
  flex-shrink: 0;
  width: 100%;
  padding: clamp(20px, 4vw, 50px);
  border: 1px dashed var(--detail-accent, var(--blue));
  border-radius: 22px;
  color: #000;
  overflow-wrap: anywhere;
  animation: process-reveal .3s var(--ease-out-cubic) both;
}
#container .process-detail h2 {
  color: var(--detail-accent, var(--blue));
  font: 800 clamp(32px, 5vw, 56px)/1.36 Bricolage, sans-serif;
  font-variation-settings: "opsz" 14;
}
#container .process-detail h3 {
  font: 700 24px/1.2 "Lisu Bosa", Georgia, serif;
}
#container .process-detail p {
  margin-block: .65em;
  font: 500 16px/1.36 "Lisu Bosa", Georgia, serif;
  white-space: pre-line;
}
#container .process-detail strong { font-weight: 700; }
.page-eazy #container .process-detail h3 { font-size: 28px; }
.page-eazy #container .process-detail p { font-size: 24px; }
#container .process-detail > :not(:first-child) { margin-top: 24px; }
#container .process-detail img {
  width: auto;
  height: auto;
  max-width: min(100%, 1000px);
  max-height: 720px;
  object-fit: contain;
  margin: 14px auto;
}
.process-images { display: flex; align-items: start; flex-wrap: wrap; gap: 16px; }
#container .process-images img { max-width: min(100%, 260px); }
@keyframes process-reveal {
  from { opacity: 0; transform: translateY(20px); }
}

#container .case-stat {
  display: block;
  margin-bottom: 12px;
  color: var(--stat-color, var(--pale-blue));
  font: 800 clamp(48px, 7vw, 96px)/.95 Bricolage, sans-serif;
  font-variation-settings: "opsz" 96;
  white-space: nowrap;
}
.page-dextalk { --stat-color: var(--yellow); }
.page-snm { --stat-color: var(--blue); }
.case-stat span { display: inline-block; white-space: pre; }
.case-stat.has-revealed { animation: none; }
.case-stat.has-revealed span {
  animation: stat-arrival .42s var(--ease) calc(var(--digit) * 45ms) both;
}
@keyframes stat-arrival {
  from { opacity: 0; transform: translateY(.35em); }
}

@media (prefers-reduced-motion: reduce) {
  .is-waiting { opacity: 1; }
}

#container .case-ornament {
  position: absolute;
  pointer-events: none;
  animation: ornament-spin 6s linear infinite;
  animation-play-state: paused;
}
#container .case-ornament.is-spinning { animation-play-state: running; }
#container .case-ornament--reverse {
  animation-duration: 3s;
  animation-direction: reverse;
}
@keyframes ornament-spin {
  to { rotate: 1turn; }
}
#container .gallery-preview {
  display: block;
  flex: none;
  width: var(--preview-width, 100%);
  height: var(--preview-height, auto);
  max-width: 100%;
  overflow: hidden;
  border-radius: 16px;
  cursor: zoom-in;
}
#container .gallery-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-viewer {
  max-width: 90vw;
  max-height: 88dvh;
  padding: 0;
  border: 0;
  border-radius: clamp(12px, 2.5vw, 32px);
  background: transparent;
  box-shadow: 0 12px 40px rgb(0 0 0 / 25%);
  overflow: visible;
}
.image-viewer[open] { animation: viewer-open .22s var(--ease) both; }
.image-viewer::backdrop { background: rgb(0 0 0 / 75%); }
.image-viewer img {
  max-width: 90vw;
  max-height: 88dvh;
  border-radius: inherit;
  object-fit: contain;
}
.image-viewer-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 300 40px/1 sans-serif;
  cursor: pointer;
}
.image-viewer-close:focus-visible { outline-color: #fff; }
body:has(.image-viewer[open]) { overflow: hidden; }
@keyframes viewer-open {
  from { opacity: 0; }
}