@font-face { font-family: 'PP Mori'; src: url('/PPMori-Book.woff2') format('woff2'); font-weight: 350; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/PPMori-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/PPMori-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
[data-typeface^="mori"] { font-family: 'PP Mori', sans-serif; font-synthesis: none; }
[data-typeface^="mori"] .card { font-size: 1rem; letter-spacing: -.01em; font-weight: 400; }
[data-typeface^="mori"] .identity { font-weight: 400; }
[data-typeface="mori-book"], [data-typeface="mori-book"] .card, [data-typeface="mori-book"] .identity { font-weight: 350; }
[data-typeface="mori-semibold"] .identity, button[data-typeface="mori-semibold"]>span { font-weight: 600; }

/* Reserve the heaviest label width so the corners never jump on interaction. */
.card .weight-slot { display: inline-grid; vertical-align: baseline; }
.card .weight-slot>span, .card .weight-slot::after { grid-area: 1 / 1; }
.card .weight-slot::after { content: attr(data-label); font-weight: 600; visibility: hidden; pointer-events: none; }
.card .identity button { white-space: nowrap; }
.card a:hover, .card a:focus-visible, .card .identity button:hover, .card .identity button:focus-visible { text-decoration: none; }
[data-typeface^="mori-hover"] { --link-weight: 400; }
[data-typeface="mori-hover-bold"] { --link-weight: 600; }
[data-typeface^="mori-hover"] .card, [data-typeface^="mori-hover"] .identity { font-weight: 350; }
[data-typeface^="mori-hover"] .name-given { font-weight: 350; }
[data-typeface^="mori-hover"] .card a:is(:focus-visible,:active) .weight-slot>span { font-weight: var(--link-weight); }
[data-typeface^="mori-hover"] #replay:is(:focus-visible,:active) .name-black>span { font-weight: 600; }
@media (hover: hover) {
  [data-typeface^="mori-hover"] .card a:hover .weight-slot>span { font-weight: var(--link-weight); }
  [data-typeface^="mori-hover"] #replay:hover .name-black>span { font-weight: 600; }
}
@keyframes arrow-depart {
  0% { transform: translate(0,0); opacity: 1; }
  42% { transform: translate(4px,-4px); opacity: 0; }
  43% { transform: translate(-3px,3px); opacity: 0; }
  100% { transform: translate(0,0); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-typeface^="mori-hover"] .card a:focus-visible svg { animation: arrow-depart 420ms var(--ease-out) both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-typeface^="mori-hover"] .card a:hover svg { animation: arrow-depart 420ms var(--ease-out) both; }
}

.work p { font-size: .8125rem; letter-spacing: 0; }

/* Hireway's original four-piece master: forest text, mint release, then hold. */
.card .work a { transition: color 180ms ease-out; }
.hireway-icon { display: inline-grid; width: 1em; height: 1em; }
.hireway-icon svg { grid-area: 1 / 1; overflow: visible; }
.card .work a .hireway-mark { fill: #163d2f; stroke: none; opacity: 0; }
.hireway-mark .brand-mint { fill: #50dda6; transform-origin: 299px 102px; }
.card .work a:is(:focus-visible,:active) { color: #163d2f; }
.card .work a:is(:focus-visible,:active) .link-arrow { opacity: 0; }
.card .work a:is(:focus-visible,:active) .hireway-mark { opacity: 1; }
/* Override the generic link-arrow departure; animate only the mint panel. */
[data-typeface^="mori-hover"] .card .work a:is(:hover,:focus-visible) svg { animation: none; }
@media (hover: hover) {
  .card .work a:hover { color: #163d2f; }
  .card .work a:hover .link-arrow { opacity: 0; }
  .card .work a:hover .hireway-mark { opacity: 1; }
}
@keyframes hireway-release {
  0% { transform: translate(-22px,22px) scale(.86); }
  28% { transform: translate(-10px,10px) scale(.92); }
  55% { transform: translate(48px,-48px) scale(1.04); }
  78% { transform: translate(-6px,6px) scale(.98); }
  100% { transform: translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .card .work a:focus-visible .brand-mint { animation: hireway-release 680ms cubic-bezier(.2,.7,.2,1) both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card .work a:hover .brand-mint { animation: hireway-release 680ms cubic-bezier(.2,.7,.2,1) both; }
}
@media (prefers-reduced-motion: reduce) { .card .work a { transition: none; } }
@media (forced-colors: active) {
  .card .work a .hireway-mark { fill: LinkText; }
  .hireway-mark .brand-mint { fill: LinkText; }
}