/* Existing portfolio skin. Kept separate from documentation and new controls. The portfolio loads it after its own
   stylesheet: the site's variable names, mapped to the tokens, and the ProjectCard and Tag, whose rules live only here. */
@import './tokens.css';
:root {
  --bg: var(--z-color-canvas); --white: var(--z-color-surface);
  --dark: var(--z-color-ink); --ink: var(--z-color-ink); --ink-2: var(--z-color-ink-secondary);
  --ink-3: var(--z-color-line); --muted: var(--z-color-muted-legacy); --line: var(--z-color-line);
  --blue: var(--z-color-blue); --blue-btn: var(--z-color-blue-action); --font: var(--z-font-body);
  --page: var(--z-container); --pad: var(--z-gutter);
  --r-card: var(--z-radius-card); --r-block: var(--z-radius-panel);
  --r-btn: var(--z-radius-button); --r-pill: var(--z-radius-pill);
}
/* "Answer the finger first": a press sinks the card in 120ms, it settles back on the spring. */
.card {
  display: flex; flex-direction: column; gap: 32px;
  background: var(--bg); border-radius: var(--r-card); padding: 16px; overflow: hidden;
  transition: scale var(--z-motion-layout) var(--z-ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.card:active {
  scale: .985;
  transition-duration: var(--z-motion-press);
  transition-timing-function: var(--z-ease-out);
}
.sec--white .card { background: var(--bg); }
.card__media { border-radius: 8px; overflow: hidden; aspect-ratio: 532 / 322; background: #fff; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--z-motion-media) var(--z-ease-spring);
}
.card__body { padding: 0 16px 16px; display: grid; gap: 16px; }
.card__copy { display: grid; gap: 10px; }
/* Room at the right for the arrow that comes in on hover, so a title that fills its line never runs under it. */
.card__body h3 { position: relative; padding-right: 44px; font-size: 24px; line-height: 32px; font-weight: 600; }
.card__body h3::after {
  content: ""; position: absolute; right: 8px; top: 8px;
  width: 32px; height: 32px; opacity: 0; pointer-events: none;
  background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 14L14 4M6 4h8v8' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: opacity var(--z-motion-hover) var(--z-ease-spring), transform var(--z-motion-hover) var(--z-ease-spring);
}
.card:hover .card__media img,
.card:focus-visible .card__media img { transform: scale(1.1); }
.card:hover .card__body h3::after,
.card:focus-visible .card__body h3::after { opacity: 1; transform: translate(8px, -8px); }
@media (hover: hover) and (pointer: fine) {
  .card:focus-visible { box-shadow: 0 8px 20px #141b4012; }
}
/* "Hover belongs to fine pointers": on touch a tapped card does not stay zoomed after the finger lifts; the picture
   zooms only while it is pressed. */
@media (hover: none) {
  .card:active .card__body h3::after { opacity: 1; transform: translate(8px, -8px); }
  .card:hover .card__media img { transform: none; }
  .card:hover .card__body h3::after { opacity: 0; transform: none; }
  .card:active .card__media img { transform: scale(1.06); }
}
/* Reduced motion only removes the travel: no press sink (the site's motion rules keep the colour feedback). */
@media (prefers-reduced-motion: reduce) {
  .card:active { scale: none; }
}
.card__body p { color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 6px 14px 6px 12px; border-radius: var(--r-pill);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--dark);
  font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink);
}