.staff-page{min-height:100vh;color:var(--ink);background:var(--wall)}
.staff-content{max-width:1220px;margin:0 auto;padding:36px clamp(16px,4vw,50px) 90px}
.staff-intro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:center;gap:36px;overflow:hidden;padding:36px clamp(24px,5vw,58px);color:#fffaf0;background:linear-gradient(120deg,#521511,#8c201a 68%,#a42119);border:3px solid #5d120e;border-radius:20px;box-shadow:8px 9px 0 var(--gold)}
.staff-intro:before{content:"";position:absolute;inset:auto -120px -410px auto;width:650px;height:650px;border:2px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.03),0 0 0 150px rgba(255,255,255,.025);pointer-events:none}
.staff-intro>div,.staff-intro>img{position:relative;z-index:1}
.staff-intro img{display:block;width:100%;height:auto;background:#f1e7d4;border:6px solid #fffaf0;border-radius:8px;box-shadow:6px 7px 0 #42120e;transform:rotate(2deg)}
.staff-kicker{margin:0 0 8px;color:var(--brick);font-size:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.staff-intro .staff-kicker{color:#ffd366}
.staff-intro h1{max-width:780px;font-family:var(--font-display);font-size:clamp(37px,5.7vw,69px);font-weight:950;line-height:1;letter-spacing:-.055em;text-transform:uppercase}
.staff-intro h1 em{display:block;color:var(--gold);text-shadow:2px 2px 0 #fff}
.staff-intro p:last-child{max-width:650px;margin:18px 0 0;font-size:clamp(18px,2.2vw,24px);font-weight:700;line-height:1.25}
.staff-builder{margin-top:46px}
.staff-builder-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-bottom:15px;border-bottom:5px solid var(--brick)}
.staff-builder h2,.staff-share h2{margin:0;font-family:var(--font-display);font-size:clamp(29px,4vw,44px);font-weight:950;line-height:1.04;text-transform:uppercase}
.staff-progress{display:flex;align-items:baseline;gap:10px;padding:8px 15px;color:#fffaf0;background:var(--brick);border:2px solid var(--brick-dark);border-radius:6px;box-shadow:3px 4px 0 var(--gold-dark);white-space:nowrap}
.staff-progress strong{font-family:var(--font-display);font-size:27px;line-height:1}.staff-progress strong span{font-size:15px;color:#f3c765}.staff-progress>span{font-size:14px;font-weight:800;text-transform:uppercase}
.staff-helper{margin:12px 0 27px;color:var(--muted);font-size:17px;font-weight:600;line-height:1.4}
.staff-head-row{max-width:580px;margin:0 auto 26px}
.staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.staff-slot{position:relative;min-width:0;padding:15px 16px 17px;background:var(--paper);border:2px solid var(--line);border-radius:12px;box-shadow:4px 5px 0 rgba(82,51,30,.13)}
.staff-slot--filled{border-color:var(--brick)}
.staff-slot--head{padding:19px 20px 21px;color:#fffaf0;background:var(--brick);border:3px solid var(--brick-dark);box-shadow:6px 7px 0 var(--gold)}
.staff-slot-top{display:flex;align-items:start;justify-content:space-between;gap:8px;min-height:43px}
.staff-slot-top>span{font-family:var(--font-display);font-size:17px;font-weight:950;line-height:1.08;text-transform:uppercase}
.staff-slot--head .staff-slot-top>span{color:var(--gold);font-size:23px}
.staff-clear{flex:none;padding:3px 6px;color:var(--brick);background:transparent;border:0;border-bottom:1px solid currentColor;font-size:14px;font-weight:800}
.staff-slot--head .staff-clear{color:#fffaf0}
.staff-slot-body{display:flex;align-items:center;gap:12px;min-width:0}
.staff-avatar{position:relative;width:57px;height:57px;flex:none;display:grid;place-items:center;overflow:hidden;color:var(--brick-dark);background:#e8d2a7;border:2px solid #ac8662;border-radius:10px;font-family:var(--font-display);font-size:20px;font-weight:950}
.staff-avatar--large{width:72px;height:72px;font-size:26px}
.staff-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.staff-chooser{position:relative;min-width:0;flex:1}
.staff-chooser input{width:100%;min-height:48px;padding:10px 12px;color:var(--ink);background:var(--bg-elevated);border:2px solid var(--line);border-radius:7px;font-size:17px;font-weight:750;line-height:1.2}
.staff-chooser input::placeholder{color:var(--muted);opacity:.9}
.staff-chooser input:focus{border-color:var(--gold-dark);outline:3px solid var(--gold);outline-offset:1px}
.staff-selected-note{display:block;margin-top:5px;color:var(--muted);font-size:13px;font-weight:650}
.staff-slot--head .staff-selected-note{color:#f2d7bd}
.staff-suggestions{position:absolute;z-index:30;top:calc(100% + 5px);left:0;right:0;max-height:305px;overflow-y:auto;margin:0;padding:5px;list-style:none;background:var(--bg-elevated);border:2px solid var(--brick);border-radius:8px;box-shadow:5px 7px 0 rgba(50,27,18,.24)}
.staff-suggestions li{margin:0;padding:0}
.staff-suggestions button{width:100%;display:flex;align-items:center;gap:8px;min-height:45px;padding:5px 7px;color:var(--ink);background:transparent;border:0;border-radius:5px;text-align:left;font-size:16px;font-weight:750}
.staff-suggestions .staff-avatar{width:34px;height:34px;border-radius:5px;font-size:12px}
.staff-suggestions li[aria-selected=true] button,.staff-suggestions button:hover{color:#fff;background:var(--brick)}
.staff-suggestions li[aria-selected=true] .staff-avatar,.staff-suggestions button:hover .staff-avatar{color:var(--brick);border-color:#f5d6ab}
.staff-suggestions small{display:block;color:var(--muted);font-size:12px;font-weight:700}
.staff-suggestions li[aria-selected=true] small,.staff-suggestions button:hover small{color:#ffdb85}
.staff-share{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,390px);gap:24px;margin-top:44px;padding:30px;border:3px solid var(--brick-dark);border-radius:17px;background:var(--paper);box-shadow:7px 8px 0 var(--gold)}
.staff-share>div:first-child>p:last-child{max-width:520px;margin:12px 0 0;color:var(--muted);font-size:18px;font-weight:650;line-height:1.35}
.staff-share-controls{display:grid;gap:8px;align-content:start}
.staff-share-controls label{font-size:15px;font-weight:900;text-transform:uppercase}.staff-share-controls label span{font-weight:500;text-transform:none}
.staff-share-controls input{width:100%;min-height:47px;padding:9px 12px;color:var(--ink);background:var(--bg-elevated);border:2px solid var(--line);border-radius:6px;font-size:17px}
.staff-generate,.staff-result-actions button{min-height:50px;padding:10px 16px;color:#fffaf0;background:var(--brick);border:2px solid var(--brick-dark);border-radius:6px;box-shadow:3px 4px 0 var(--gold-dark);font-family:var(--font-display);font-size:16px;font-weight:950;text-transform:uppercase}
.staff-generate:disabled{opacity:.53;cursor:not-allowed;box-shadow:none}
.staff-share-controls small{color:var(--muted);font-size:14px;font-weight:750}
.staff-message{grid-column:1/-1;margin:0;padding:10px 13px;color:var(--ink);background:var(--state-hover);border-left:4px solid var(--gold-dark);font-size:16px;font-weight:700}
.staff-result{grid-column:1/-1;display:grid;justify-items:center;gap:16px;padding-top:10px;border-top:2px solid var(--line)}
.staff-result>img{display:block;width:min(100%,500px);height:auto;border:2px solid var(--line);box-shadow:6px 7px 0 rgba(72,44,24,.17)}
.staff-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.staff-result-actions button{background:var(--gold);color:#2d211b;border-color:var(--gold-dark)}
.staff-result>p{max-width:620px;margin:0;color:var(--muted);font-size:15px;font-weight:650;text-align:center}
.staff-credits{margin:25px 0 0;color:var(--muted);font-size:14px}.staff-credits summary{width:fit-content;cursor:pointer;font-weight:800}.staff-credits ul{padding-left:20px;line-height:1.6}.staff-credits a{text-decoration:underline}
@media(max-width:900px){.staff-intro{grid-template-columns:1fr 240px;gap:22px}.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.staff-content{padding:22px 14px 65px}.staff-intro{grid-template-columns:1fr;padding:25px 21px;gap:22px;box-shadow:5px 6px 0 var(--gold)}.staff-intro img{max-width:300px;transform:rotate(1deg)}.staff-builder{margin-top:36px}.staff-builder-heading{align-items:start}.staff-progress{display:block;padding:8px 10px;text-align:center}.staff-progress>span{display:block;font-size:11px}.staff-helper{font-size:15px}.staff-head-row{margin-bottom:18px}.staff-grid{grid-template-columns:1fr;gap:13px}.staff-slot{padding:14px}.staff-slot-top{min-height:34px}.staff-share{grid-template-columns:1fr;gap:18px;padding:20px;margin-top:35px;box-shadow:5px 6px 0 var(--gold)}}
@media(max-width:400px){.staff-progress strong{font-size:21px}.staff-builder h2{font-size:28px}.staff-intro h1{font-size:39px}.staff-avatar{width:50px;height:50px}.staff-avatar--large{width:62px;height:62px}.staff-slot-body{gap:8px}}