.case-yumo {
  --case-color-a: #1677ff;
  --case-color-b: #8ddcff;
  --case-color-c: #f3f5f7;
  --case-text-color: var(--case-color-b);
}

.case-yumo-partner {
  --case-color-a: #0ba779;
  --case-color-b: #78e4b8;
  --case-color-c: #e7fff2;
}

.case-archive-entry {
  --case-color-a: #7289b2;
  --case-color-b: #cad9f0;
  --case-color-c: #f4f7fc;
}

.case-stage-carma {
  --case-color-a: #8e6cff;
  --case-color-b: #c5a8ff;
  --case-color-c: #ffc2aa;
}

.case-navis {
  --case-color-a: #00a091;
  --case-color-b: #00ceb7;
  --case-color-c: #f9fbfb;
}

.case-workflows {
  --case-color-a: #ff82d1;
  --case-color-b: #96ddff;
  --case-color-c: #f3f3f1;
}

.case-rps {
  --case-color-a: #897cff;
  --case-color-b: #c4baff;
  --case-color-c: #ffbd53;
}

.case-fashion-queen {
  --case-color-a: #e264bd;
  --case-color-b: #f8b6e7;
  --case-color-c: #ffc55a;
}

.case-page {
  --case-line: var(--line, #303030);
  --case-panel: var(--art-surface, #111113);
  --case-ink: var(--text-primary, #f3f3f1);
  --case-muted: var(--text-secondary, #bdbdbd);
  --icon-ink: var(--case-color-b);
  --case-accent-fill: color-mix(in srgb, var(--case-color-a) 17%, var(--case-panel));
  --case-accent-line: color-mix(in srgb, var(--case-color-a) 34%, var(--case-line));
  --case-accent-ink: var(--case-text-color, color-mix(in srgb, var(--case-color-a) 56%, white));
  --case-gradient: linear-gradient(104deg, var(--case-color-a), var(--case-color-b) 27%, var(--case-color-c) 50%, var(--case-color-b) 73%, var(--case-color-a));
}

html[data-theme=light] .case-page {
  --case-accent-fill: color-mix(in srgb, var(--case-color-a) 10%, var(--case-panel));
  --case-accent-ink: color-mix(in srgb, var(--case-color-a) 70%, var(--case-ink));
}

html[data-theme=light] .case-yumo {
  --case-color-a: #004eff;
  --case-color-b: #006c9c;
  --case-color-c: #10203f;
}

html[data-theme=light] .case-yumo-partner {
  --case-color-a: #0d7150;
  --case-color-b: #087760;
  --case-color-c: #153529;
}

html[data-theme=light] .case-archive-entry {
  --case-color-a: #355480;
  --case-color-b: #456387;
  --case-color-c: #222d3f;
}

html[data-theme=light] .case-stage-carma {
  --case-color-a: #5035ab;
  --case-color-b: #75398b;
  --case-color-c: #8e3e38;
}

html[data-theme=light] .case-navis {
  --case-color-a: #075651;
  --case-color-b: #00746c;
  --case-color-c: #4b585b;
}

html[data-theme=light] .case-workflows {
  --case-color-a: #b82d79;
  --case-color-b: #286aaf;
  --case-color-c: #364554;
}

html[data-theme=light] .case-rps {
  --case-color-a: #1c18ae;
  --case-color-b: #5145ad;
  --case-color-c: #925407;
}

html[data-theme=light] .case-fashion-queen {
  --case-color-a: #a7096a;
  --case-color-b: #9e376e;
  --case-color-c: #88510d;
}

.case-page .back-link {
  min-height: 44px;
  margin-bottom: 20px;
}

.case-page .case-cover,
html[data-theme=light] .case-page .case-cover {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--case-line);
  border-radius: 12px;
  background: var(--case-panel);
  background-image: radial-gradient(ellipse at 65% 100%, color-mix(in srgb, var(--case-color-a) 19%, transparent), transparent 72%);
  margin: 0 0 clamp(40px, 5vw, 72px);
}

.case-page .case-cover.concept-stage {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(24px, 5vw, 72px);
  min-height: clamp(350px, 36vw, 600px);
}

.case-cover-copy {
  min-width: 0;
  color: var(--case-ink);
}

.case-cover-copy > span {
  display: block;
  font-size: clamp(26px, 4.2vw, 68px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.case-cover-copy p {
  color: var(--case-muted);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.6;
  max-width: 35ch;
  margin: 16px 0 0;
}

.case-cover .system-graphic {
  width: 100%;
  margin: 0;
}

.case-page .case-cover.case-archive-cover {
  min-height: clamp(320px, 34vw, 500px);
}

.case-archive-cover img,
.chapter-archive img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.case-archive-cover img {
  justify-self: center;
  max-width: 520px;
  animation: case-screen-arrival 1.4s var(--ease) both;
}

.case-cover .graph-wire {
  stroke: var(--case-color-b);
  animation: draw-connection 1.6s var(--ease) both;
}

.case-cover .graph-point {
  fill: var(--case-color-b);
}

.case-cover .graph-icon {
  --icon-ink: var(--case-color-b);
}

.cover-tools {
  margin: 0;
  color: var(--case-ink);
}

.cover-tools > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--case-line);
}

.cover-tools > div::after {
  position: absolute;
  content: '';
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--case-color-a), var(--case-color-b), transparent);
  transform-origin: left;
  animation: cover-rule-draw 1.6s var(--ease) both;
}

.cover-tools > div:nth-child(2)::after { animation-delay: .12s; }
.cover-tools > div:nth-child(3)::after { animation-delay: .24s; }

.cover-tools dt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.cover-tools dd {
  color: var(--case-muted);
  font-size: 14px;
  margin: 0;
}

@keyframes cover-rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.case-cover.yumo-stage {
  height: clamp(300px, 39vw, 610px);
  padding: clamp(72px, 8vw, 124px) 5% 0;
}

.case-cover.yumo-stage .yumo-word {
  color: var(--case-color-b);
  opacity: .45;
}

.case-cover.yumo-stage .stage-copy {
  color: var(--case-muted);
}

.case-cover.yumo-stage img {
  animation: case-screen-arrival 1.4s var(--ease) both;
}

.case-cover.yumo-stage img:nth-of-type(2) { animation-delay: .12s; }
.case-cover.yumo-stage img:nth-of-type(3) { animation-delay: .24s; }

@keyframes case-screen-arrival {
  from { translate: 0 24px; }
  to { translate: 0 0; }
}

.case-title {
  position: relative;
  width: fit-content;
  color: var(--case-ink);
  overflow-wrap: anywhere;
  overflow: clip;
  overflow-clip-margin: .2em;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .case-title {
    background-image: var(--case-gradient);
    background-size: 200% 200%;
    background-position: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: case-title-light 4.6s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .case-title.shader-ready {
    background-image: none;
    animation: none;
    color: transparent;
  }
}

@keyframes case-title-light {
  from { background-position: 100% 100%; }
  to { background-position: 0 0; }
}

.case-page .case-deck {
  margin: 16px 0 0;
  color: var(--case-ink);
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.case-page .case-intro > .page-description,
html[data-theme=light] .case-page .case-intro > .page-description {
  color: var(--case-muted);
}

.case-tags,
.case-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.case-tags {
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.case-tags li,
.case-links a {
  border: 1px solid var(--case-line);
  color: var(--case-ink);
}

.case-tags li {
  background-color: color-mix(in srgb, var(--case-accent-fill) 75%, var(--case-panel));
  border-color: var(--case-accent-line, var(--case-line));
  color: color-mix(in srgb, var(--case-accent-ink, var(--case-ink)) 51%, var(--case-ink));
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  border-radius: 999px;
}

.case-links {
  margin-top: 24px;
}

.case-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
}

.case-links a:is(:hover, :focus-visible) {
  border-color: currentColor;
}

.case-links .arrow {
  width: 14px;
  height: 14px;
}

.case-page .page-description {
  max-width: 68ch;
  margin-top: 28px;
}

.case-page .page-meta {
  justify-content: start;
  column-gap: clamp(32px, 5vw, 80px);
}

.case-page .case-narrative {
  grid-template-columns: minmax(170px, .32fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  padding-top: 44px;
}

.case-page .case-toc {
  gap: 0;
}

.case-toc-title {
  color: var(--case-ink);
  margin: 0 0 8px;
  font-size: 14px;
}

.case-page .case-toc a {
  font-size: 14px;
  line-height: 20px;
  padding: 11px 12px;
  border-top: 1px solid var(--case-line);
}

.case-page .case-toc a[aria-current="location"] {
  border-top-color: transparent;
  background-color: var(--case-accent-fill);
  box-shadow: inset 2px 0 var(--case-color-a);
  color: var(--case-accent-ink);
  font-weight: 600;
}

.case-page .case-story section {
  margin-bottom: 28px;
  padding-bottom: 28px;
}

.case-page .case-story section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.case-page .case-story h2 {
  margin: 18px 0 12px;
  font-size: clamp(26px, 3.4vw, 44px);
  text-wrap: balance;
}

.case-page .case-story p {
  max-width: 68ch;
  margin: 16px 0 0;
}

.case-story .case-tags {
  margin: 0 0 12px;
}

.case-page .chapter-cover {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  min-height: 210px;
  padding: clamp(20px, 4vw, 44px);
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--case-line);
  background: var(--case-panel);
  color: var(--case-ink);
}

.case-page .chapter-archive {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
}

.chapter-cover figcaption {
  font-size: clamp(18px, 3.5vw, 30px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  max-width: 19ch;
}

.chapter-cover figcaption small {
  display: block;
  margin-top: 10px;
  color: var(--case-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.chapter-cover :is(dl, ol, pre) {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.chapter-cover dl div {
  padding: 10px 0;
  border-top: 1px solid var(--case-line);
}

.chapter-cover dt {
  font-weight: 700;
}

.chapter-cover dd {
  margin: 0;
  color: var(--case-muted);
}

.chapter-cover ol {
  padding-left: 21px;
}

.chapter-cover li + li {
  margin-top: 6px;
}

.chapter-cover pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--case-muted);
}

.case-page .chapter-cover.chapter-screen {
  padding-bottom: 0;
  grid-template-columns: minmax(0, 1fr) minmax(100px, .9fr);
  height: clamp(220px, 32vw, 360px);
  overflow: hidden;
  background-image: radial-gradient(ellipse at 85% 80%, color-mix(in srgb, var(--case-color-a) 14%, transparent), transparent 68%);
}

.chapter-screen figcaption {
  padding-bottom: 20px;
}

.chapter-screen img {
  align-self: start;
  justify-self: center;
  width: min(100%, 210px);
  height: auto;
  filter: drop-shadow(0 15px 16px #0004);
}

@media (max-width: 700px) {
  .case-page .case-cover.concept-stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 20px;
  }

  .case-cover.yumo-stage img {
    width: 31%;
  }

  .case-page .case-toc {
    display: grid;
    margin-bottom: 28px;
    padding-bottom: 0;
  }

  .case-page .case-toc a:last-child {
    border-bottom: 1px solid var(--case-line);
  }

  .case-page .page-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .case-page .chapter-cover:not(.chapter-screen) {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-page .case-title {
    font-size: clamp(38px, 11vw, 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-title,
  .case-cover .graph-wire,
  .cover-tools > div::after,
  .case-archive-cover img,
  .case-cover.yumo-stage img {
    animation: none;
  }

  .case-title .title-shader-canvas {
    display: none;
  }
}

@media (forced-colors: active) {
  .case-title,
  .case-title.shader-ready {
    background: none;
    color: CanvasText;
    animation: none;
  }

  .case-page .case-toc a[aria-current="location"] {
    border-inline-start: 2px solid Highlight;
    color: LinkText;
  }
}

/* Yumo keeps the product, title and ownership in the opening view. */
.case-page.case-yumo {
  padding-top: 88px;
}
.case-yumo .back-link {
  margin-bottom: 4px;
}
.case-yumo .case-cover.yumo-stage {
  height: clamp(190px, 36svh, 320px);
  padding: 16px 8%;
  align-items: center;
  margin-bottom: 20px;
}
.case-yumo .case-cover.yumo-stage img {
  align-self: center;
  width: auto;
  height: 88%;
  max-width: 26%;
  object-fit: contain;
}
.case-yumo .case-cover.yumo-stage img:nth-of-type(1) { transform: rotate(-8deg); }
.case-yumo .case-cover.yumo-stage img:nth-of-type(2) { transform: none; }
.case-yumo .case-cover.yumo-stage img:nth-of-type(3) { transform: rotate(8deg); }

.case-intro .case-title {
  font-size: clamp(48px, 6.2vw, 92px);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.case-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(20px, 2.8vw, 40px);
}
.case-role-line {
  margin: 0;
  color: var(--case-muted);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 600;
  line-height: 1.45;
}
.case-intro .case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 14px clamp(16px, 2.5vw, 34px);
  margin-top: 22px;
  padding: 14px 0;
}
.case-fact-detail {
  display: block;
  margin-top: 4px;
  color: var(--case-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
.case-intro > .case-tags {
  max-width: 835px;
}

.case-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 12px;
  margin-top: 24px;
}
.site-page .case-actions .case-action {
  --icon-ink: var(--case-action-accent);
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  justify-content: stretch;
  gap: 5px;
  min-height: 110px;
  padding: 14px 16px;
  border: 1px solid #1114;
  border-radius: 12px;
  line-height: 1.3;
  white-space: normal;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.case-action {
  --spectrum: var(--case-gradient);
  --case-action-accent: #16191f;
}
html[data-theme=light] .case-page .case-action[data-aurora-palette="project"] {
  --case-action-accent: #f7f8fa;
  color: #f7f8fa;
}
.site-page .case-actions .case-action[data-aurora-palette="project"].shader-ready {
  background-color: var(--case-color-c);
}
.site-page .case-actions .case-action[data-aurora-palette="project"] .arrow {
  color: var(--case-action-accent) !important;
}
.case-related {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 14px 0 0;
  color: var(--case-muted);
  font-size: 13px;
}
.case-related a {
  color: var(--case-ink);
}
.case-action-ios {
  --case-action-accent: #153c70;
  --spectrum: linear-gradient(0deg, #72aeff, #d4f1ff 28%, #fff 50%, #a3ddff 76%, #72aeff);
}
.case-action-android {
  --case-action-accent: #134423;
  --spectrum: linear-gradient(0deg, #70cd91, #dcf8a4 28%, #fff 50%, #cdf38e 76%, #70cd91);
}
.case-action-figma {
  --case-action-accent: #43285e;
  --spectrum: linear-gradient(0deg, #ffa68e, #c6a7ff 25%, #a5dfff 50%, #a2efcb 75%, #ffa68e);
}
.site-page .case-actions .case-action:focus-visible {
  border-color: #1117;
}
@media (hover: hover) and (pointer: fine) {
  .site-page .case-actions .case-action:hover {
    border-color: #1117;
  }
}
.site-page .case-actions .case-action:active {
  border-color: #1119;
}

.case-action-platform {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--case-action-accent);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.case-action-platform svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.case-action-platform .arrow {
  margin-inline-start: auto;
  fill: none;
  transition: transform 180ms var(--ease);
}
.case-action:not(.case-action-web) strong {
  font-size: 14px;
  font-weight: 700;
}
.case-action-note {
  color: var(--case-action-accent);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}
.case-actions .case-action:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
}
.case-action:focus-visible .arrow {
  transform: translate(2px, -2px);
}
@media (hover: hover) and (pointer: fine) {
  .case-action:hover .arrow {
    transform: translate(2px, -2px);
  }
}
.case-action:active .arrow {
  transform: none;
}

.case-yumo .chapter-cover.chapter-screen {
  grid-template-columns: minmax(0, 1fr) minmax(60px, 18%);
  min-height: 0;
  height: auto;
  padding: 12px clamp(16px, 3vw, 32px);
}
.case-yumo .chapter-screen figcaption {
  padding-bottom: 0;
  font-size: clamp(18px, 2vw, 25px);
}
.case-yumo .chapter-screen img {
  align-self: center;
  width: auto;
  height: clamp(96px, 12vw, 134px);
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 780px) {
  .case-heading {
    flex-direction: column;
    align-items: start;
    gap: 6px;
  }
  .case-intro .case-title {
    font-size: clamp(39px, 10vw, 56px);
  }
  .case-yumo .case-title {
    font-size: clamp(48px, 10vw, 56px);
  }
  .case-actions,
  .case-intro .case-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .case-facts > :last-child:nth-child(odd),
  .case-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-page .case-actions .case-action,
  .case-action-platform .arrow {
    transition: none;
  }
  .site-page .case-actions .case-action:is(:hover, :focus-visible, :active),
  .case-action:is(:hover, :focus-visible, :active) .arrow {
    transform: none;
  }
}
@media (forced-colors: active) {
  html[data-theme] .case-page .case-action[data-aurora-palette="project"] {
    --case-action-accent: LinkText;
    color: LinkText;
  }
  .site-page .case-actions .case-action,
  .site-page .case-actions .case-action:is(:hover, :focus-visible) {
    --case-action-accent: LinkText;
    background: Canvas;
    color: LinkText;
    border-color: LinkText;
  }
  .case-action-note,
  .case-action-web .case-action-note {
    color: LinkText;
  }
  .case-actions .case-action:focus-visible {
    outline-color: Highlight;
  }
}

@media (max-width: 700px) {
  .case-page.case-yumo {
    padding-top: 80px;
  }
  .case-yumo .case-cover.yumo-stage {
    height: clamp(154px, 30svh, 216px);
    padding: 45px 5% 10px;
    margin-bottom: 14px;
  }
  .case-yumo .case-cover.yumo-stage .stage-copy {
    top: 8px;
    right: 14px;
    line-height: 1.4;
  }
  .case-page .case-narrative {
    padding-top: 32px;
  }
}

.case-page:has(> .case-archive-cover) {
  padding-top: 88px;
}
.case-page:has(> .case-archive-cover) .back-link {
  margin-bottom: 4px;
}
.case-page .case-cover.case-archive-cover {
  min-height: 0;
  margin-bottom: 24px;
  padding: clamp(16px, 3vw, 40px);
}
.case-archive-cover img {
  width: auto;
  max-width: min(100%, 520px);
  max-height: clamp(176px, 36svh, 310px);
  object-fit: contain;
}

@media (max-width: 700px) {
  .case-page:has(> .case-archive-cover) {
    padding-top: 80px;
  }
  .case-page .case-cover.case-archive-cover {
    gap: 12px;
    margin-bottom: 16px;
  }
  .case-archive-cover img {
    max-height: 192px;
  }
}

.case-page:has(> .case-art-cover) {
  padding-top: 88px;
}
.case-page:has(> .case-art-cover) .back-link {
  margin-bottom: 4px;
}
.case-page .case-art-cover {
  margin-bottom: clamp(16px, 2vw, 28px);
  height: clamp(190px, 39svh, 390px);
}
.case-page.case-yumo .case-art-cover {
  height: clamp(190px, 36svh, 320px);
  margin-bottom: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .case-art-cover .project-mockup img {
    animation: case-mockup-enter .8s var(--ease) both;
  }
}
@keyframes case-mockup-enter {
  from { transform: translateY(8px); }
  to { transform: none; }
}
.case-page .archive-source-cover {
  margin-bottom: 20px;
}
.archive-source-cover img {
  justify-self: center;
  max-width: 100%;
  max-height: 235px;
  object-fit: contain;
}
@media (max-width: 700px) {
  .case-page:has(> .case-art-cover) {
    padding-top: 80px;
  }
  .case-page .case-art-cover,
  .case-page.case-yumo .case-art-cover {
    height: clamp(154px, 30svh, 216px);
    margin-bottom: 14px;
  }
}

.case-art-cover:has(.mockup-phones) { background: #112747; }
.case-rps .case-art-cover { background: #18134c; }
.case-fashion-queen .case-art-cover { background: #341328; }
.case-sunrise .case-art-cover { background: #361d2a; }
.case-meta-millions .case-art-cover { background: #171d36; }
.case-bank-of-baku .case-art-cover { background: #112844; }
.case-art-cover .mockup-pair img {
  width: auto;
  max-width: 64%;
}
.case-art-cover .mockup-pair img:first-child { translate: -24% 5%; }
.case-art-cover .mockup-pair img:last-child { translate: 34% -11%; }

.case-tkeeper {
  --case-color-a: #4286ff;
  --case-color-b: #95b9ff;
  --case-color-c: #f4f5f7;
}
.case-exploit {
  --case-color-a: #ff6b52;
  --case-color-b: #ded5d1;
  --case-color-c: #f6f3f2;
}
html[data-theme=light] .case-tkeeper {
  --case-color-a: #0648bd;
  --case-color-b: #305994;
  --case-color-c: #182738;
}
html[data-theme=light] .case-exploit {
  --case-color-a: #b43521;
  --case-color-b: #785448;
  --case-color-c: #292321;
}
.case-tkeeper .case-art-cover { background: #172b4b; }
.case-exploit .case-art-cover { background: #322525; }

.case-art-cover .mockup-web-pair {
  gap: 2%;
}
.case-art-cover .mockup-web-pair img:first-child {
  max-width: 72%;
  max-height: 86%;
  border: 1px solid #ffffff32;
}
.case-art-cover .mockup-web-pair img:last-child {
  max-width: 21%;
  max-height: 82%;
  border: 1px solid #ffffff45;
}


.case-intro .page-meta {
  margin-top: 22px;
  padding-block: 14px;
}
.case-intro .page-meta dd {
  font-weight: 700;
}
.case-actions .case-action strong {
  font-size: 15px;
}
@media (max-width: 780px) {
  .site-page .case-actions .case-action {
    min-height: 124px;
    padding: 14px 12px;
  }
}

.case-page .next-project {
  --next-accent: color-mix(in srgb, var(--next-color-a) 50%, var(--case-ink));
  --icon-ink: var(--next-accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 20px;
  min-height: 244px;
  padding: 64px clamp(24px, 3vw, 36px);
  border: 1px solid var(--case-line);
  border-radius: 14px;
  background-color: var(--case-panel);
  background-image: linear-gradient(120deg, color-mix(in srgb, var(--next-color-a) 28%, var(--case-panel)), color-mix(in srgb, var(--next-color-b) 24%, var(--case-panel)), color-mix(in srgb, var(--next-color-c) 28%, var(--case-panel)));
  background-size: 220% 180%;
  color: var(--case-ink);
  box-shadow: inset 0 1px 0 #ffffff12;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}

.next-project > :not(canvas):not(.next-project-label) {
  position: relative;
  z-index: 1;
}

.next-project-canvas {
  z-index: 0;
  opacity: .3;
}

html[data-theme=light] .next-project-canvas {
  opacity: .16;
}

.next-project-label {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: clamp(24px, 3vw, 36px);
  white-space: nowrap;
  color: color-mix(in srgb, var(--case-ink) 92%, var(--next-color-b));
  font-size: 13px;
  line-height: 1.4;
}

.next-project-logo {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 20px;
  object-fit: contain;
}

.next-project-monogram {
  background: color-mix(in srgb, var(--next-color-a) 18%, var(--case-panel));
  color: var(--case-ink);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.next-project-logo-fashion {
  background: white url("preview-assets/fashion-queen-logo-source.png") 97% 11% / 520% auto no-repeat;
}

.next-project-logo-pair {
  display: flex;
  align-items: center;
}

.next-project-logo-pair img {
  width: 70%;
  height: auto;
  border-radius: 15px;
}

.next-project-logo-pair img + img {
  margin-left: -40%;
  translate: 0 8px;
}

.next-project-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  text-align: left;
}

.case-page .next-project h2 {
  margin: 0;
  min-width: 0;
  font-family: inherit;
  font-size: clamp(28px, 3.7vw, 52px);
  line-height: 1.08;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.case-page .next-project p,
html[data-theme=light] .case-page .next-project p {
  margin: 10px 0 0;
  max-width: 66ch;
  color: color-mix(in srgb, var(--case-ink) 94%, var(--next-color-b));
  font-size: 15px;
  line-height: 1.45;
}

:root .case-page .next-project:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--next-accent) 55%, var(--case-line));
}

.case-page .next-project:focus-visible {
  outline: 2px solid var(--next-accent);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .case-page .next-project:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #ffffff30, 0 6px 18px #0003;
  }
}

.case-page .next-project:active {
  transform: translateY(1px) scale(.995);
  box-shadow: inset 0 2px 6px #0004;
  transition-duration: 60ms;
}

.case-page .next-project > .arrow {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 48px;
  height: 48px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--next-accent) 40%, var(--case-line));
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .case-page .next-project {
    animation: next-project-flow 9s ease-in-out infinite alternate;
  }
  .case-page .next-project.shader-ready {
    animation: none;
    background-image: none;
  }
}

@keyframes next-project-flow {
  from { background-position: 0% 15%; }
  to { background-position: 100% 85%; }
}

@media (prefers-reduced-motion: reduce) {
  .next-project-canvas { display: none; }
  .case-page .next-project,
  .case-page .next-project:is(:hover, :active) {
    transform: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .case-page .next-project {
    color: LinkText;
    border-color: LinkText;
    background: Canvas;
  }
  .next-project-label,
  .case-page .next-project p {
    color: LinkText;
  }
}

@media (max-width: 700px) {
  .case-page .next-project {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    min-height: 268px;
    padding: 72px 20px;
  }

  .next-project-label {
    top: 20px;
    left: 20px;
  }

  .case-page .next-project > .next-project-logo {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }

  .next-project-copy {
    grid-column: 2;
  }

  .case-page .next-project > .arrow {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .case-page .next-project h2 {
    font-size: clamp(28px, 7.2vw, 38px);
  }

  .case-page .next-project p,
  html[data-theme=light] .case-page .next-project p {
    margin-top: 10px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .case-toc a {
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), translate .2s var(--ease);
  }
  .case-toc a:not([aria-current]):is(:hover, :focus-visible) {
    color: var(--case-ink);
    translate: 4px 0;
  }
  .next-project > .arrow {
    transition: translate .2s var(--ease);
  }
  .next-project:is(:hover, :focus-visible) > .arrow {
    translate: 4px 0;
  }
}

.case-page.case-yumo .yumo-ux-cover {
  height: clamp(275px, 45svh, 460px);
  background-color: #102b54;
  background-image: url("preview-assets/yumo-ux-backdrop.webp");
  background-position: center;
  background-size: cover;
}
.yumo-ux-cover .mockup-phones {
  gap: 5%;
}
.yumo-ux-cover .mockup-phones img {
  height: 83%;
  filter: drop-shadow(0 18px 18px #050d20a8);
}
.yumo-ux-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 30px);
  margin: 0;
  padding: clamp(14px, 3vw, 32px);
  border: 1px solid var(--case-line);
  border-radius: 14px;
  background: var(--case-panel);
}
.yumo-ux-flow figure {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  margin: 0;
  text-align: center;
}
.yumo-ux-flow a {
  display: block;
  width: min(100%, 224px);
  border-radius: 12px;
}
.yumo-ux-flow img {
  display: block;
  width: 100%;
  height: auto;
}
.yumo-ux-flow figcaption {
  color: var(--case-ink);
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 700px) {
  .case-page.case-yumo .yumo-ux-cover {
    height: clamp(254px, 41svh, 340px);
  }
  .yumo-ux-cover .mockup-phones {
    gap: 2%;
  }
  .yumo-ux-cover .mockup-phones img {
    max-width: 31%;
  }
}

/* Keep Yumo ownership on the artwork, clear of the product screens. */
.case-yumo .yumo-ux-cover:has(.yumo-cover-role) .mockup-phones {
  inset-block-start: 64px;
}
.yumo-cover-role {
  position: absolute;
  z-index: 1;
  inset-block-start: 16px;
  inset-inline-end: clamp(16px, 2vw, 28px);
  max-width: calc(100% - 32px);
  margin: 0;
  color: #fff;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  line-height: 1.5;
  text-align: end;
  text-shadow: 0 1px 4px #06142d;
}
.yumo-cover-role span {
  display: block;
}

/* A quiet, explicit return control shared by every project. */
.case-page .back-link.project-back {
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--case-line);
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.case-page .project-back-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: currentColor;
}
.case-page .project-back:hover {
  border-color: var(--case-accent-ink);
  background: #000;
}
.case-page .project-back:focus-visible {
  outline: 2px solid var(--case-ink);
  outline-offset: 4px;
}
.case-page .project-back:active {
  background: #000;
  border-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .case-page .back-link.project-back { transition: none; }
}