/* Velar Bureau — case cover (js/cx.js): blurred colour field + ASCII layer, client logo and result on top */
a.case__visual.cx, .cx { --t-hover: .7s; display: grid; place-items: center; color: #fff; background: var(--graphite-2); }
.cx__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cx__blur { position: absolute; inset: -12%; width: 124%; height: 124%; filter: blur(22px) saturate(1.15); transform: scale(1.04); transition: transform var(--t-hover) var(--ease); }
.cx__ascii { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; }
.cx__grain { position: absolute; inset: 0; opacity: .22; pointer-events: none; mix-blend-mode: overlay;
  background-image: radial-gradient(circle, color-mix(in srgb, #fff 55%, transparent) 0 .6px, transparent .9px); background-size: 3px 3px; }
.cx__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 52%, color-mix(in srgb, var(--graphite) 34%, transparent), transparent 75%); }
.cx:hover .cx__blur { transform: scale(1.1); }

.cx__c { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, min(3vw, 43.2px), 40px); padding: 24px; text-align: center; }
.cx__logo { width: clamp(150px, min(17vw, 244.8px), 250px); height: auto; filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--graphite) 45%, transparent)); transition: transform var(--t-hover) var(--ease); }
.cx:hover .cx__logo { transform: translateY(-4px) scale(1.03); }

.cx__res { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cx__rule { display: block; width: 100%; height: 1px; margin-bottom: clamp(6px, min(1vw, 14.4px), 14px); background: color-mix(in srgb, #fff 55%, transparent); }
.cx__n { font-weight: 500; font-size: clamp(3rem, min(6.4vw, 92.16px), 6.6rem); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  text-shadow: 0 12px 40px color-mix(in srgb, var(--graphite) 40%, transparent); white-space: nowrap; }
.cx__s { font-size: clamp(.95rem, min(1.15vw, 16.56px), 1.15rem); color: color-mix(in srgb, #fff 86%, transparent); max-width: 34ch; text-wrap: balance; }
.cx__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 0; padding: 0; }
.cx__chips li { padding: 7px 12px; font-family: var(--fm); font-size: .74rem; color: #fff; background: color-mix(in srgb, var(--graphite) 28%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cx .case__no { z-index: 1; color: transparent; -webkit-text-stroke-color: color-mix(in srgb, #fff 45%, transparent); }
.cx:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

@media (max-width: 720px) {
  .cx__c { gap: 16px; padding: 18px; }
  .cx__logo { width: 140px; }
  .cx__n { font-size: clamp(2.4rem, min(12vw, 172.8px), 3.4rem); }
  .cx__chips { margin-top: 4px; }
  .cx__chips li { padding: 6px 10px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .cx__blur, .cx__logo { transition: none; } }

/* other cases: text wordmark instead of a logo file, and a word result instead of a number */
.cx__wm { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: clamp(1.5rem, min(2.4vw, 34.56px), 2.5rem); line-height: .9; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 10px 30px color-mix(in srgb, var(--graphite) 45%, transparent); transition: transform var(--t-hover) var(--ease); }
.cx:hover .cx__wm { transform: translateY(-4px) scale(1.03); }
.cx__n--t { white-space: normal; font-size: clamp(2.6rem, min(5vw, 72px), 5.2rem); line-height: .92; text-wrap: balance; }
@media (max-width: 720px) { .cx__wm { font-size: 1.4rem; } .cx__n--t { font-size: clamp(2.1rem, min(9.5vw, 136.8px), 2.9rem); } }

/* the client logo signs the cover; the result figure carries it */
.cx__logo { width: clamp(92px, min(8vw, 115.2px), 120px); }