/* Shared by the profile demos: identity block, panels and controls on top of the site's album components. */
html { background:#18171a; }
.pf-bg { position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block; }
.pf .main { padding:0; }
.pf .hero { min-height:0; height:auto; max-height:none; margin-top:0; padding:clamp(28px,5vw,64px) 0 clamp(60px,7vw,100px); background-color:transparent; }
.pf .hero::before { background:linear-gradient(90deg,rgb(9 11 12 / .9),rgb(9 11 12 / .5) 45%,transparent 85%); }
.pf-id { display:flex; align-items:center; gap:18px; margin:14px 0 12px; }
.pf-id .photographer__img { width:84px; height:84px; }
.pf-id__who small { display:block; color:#dcdcdc; font-size:14px; }
.pf-badge { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:99px; background:rgb(255 181 0 / .16); color:var(--yellow); font-size:12px; font-weight:700; vertical-align:middle; }
.pf-stats { display:flex; flex-wrap:wrap; gap:8px 24px; margin:20px 0 0; padding:0; }
.pf-stats div { display:grid; }
.pf-stats dd { margin:0; font:600 22px/1.1 var(--font-head); color:#fff; }
.pf-stats dt { font-size:12px; color:var(--muted); }
.pf .btn--ghostline { background:rgb(255 255 255 / .08); border:1px solid var(--line-strong); color:#fff; }
.pf-panel { position:relative; padding:clamp(18px,2.4vw,28px); border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:rgb(24 23 26 / .62); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.pf-panel h3 { margin:0 0 6px; font:600 19px/1.2 var(--font-head); color:#fff; }
.pf-hint { margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.45; }
.pf-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pf-chip { min-height:36px; padding:0 14px; border:1px solid var(--line-strong); border-radius:99px; background:rgb(255 255 255 / .05); color:#e6e6e6; font:500 14px var(--font); cursor:pointer; transition:background var(--trans),color var(--trans),border-color var(--trans); }
.pf-chip:hover { border-color:rgb(255 255 255 / .4); }
.pf-chip[aria-pressed=true] { background:var(--yellow); border-color:var(--yellow); color:#18171a; font-weight:700; }
.pf-label { display:block; margin:14px 0 6px; font-size:13px; font-weight:700; color:#dcdcdc; }
.pf input[type=range] { width:100%; accent-color:var(--yellow); height:28px; }
.pf input[type=number],.pf input[type=search],.pf select,.pf textarea { width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:rgb(0 0 0 / .3); color:#fff; font:400 15px var(--font); }
.pf textarea { resize:vertical; line-height:1.45; }
.pf :focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }
.pf .tile { color:#fff; }
.pf .tile:focus-visible { outline-offset:-2px; }
.pf-mt { margin-top:clamp(28px,4vw,44px); }
.pf-status { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.pf-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.is-ok { color:#7cc58a; } .is-warn { color:var(--yellow); } .is-no { color:#ff8a7a; }
.pf .home-rails { margin-top:0!important; position:relative; z-index:1; }
@media (max-width:700px){ .pf-id .photographer__img { width:68px; height:68px; } }
.pf .btn { width:auto; padding:0 20px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.pf .btn span { color:inherit; }
.pf .btn--primary { background:var(--yellow); color:#18171a; }
.pf .btn--primary:hover { background:#ffc533; }
.pf .follow { min-height:44px; padding:0 16px; }
.pf .follow b { font-weight:700; }