/* Shared by every page. Page-specific styles live in /assets/css/pages/<page>.css */

/* Self-hosted Onest (latin) */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/onest-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/onest-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/onest-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/onest-latin-700-normal.woff2') format('woff2'); }

:root { color-scheme: only light; }
[hidden] { display: none !important; }
body:focus { outline: none; } /* "Back to top" moves focus to the page itself; no ring around the whole page */
/* Page headlines and hero photos are visible from the first frame and only slide up (no fade from invisible),
   so the main content shows at once and browsers can measure it (Largest Contentful Paint). */
.page-hero h1.intro, .page-hero .ph.intro { opacity: 1; animation-name: introSlide; }
@keyframes introSlide { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-hero h1.intro, .page-hero .ph.intro { animation: none; transform: none; } }

/* Photos are wrapped in <picture> by the build (AVIF/WebP); keep the frames working as if the <img> were direct */
.ph > picture, .photo > picture, .faces > picture { display: contents; }
.ph > picture > img, .photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Phone menu button swaps its icon */
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-menu { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }

/* Logo build: plays on the first page view of a visit only (see the inline script in <head>) */
.site-header .mark .lg-a, .site-header .mark .lg-b, .site-header .mark .lg-c { transform-box: fill-box; transform-origin: center; animation: lgIn .6s cubic-bezier(.2,.75,.2,1) both; }
.site-header .mark .lg-a { --lg-from: translate(-48px, 0); }
.site-header .mark .lg-c { --lg-from: translate(48px, 0); animation-delay: .08s; }
.site-header .mark .lg-b { --lg-from: translate(0, 28px) scale(.6); animation-delay: .28s; }
.site-header .brand-text { animation: lgText .5s cubic-bezier(.2,.75,.2,1) .35s both; }
@keyframes lgIn { from { opacity: 0; transform: var(--lg-from); } to { opacity: 1; transform: none; } }
@keyframes lgText { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.logo-seen .site-header .mark polygon, .logo-seen .site-header .brand-text { animation: none; }
@media (prefers-reduced-motion: reduce) { .site-header .mark polygon, .site-header .brand-text { animation: none !important; } }