/* WordPress-specific additions. Keeps the original styles.css / project-pages.css untouched. */

/* Wheel cabins: colour comes from each project's accent field. */
.project-nodes .node[style*="--node-accent"]{background-color:var(--node-accent)}
.project-nodes .node[style*="--node-accent"]:before,
.project-nodes .node[style*="--node-accent"]:after{background:var(--node-accent)}

/* Carousel card: one cover photo, always shown complete. The frame takes the
   photo's own proportions (visible area only, without screenshot margins); if that
   would be too tall it is capped and the photo is fitted inside it. */
.card{grid-template-columns:minmax(0,1fr)}
.card .photo-mosaic.one{display:block;width:100%;height:auto;aspect-ratio:var(--img-ratio);max-height:50vh;align-self:start;position:relative;container-type:size;--img-ratio:1.5;--img-visible:1}
.photo-mosaic.one img{position:absolute;left:50%;top:50%;width:min(100cqw,calc(100cqh * var(--img-ratio)));height:auto;max-width:none;object-fit:fill;translate:-50% calc(-50% * var(--img-visible))}
@media (max-width:760px){.card .photo-mosaic.one{max-height:42vh}}

/* Logged-in admin bar should not cover the fixed header. */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* Ordinary WordPress pages (index.php / 404.php). */
.generic-page{min-height:100vh;padding:clamp(110px,16vh,170px) clamp(22px,6vw,90px) 90px;max-width:1100px}
.generic-entry h1{font-size:clamp(40px,7vw,96px);line-height:.9;margin:0 0 36px}
.generic-entry h1 span{color:var(--pink);margin-left:.12em;font-size:.5em;vertical-align:.4em}
.generic-content{font-size:18px;line-height:1.8;color:#484848;max-width:68ch}
.generic-content a{color:#111}
.generic-content img{max-width:100%;height:auto}
.generic-page .back-link{display:inline-block;margin-top:40px}

/* Keep the wordmark proportional (width/height attributes only reserve its aspect ratio). */
.wordmark{display:block;height:auto}