/* CF brand mark: the C draws as one stroke, then the bar and the F block grow out of it. */
.cf { display: block; overflow: visible; }
.cf .cf-c { fill: none; stroke: currentColor; stroke-width: 270; stroke-dasharray: 1 1; }
.cf .cf-bar, .cf .cf-f { fill: currentColor; transform-box: fill-box; }
.cf .cf-bar { transform-origin: 0 50%; }
.cf .cf-f { transform-origin: 50% 0; }

.cf-once .cf-c { animation: cf-c-in 1.1s cubic-bezier(.65, 0, .35, 1) both .2s; }
.cf-once .cf-bar { animation: cf-bar-in .8s cubic-bezier(.22, 1, .36, 1) both .95s; }
.cf-once .cf-f { animation: cf-f-in .8s cubic-bezier(.22, 1, .36, 1) both 1.15s; }
@keyframes cf-c-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cf-bar-in { from { transform: scaleX(0); } to { transform: none; } }
@keyframes cf-f-in { from { transform: scaleY(0); } to { transform: none; } }

/* looping version: draw, hold, unwind (9 s cycle) */
.cf-loop .cf-c { animation: cf-c-loop 9s cubic-bezier(.65, 0, .35, 1) infinite .4s both; }
.cf-loop .cf-bar { animation: cf-bar-loop 9s cubic-bezier(.22, 1, .36, 1) infinite .4s both; }
.cf-loop .cf-f { animation: cf-f-loop 9s cubic-bezier(.22, 1, .36, 1) infinite .4s both; }
@keyframes cf-c-loop { 0% { stroke-dashoffset: 1; } 16%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes cf-bar-loop { 0%, 12% { transform: scaleX(0); } 24%, 80% { transform: none; } 90%, 100% { transform: scaleX(0); } }
@keyframes cf-f-loop { 0%, 15% { transform: scaleY(0); } 27%, 77% { transform: none; } 87%, 100% { transform: scaleY(0); } }

.brand-cf { display: grid; place-items: center; background: var(--brand); color: #f2efe9; }
.brand-cf .cf { height: 58%; }

.card-logo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; padding: 18px 24px;
  background: var(--brand); color: #f4f1ec; border-color: var(--brand); }
.card-logo .cf { height: clamp(70px, 6.4vw, 96px); width: auto; }
.card-logo figcaption { display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: #d9d4ca; }
.card-logo .kicker { color: #f4f1ec; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cf .cf-c, .cf .cf-bar, .cf .cf-f { animation: none !important; stroke-dashoffset: 0; transform: none; }
}

/* one dark tone everywhere: dark pills, cards and buttons all use the brand colour */
:root, :root[data-theme] { --surface-dark: var(--brand) !important; }
.pill-dark .i { color: #f2efe9; }

/* work cards: a looping film (Luca Faloni) and a feed that pans top to bottom (Macowens), both at the card's 16:10 */
.work-media .work-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.work-media img.work-pan { object-position: 50% 0; animation: card-pan 16s ease-in-out infinite alternate; }
.card-project:hover .work-media img.work-pan { animation-play-state: paused; }
@keyframes card-pan { 0%, 8% { object-position: 50% 0; } 92%, 100% { object-position: 50% 100%; } }
@media (prefers-reduced-motion: reduce) { .work-media img.work-pan { animation: none; } }

/* two contact cards (email, LinkedIn): wider columns so the email address stays on one line */
@media (min-width: 761px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 360px)); } }
.contact-meta strong { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 400px) { .contact-meta strong { font-size: 0.8rem; overflow-wrap: anywhere; } }