/* Animated underline from the reference site, shared by navigation and actions. */
.site-header nav a,.button,.ghost,.text-link{position:relative}
.site-header nav a::after,.button::after,.ghost::after,.text-link::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease;pointer-events:none}
.site-header nav a::after{bottom:-3px;background:var(--orange)}
.button::after,.ghost::after{left:20px;right:20px;bottom:8px}
.button.small::after{left:16px;right:16px;bottom:6px}
.text-link::after{bottom:-3px}
:is(.site-header nav a,.button,.ghost,.text-link):is(:hover,:focus-visible)::after,.site-header nav a[aria-current='page']::after{transform:scaleX(1)}
/* Observe individual items so large sections remain visible and usable. */
.will-reveal{opacity:0}
.is-revealed{animation:content-fade .35s ease-out backwards}
@keyframes content-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .will-reveal{opacity:1}
 .is-revealed{animation:none}
 :is(.site-header nav a,.button,.ghost,.text-link)::after{transition:none}
}
@media print{.will-reveal{opacity:1}.is-revealed{animation:none}}

/* Give email and telephone links visible feedback in every section. */
a:is([href^="mailto:"],[href^="tel:"]){transition:color .2s ease,text-decoration-color .2s ease,background-color .2s ease;text-underline-offset:5px}
body a:is([href^="mailto:"],[href^="tel:"]):is(:hover,:focus-visible){color:#b94f1e;text-decoration:underline;text-decoration-thickness:2px}
footer a:is([href^="mailto:"],[href^="tel:"]):is(:hover,:focus-visible),.dark a:is([href^="mailto:"],[href^="tel:"]):is(:hover,:focus-visible){color:#ff9a63}
a:is([href^="mailto:"],[href^="tel:"]):focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:2px}
body a:is([href^="mailto:"],[href^="tel:"]):active{color:var(--orange);background-color:rgba(244,123,59,.16);text-decoration:underline}
@media(prefers-reduced-motion:reduce){a:is([href^="mailto:"],[href^="tel:"]){transition:none}}
/* Locally hosted Inter for the top navigation and Contact action. */
@font-face{font-family:'Inter';src:url('../fonts/inter.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
.site-header nav a,.site-header>.button{font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;letter-spacing:.025em}
/* Bottom navigation and document links share orange interaction feedback. */
footer .footer-bottom a{transition:color .2s ease}
footer .footer-bottom a:is(:hover,:focus-visible,:active){color:var(--orange)}
footer .footer-bottom a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
main .footer-conditions a{transition:color .2s ease;text-underline-offset:5px}
main .footer-conditions a:is(:hover,:focus-visible,:active){color:var(--orange);text-decoration:underline;text-decoration-thickness:2px}
main .footer-conditions a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
@media(prefers-reduced-motion:reduce){main .footer-conditions a{transition:none}}
/* The fixed canvas redraws the original image, without CSS scaling. */
.card-image.canvas-zoom{position:relative}
.card .card-image.canvas-zoom img{transform:none;scale:1;transition:none;opacity:0}
.zoom-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(prefers-reduced-motion:reduce){
 footer .footer-bottom a{transition:none}
 .card .card-image.canvas-zoom img{opacity:1}
 .zoom-canvas{display:none}
}
@media print{.card .card-image.canvas-zoom img{opacity:1}.zoom-canvas{display:none}}
/* Keep the image frame flush with the card, with no inline-image gaps. */
.card{overflow:hidden}
.card > .card-image{align-self:stretch;flex-shrink:0;min-width:0;margin:0;padding:0;line-height:0}
.card > .card-image img{display:block;width:100%;max-width:none;margin:0;padding:0}

/* Project-card interaction keeps the existing links keyboard accessible. */
.clickable-card{cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.card.clickable-card:is(:hover,:focus-within){border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.clickable-card h2 a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.back-to-top{display:flex;align-items:center;justify-content:center;position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:30;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff60;background:rgba(36,36,36,.55);color:#fff;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 3px 14px #0002;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease,color .2s ease,background-color .2s ease}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.back-to-top svg{width:22px;height:22px;flex-shrink:0}
.back-to-top:is(:hover,:active){color:var(--orange);background:rgba(36,36,36,.8)}
.back-to-top:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.clickable-card,.back-to-top{transition:none}}
@media print{.back-to-top{display:none}}