/* ---------- Photo & picture templates ---------- */
.page{--psz:88px}
.phs-l{--psz:124px}
.photo{width:var(--psz);height:var(--psz);overflow:hidden;flex:none}
.photo.empty{background:var(--tint);color:var(--accent);position:relative;display:flex;align-items:flex-end;justify-content:center}
.photo.empty svg{width:100%;height:100%;display:block}
.photo.empty em{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:600 10px "Segoe UI",sans-serif;font-style:normal;color:var(--accent);opacity:0;transition:opacity .2s}
.photo.empty:hover em{opacity:1}

/* photo shapes */
.ph-circle .photo{border-radius:50%}
.ph-round .photo{border-radius:22%}
.ph-square .photo{border-radius:4px}
.ph-arch .photo{border-radius:999px 999px 10px 10px;height:calc(var(--psz)*1.2)}
.ph-hex .photo{border-radius:0;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.ring:not(.ph-hex) .photo{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent)}

/* decorative banner patterns (white, low opacity, drawn as inline SVG) */
.pat-waves{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24'%3E%3Cpath d='M0 12 Q20 0 40 12 T80 12' fill='none' stroke='white' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E")}
.pat-dots{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='white' fill-opacity='.3'/%3E%3C/svg%3E")}
.pat-tri{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 44 L22 0 L44 44 Z' fill='white' fill-opacity='.09'/%3E%3C/svg%3E")}
.pat-grid{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 0H28V28' fill='none' stroke='white' stroke-opacity='.16'/%3E%3C/svg%3E")}
.pat-circles{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='26' fill='none' stroke='white' stroke-opacity='.17' stroke-width='2'/%3E%3C/svg%3E")}
.pat-none{--pat:none}
.hd-banner .blk-header{background-image:var(--pat,none),linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));background-color:var(--accent)}

/* header: portrait-left card */
.hd-photoleft{--psz:108px}
.hd-photoleft .blk-header{background:var(--tint);border-radius:14px;padding:18px 24px}
.hd-photoleft .h-wrap{gap:22px}
.hd-photoleft .h-name{color:var(--accent)}

/* header: centred portrait */
.hd-stack{--psz:112px}
.hd-stack .h-wrap{flex-direction:column;gap:12px;text-align:center}
.hd-stack .h-body{text-align:center}
.hd-stack .h-contacts{justify-content:center}
.hd-stack .h-name{color:var(--accent);font-size:2.2em}
.hd-stack .photo{box-shadow:0 0 0 4px #fff,0 0 0 6px var(--accent)}
.hd-stack.ph-hex .photo{box-shadow:none}

/* header: hero banner with overlapping portrait */
.hd-hero{--psz:112px}
.hd-hero .blk-header::before{content:"";display:block;height:96px;border-radius:14px;background-color:var(--accent);background-image:var(--pat,none),linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000))}
.hd-hero .h-wrap{flex-direction:column;text-align:center;gap:8px;margin-top:-58px}
.hd-hero .h-body{text-align:center}
.hd-hero .h-contacts{justify-content:center}
.hd-hero .h-name{color:var(--accent)}
.hd-hero .photo{box-shadow:0 0 0 5px #fff,0 8px 18px rgba(0,0,0,.2)}
.hd-hero.ph-hex .photo{box-shadow:none}

/* header: colour block with large portrait */
.hd-duo{--psz:118px}
.hd-duo .h-wrap{flex-direction:row-reverse;gap:24px;color:#fff;border-radius:14px;padding:20px 26px;background-color:var(--accent);background-image:var(--pat,none),linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000))}
.hd-duo .ed:hover{background:rgba(255,255,255,.14)}
.hd-duo .ed:empty::before{color:rgba(255,255,255,.6)}
.hd-duo .photo.empty{background:rgba(255,255,255,.9)}

/* header: large portrait on the right with a rule */
.hd-photobanner{--psz:116px}
.hd-photobanner .h-wrap{flex-direction:row-reverse;align-items:flex-end;gap:24px;border-bottom:3px solid var(--accent);padding-bottom:16px}
.hd-photobanner .h-name{color:var(--accent);font-size:2.4em}
.hd-photobanner .h-contacts{flex-direction:column}
.hd-photobanner .ct+.ct::before{content:none}
.hd-photoright{--psz:100px}

/* sidebar portraits (header lives in the sidebar) */
.sbp-circle .col[data-col=side] .h-wrap,.sbp-arch .col[data-col=side] .h-wrap,.sbp-round .col[data-col=side] .h-wrap{align-items:center;text-align:center}
.sbp-circle .col[data-col=side] .h-body,.sbp-arch .col[data-col=side] .h-body,.sbp-round .col[data-col=side] .h-body{text-align:center}
.sbp-circle .col[data-col=side] .h-contacts,.sbp-arch .col[data-col=side] .h-contacts,.sbp-round .col[data-col=side] .h-contacts{align-items:center;text-align:center}
.sbp-circle .col[data-col=side] .photo{width:128px;height:128px;border-radius:50%;margin-bottom:6px}
.sbp-arch .col[data-col=side] .photo{width:128px;height:152px;border-radius:999px 999px 10px 10px;margin-bottom:6px}
.sbp-round .col[data-col=side] .photo{width:128px;height:128px;border-radius:24%;margin-bottom:6px}
.sbp-full .col[data-col=side] .h-wrap{align-items:stretch}
.sbp-full .col[data-col=side] .photo{width:calc(100% + 40px);height:auto;aspect-ratio:1;margin:calc(var(--pad)*-1) -20px 8px;border-radius:0}
.sb-left-light .col[data-col=side] .photo.empty,.sb-right-light .col[data-col=side] .photo.empty{background:#fff}

@media print{.photo.empty{display:none}}