/* Image-only work tiles that flip to a short line (Tab, Oct 25 2026).
   Hover (mouse) or keyboard focus flips; tap flips on touch; reduced motion = cross-fade. */
:root{--wh-back-bg:#0a0a0a;--wh-back-fg:#fbfbfa;--wh-back-sub:#c4c4be;--wh-back-line:#0a0a0a;--wh-front-bg:#EFEFEC;--wh-dot:#D9262B}
.wh-flip{position:relative;display:block;outline:none;perspective:2000px;-webkit-tap-highlight-color:transparent}
.wh-flip-in{position:relative;width:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .85s cubic-bezier(.22,.8,.24,1);will-change:transform}
.wh-flip-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wh-flip-front{background:var(--wh-front-bg);transform:rotateY(0deg)}
.wh-flip-front img{transition:transform 1.2s cubic-bezier(.22,.8,.24,1)}
.wh-flip-back{transform:rotateY(180deg);background:var(--wh-back-bg);color:var(--wh-back-fg);box-shadow:inset 0 0 0 1px var(--wh-back-line);
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(22px,2.6vw,40px)}
.wh-flip-name{margin:0;font-size:clamp(26px,2.8vw,42px);font-weight:800;letter-spacing:-0.045em;line-height:1}
.wh-flip-line{margin:0;font-size:clamp(17px,1.45vw,22px);line-height:1.35;letter-spacing:-0.01em;color:var(--wh-back-sub);max-width:24ch;text-wrap:pretty}
@media (hover:hover) and (pointer:fine){.wh-flip:hover .wh-flip-in{transform:rotateY(180deg)}}
.wh-flip:focus-visible .wh-flip-in,.wh-flip.is-flipped .wh-flip-in{transform:rotateY(180deg)}
.wh-flip:focus-visible{outline:2px solid oklch(0.58 0.22 27);outline-offset:4px}
@media (max-width:859px){.wh-flip-name{font-size:clamp(24px,7vw,34px)}.wh-flip-line{font-size:17px}}
@media (prefers-reduced-motion:reduce){
  .wh-flip-in,.wh-flip:hover .wh-flip-in,.wh-flip:focus-visible .wh-flip-in,.wh-flip.is-flipped .wh-flip-in{transform:none !important;transition:none;will-change:auto}
  .wh-flip-back{transform:none;opacity:0;transition:opacity .3s ease}
  .wh-flip-front{transition:opacity .3s ease}
  .wh-flip:focus-visible .wh-flip-back,.wh-flip.is-flipped .wh-flip-back{opacity:1}
  .wh-flip:focus-visible .wh-flip-front,.wh-flip.is-flipped .wh-flip-front{opacity:0}
}
@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
  .wh-flip:hover .wh-flip-back{opacity:1}.wh-flip:hover .wh-flip-front{opacity:0}
}