/* The hats as tiles: an ink icon for each job, the title struck through, a short outcome, and
   the red seal stamped once the strike lands. Loads after themes.css and ink-motion.css. */
html[data-theme="ink"] .hat{display:flex;flex-direction:column;align-items:flex-start;padding:30px 26px 28px}
html[data-theme="ink"] .hat::before{display:none}
html[data-theme="ink"] .hat-ic{width:52px;height:52px;margin-bottom:22px;color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="ink"] .hat-ic .r{stroke:none;fill:var(--jade)}
html[data-theme="ink"] .hat-title::after{display:none}
html[data-theme="ink"] .hat p{margin-top:6px;font-size:16px;color:var(--muted)}
html[data-theme="ink"] .hat-seal{position:absolute;top:26px;right:24px;padding:7px 11px 8px;border-radius:3px;background:var(--jade);color:#f8f4ea;font-size:16px;font-weight:600;letter-spacing:.06em;line-height:1;transform:rotate(-8deg);box-shadow:0 0 0 1px rgba(194,59,37,.25)}
html[data-theme="ink"] .hat-seal::after{content:'';position:absolute;inset:3px;border:1px solid rgba(248,244,234,.55);border-radius:2px}

/* motion: the icon draws in, then the seal stamps after the strike */
html.ink-motion .hat-ic{opacity:0;transform:translateY(6px);transition:opacity .5s ease var(--d,0s),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
html.ink-motion .hat.in .hat-ic{opacity:1;transform:none}
html.ink-motion .hat-seal{opacity:0;transform:rotate(-8deg) scale(1.7);transition:opacity .2s ease calc(var(--d,0s) + 1.05s),transform .35s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0s) + 1.05s)}
html.ink-motion .hat.in .hat-seal{opacity:1;transform:rotate(-8deg) scale(1)}
@media (prefers-reduced-motion:reduce){
  html.ink-motion .hat-ic,html.ink-motion .hat-seal{transition:none}
}

@media (max-width:640px){
  html[data-theme="ink"] .hats{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-theme="ink"] .hat{padding:22px 16px 20px}
  html[data-theme="ink"] .hat:nth-child(2n){border-left:1px solid var(--line)}
  html[data-theme="ink"] .hat-ic{width:40px;height:40px;margin-bottom:16px}
  html[data-theme="ink"] .hat-title{font-size:18px}
  html[data-theme="ink"] .hat p{font-size:14.5px}
  html[data-theme="ink"] .hat-seal{top:18px;right:12px;font-size:12.5px;padding:5px 8px 6px}
}