/* Brand mark shared with about.emanueldan.ro: same logo (inline SVG from about/assets/media/logo.svg) and styling. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: inherit;
    text-decoration: none;
}
.brand-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(155, 224, 122, .12);
}
.brand-mark svg { width: 30px; height: 30px; display: block; }
.brand-mark path[fill="#7bbf6a"] { fill: var(--accent, #9be07a); }
.brand-mark path[fill="#2c2b2b"] { fill: transparent; }
.brand-name {
    font: 600 15px/1 var(--font-sans, 'Geist', ui-sans-serif, system-ui, sans-serif);
    letter-spacing: -.02em;
    color: var(--text, #e9ede9);
}

/* Language switch in page headers (i18n.js fills it): a small mono pill like about's. The nav bar styles its own. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 999px;
    font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
    letter-spacing: .04em;
    color: var(--muted, #97a299);
    text-decoration: none;
    transition: color .25s, border-color .25s;
}
.lang-switch:hover { color: var(--text, #e9ede9); border-color: var(--border-strong, rgba(255, 255, 255, .16)); }

/* Server-rendered content (inc/seo.php): the photo lists crawlers and no-JavaScript readers get. As soon as scripts
   run it is hidden (the class is set in <head>), and the pages show the same photos in their own interface. */
.js .ssr { display: none; }
.ssr { max-width: 1320px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px); color: #e9ede9; font: 15px/1.6 'Geist', ui-sans-serif, system-ui, sans-serif; }
.ssr h2 { font: 400 clamp(26px, 3vw, 36px)/1.1 'Instrument Serif', ui-serif, Georgia, serif; margin: 28px 0 8px; }
.ssr a { color: inherit; }
.ssr p { color: #97a299; }
.ssr-grid { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.ssr-fig { margin: 0; }
.ssr-fig img, .ssr-fig video { display: block; width: 100%; height: auto; border-radius: 10px; }
.ssr-fig video { aspect-ratio: 16 / 9; background: #151917; }
.ssr-fig figcaption { margin-top: 6px; font-size: 13px; color: #97a299; }
.ssr-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Skeleton loading (YouTube-style shimmer) while a photo, clip poster or local copy is loading: the image's own
   background shimmers and its pixels cover it once they arrive; inc/layout.php marks loaded images .is-loaded,
   which stops the animation (and clears the letterbox of contain-fitted images). */
@keyframes skel-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
img:is([src*="/pictures/"], [src*="/img/"], [src*="/video/"], .skel):not(.is-loaded) {
    background-color: #141816;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skel-shimmer 1.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    img:is([src*="/pictures/"], [src*="/img/"], [src*="/video/"], .skel):not(.is-loaded) { animation: none; }
}

/* Header links never wrap ("Viewing modes" stays on one line) */
.top nav a, .top nav, footer nav a { white-space: nowrap; }

/* Touch screens: the page headers' links (About, Galleries, the language pill) get finger-sized tap areas */
@media (pointer: coarse) {
    .lang-switch { min-height: 44px; min-width: 48px; justify-content: center; padding: 0 14px; font-size: 13px; }
    .top nav a:not(.lang-switch), .top > a, header a.back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; white-space: nowrap; }
    .brand .brand-mark { width: 44px; height: 44px; }
}
/* …but links marked "hide on small screens" stay hidden there (the rule above must not bring them back) */
@media (max-width: 860px) { .top nav a.hide-s { display: none; } }