/* A receiver faceplate, outside the moving room and its filters. */
#portfolio-dialog{--panel-ink:#30251b;--panel-paper:#eee2c5;--panel-red:#ac3527;--panel-orange:#c45b2b;padding:9px;width:min(490px,calc(100% - 32px));max-height:calc(var(--access-viewport-height,100dvh) - 28px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;scroll-padding:16px;color:var(--panel-ink);background:#34261c;border:1px solid #9a745347;border-radius:24px;box-shadow:0 35px 110px #100b09a3,0 1px 0 #ffebc82b inset;scrollbar-width:thin;color-scheme:light}
#portfolio-dialog::backdrop{background:#20140bc2;backdrop-filter:blur(6px);animation:private-backdrop .3s ease both}
.access-panel{position:relative;overflow:hidden;border:1px solid #f6ecd6;border-radius:17px;padding:27px 30px 28px;background:linear-gradient(115deg,#f5ecd7,var(--panel-paper) 65%,#e3d6b9);box-shadow:0 1px 5px #0005}
.access-panel:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-linear-gradient(0deg,transparent 0 3px,#6543210b 3px 4px)}
.access-masthead{display:flex;align-items:center;gap:10px;padding-right:34px;font-size:12px;font-weight:500;letter-spacing:-.015em}
.access-masthead>img{width:27px;height:27px;filter:brightness(0) saturate(100%);opacity:.82}
#portfolio-dialog .access-brand-lockup{display:block;width:225px;max-width:100%;height:auto;filter:none;opacity:1}
#portfolio-dialog .dialog-close{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #5e43202c;border-radius:50%;background:transparent;color:var(--panel-ink);padding:11px;transition:background .2s,transform .3s}
.dialog-close svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}
#portfolio-dialog .dialog-close:hover{background:#30251b0c;transform:rotate(90deg)}
.access-frequency{position:relative;display:flex;align-items:center;justify-content:space-between;gap:17px;margin-top:25px;border-top:1px solid #77623c55;padding-top:14px;height:25px;font-family:"Space Grotesk",monospace;font-size:9px;font-weight:500;letter-spacing:.13em}
.access-frequency i{flex:1;position:relative;height:8px;background:repeating-linear-gradient(90deg,#30251b70 0 1px,transparent 1px 9px)}
.access-frequency-needle{position:absolute;top:12px;left:27%;height:13px;width:2px;background:var(--panel-orange);box-shadow:0 0 0 3px #eee2c5;z-index:1;transform:translateX(calc(var(--dial-progress,0)*58px));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.access-frequency>span:last-child{white-space:nowrap}
#portfolio-dialog h2{font-family:"Instrument Sans",Arial,sans-serif;font-size:70px;font-weight:500;line-height:.89;letter-spacing:-.065em;margin:29px 0 18px}
#portfolio-dialog h2 span{color:var(--panel-red)}
#portfolio-dialog #portfolio-description{margin:0;font-size:15px;line-height:1.5;color:#635341;letter-spacing:-.015em}
#portfolio-access{margin-top:27px}
.access-entry{--label-height:20px;--label-gap:10px;--display-height:89px;--dial-size:120px;display:grid;grid-template-columns:minmax(0,1fr) var(--dial-size);align-items:start;gap:18px}
.access-input{min-width:0}
.access-label{display:block;margin-bottom:var(--label-gap);font-size:15px;line-height:var(--label-height);font-weight:500;letter-spacing:-.015em}
.access-display{position:relative;min-width:0;height:89px;padding:13px 15px 12px;border:2px solid #9c9375;border-radius:12px;background:radial-gradient(ellipse at 38% 18%,#354637,#18241f 110%);box-shadow:0 3px 8px #080f0b8a inset,0 1px 0 #ffffffa3;transition:border-color .25s,box-shadow .3s;overflow:hidden;color:#e6edbe}
.access-display:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#141a1526 0 1px,transparent 1px 3px);opacity:.45}
.access-code-row{position:relative;display:flex;align-items:center;height:37px}
#portfolio-code{width:100%;min-width:0;height:37px;border:0;border-radius:0;background:transparent;color:#e9efbc;caret-color:#e9efbc;padding:0;font-family:"Space Grotesk",monospace;font-size:23px;letter-spacing:.015em;box-shadow:none;outline:none;text-shadow:0 0 9px #cee8a838}
#portfolio-code::placeholder{font-size:19px;letter-spacing:-.025em;color:#b3bea6b3;opacity:1}
.access-display:focus-within{border-color:#a9b58e;box-shadow:0 0 0 2px #6a784526,0 2px 9px #0c100d80 inset,0 0 14px #a7b77116}
.receiver-signal{display:flex;align-items:center;gap:4px;height:12px;margin-top:9px}
.receiver-signal i{flex:1;height:3px;background:#8eab7852;border-radius:1px;transition:background .25s,transform .35s}
#portfolio-dialog[data-code-ready="true"] .receiver-signal i{background:#b8d69d99;transform:scaleY(1.6)}
#portfolio-dialog[data-code-ready="true"] .receiver-signal i:nth-child(3n){transform:scaleY(2.6)}
.receiver-scan{position:absolute;inset:-20% 0 auto;height:18%;background:linear-gradient(transparent,#eaffb412,transparent);opacity:0;pointer-events:none}
.access-tuner{display:flex;justify-content:center;min-width:0;padding-top:calc(var(--label-height) + var(--label-gap) + (var(--display-height) - var(--dial-size))/2)}
.dial-control{position:relative;width:120px;height:151px}
.dial-scale{position:absolute;top:0;left:0;width:120px;height:120px;fill:none;pointer-events:none}
.dial-ticks{stroke:#7a694b;stroke-width:.9;stroke-linecap:round;opacity:.55}
.dial-ring-base{stroke:var(--panel-orange);stroke-width:3;opacity:.25;transition:opacity .3s}
.dial-track{stroke:var(--panel-orange);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(.76 - var(--dial-progress,0)*.76);transition:stroke-dashoffset .65s cubic-bezier(.2,.8,.2,1),filter .3s}
.access-dial{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;border-radius:14px;touch-action:none;user-select:none;cursor:pointer;background:transparent;color:var(--panel-ink)}
.dial-hardware{position:absolute;top:18px;left:18px;width:84px;height:84px;border:1px solid #74684c;border-radius:50%;background:repeating-conic-gradient(from 0deg,#36392f 0 2deg,#171c17 2deg 5deg);box-shadow:0 1px 0 #fdf5d1 inset,0 3px 0 #5a513b,0 5px 9px #2a281c40;transition:box-shadow .3s;cursor:grab}
.dial-face{position:absolute;inset:4px;border-radius:50%;border:1px solid #5b5f4a;background:radial-gradient(circle at 32% 24%,#3d4338,#242b23 44%,#121912 95%);box-shadow:0 1px 1px #cfcb951c inset,0 2px 4px #090e0970}
.dial-rotor{position:absolute;inset:5px;border-radius:50%;transform:rotate(var(--dial-turn,-55deg));transition:transform .65s cubic-bezier(.2,1.22,.3,1);pointer-events:none}
.dial-indicator{position:absolute;top:8px;left:calc(50% - 2px);width:4px;height:25px;border-radius:2px;background:linear-gradient(90deg,#c7bb95,#f6edcb 65%,#b6a980);box-shadow:1px 1px 2px #0008}
.access-dial:hover .dial-hardware,.access-dial:focus-visible .dial-hardware,#portfolio-dialog[data-code-ready="true"] .dial-hardware{box-shadow:0 1px 0 #fdf5d1 inset,0 3px 0 #5a513b,0 6px 13px #2a281c55,0 0 24px #d1692f26}
#portfolio-dialog[data-access="idle"] .access-dial:hover .dial-rotor{transform:rotate(calc(var(--dial-turn,-55deg) + 8deg))}
#portfolio-dialog[data-code-ready="true"] .dial-ring-base,.access-tuner:focus-within .dial-ring-base{opacity:.55}
#portfolio-dialog[data-code-ready="true"] .dial-track{filter:drop-shadow(0 0 4px #d4693038)}
.access-dial[aria-disabled="true"],.access-dial[aria-disabled="true"] .dial-hardware{cursor:wait}
.dial-caption{position:absolute;left:0;right:0;top:124px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:"Instrument Sans",Arial,sans-serif;font-size:18px;font-weight:500;letter-spacing:-.025em;line-height:1.25;white-space:nowrap;color:var(--panel-ink)}
.dial-caption svg{width:18px;height:14px;fill:none;stroke:var(--panel-orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s}
.access-dial:hover .dial-caption svg{transform:rotate(30deg)}
#portfolio-dialog[data-dial-dragging] .dial-hardware{cursor:grabbing}
#portfolio-dialog[data-dial-dragging] .dial-rotor,#portfolio-dialog[data-dial-dragging] .dial-track,#portfolio-dialog[data-dial-dragging] .access-frequency-needle{transition:none}
#portfolio-dialog[data-access="tuning"] .access-code-row{animation:receiver-flicker .85s linear both}
#portfolio-dialog[data-access="tuning"] .receiver-scan{animation:receiver-scan .85s ease-out both}
#portfolio-dialog[data-access="tuning"] .receiver-signal i{animation:receiver-meter .48s ease-in-out infinite alternate}
#portfolio-dialog[data-access="tuning"] .receiver-signal i:nth-child(3n){animation-delay:-.2s}
#portfolio-dialog[data-access="tuning"] .receiver-signal i:nth-child(3n + 1){animation-delay:-.35s}
#portfolio-dialog[data-access="tuning"] .access-lamp{background:#b87929;box-shadow:0 0 7px #c7883290}
#portfolio-dialog[data-access="granted"] .access-lamp{background:#819943;box-shadow:0 0 8px #899a4280}
#portfolio-dialog[data-access="granted"] .receiver-signal i{background:#e6f49b;box-shadow:0 0 7px #c4e37660;transform:scaleY(2)}
#portfolio-dialog[data-access="denied"] .access-display,#portfolio-dialog[data-access="empty"] .access-display{border-color:#a33b2c}
#portfolio-dialog[data-access="denied"] .access-lamp,#portfolio-dialog[data-access="empty"] .access-lamp{background:#ae3829;box-shadow:0 0 6px #ae382980}
#portfolio-dialog[data-access="pending"] .access-lamp{background:#bd752a;box-shadow:0 0 6px #bd752a60}
.access-readout{display:flex;align-items:baseline;gap:9px;min-height:22px;margin-top:15px}
.access-lamp{flex:none;position:relative;top:-1px;width:6px;height:6px;border-radius:50%;background:#76814f;box-shadow:0 0 0 2px #74774618;transition:background .2s,box-shadow .2s}
#portfolio-dialog #access-feedback{font-family:"Instrument Sans",Arial,sans-serif;font-size:13px;line-height:1.5;color:#685741;margin:0;letter-spacing:-.01em}
.access-footer{margin-top:20px;padding-top:20px;border-top:1px solid #77623c40;font-size:15px;font-weight:500;color:var(--panel-ink)}
#portfolio-dialog .dialog-contact{display:flex;align-items:center;justify-content:space-between;gap:15px;max-width:none;width:100%;min-height:52px;margin:10px 0 0;padding:13px 17px;border:1px solid #8e2b21;border-radius:7px;background:var(--panel-red);color:#fff4da;box-shadow:0 2px 0 #70261e,0 1px 0 #ffe6c52b inset;font-size:20px;line-height:1.25;font-weight:500;letter-spacing:-.025em;text-decoration:none;transition:background .2s,box-shadow .2s}
#portfolio-dialog .dialog-contact:hover{background:#932d22;box-shadow:0 2px 0 #70261e,0 4px 15px #9b34232b}
.dialog-contact svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,1,.3,1)}
.dialog-contact:hover svg{transform:translate(2px,-2px)}
#portfolio-dialog button:focus-visible,#portfolio-dialog a:focus-visible{outline:2px solid var(--panel-orange);outline-offset:4px}
#portfolio-dialog[open]{animation:private-panel .5s cubic-bezier(.16,1,.3,1) both}
#portfolio-dialog[open] .access-frequency-needle{animation:private-tune .75s cubic-bezier(.22,1,.36,1) both}
@keyframes private-panel{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes private-backdrop{from{opacity:0}to{opacity:1}}
@keyframes private-tune{0%{left:8%}55%{left:31%}75%{left:25%}100%{left:27%}}
@keyframes receiver-flicker{0%,100%{opacity:1}18%{opacity:.74}32%{opacity:1}65%{opacity:.88}80%{opacity:1}}
@keyframes receiver-scan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(650%)}}
@keyframes receiver-meter{from{transform:scaleY(.8);opacity:.55}to{transform:scaleY(3.5);opacity:1}}
@media(min-width:601px) and (max-height:760px){
 #portfolio-dialog .access-brand-lockup{width:205px}
 #portfolio-dialog .access-panel{padding-top:22px;padding-bottom:22px}
 #portfolio-dialog .access-frequency{margin-top:18px}
 #portfolio-dialog h2{font-size:56px;margin:22px 0 15px}
}
/* A compact receiver on phones, anchored inside the visible keyboard viewport. */
@media(max-width:600px),(max-width:960px) and (pointer:coarse){
 #portfolio-dialog{position:fixed;inset:var(--access-viewport-top,0px) 0 auto;margin:12px auto;width:min(450px,calc(100% - 24px));max-width:calc(100% - 24px);padding:6px;border-radius:19px;max-height:calc(var(--access-viewport-height,100dvh) - 24px)}
 #portfolio-dialog .access-panel{padding:18px 20px;border-radius:13px}
 .access-masthead{min-height:44px;padding-right:42px}
 #portfolio-dialog .access-brand-lockup{width:140px}
 #portfolio-dialog .dialog-close{top:17px;right:17px;width:44px;height:44px;padding:13px}
 #portfolio-dialog .access-frequency{display:none}
 #portfolio-dialog h2{font-size:clamp(28px,8.1vw,37px);line-height:1;letter-spacing:-.055em;margin:18px 0 8px}
 #portfolio-dialog h2 br{display:none}
 #portfolio-dialog #portfolio-description{font-size:14px}
 #portfolio-access{margin-top:18px}
 .access-entry{--label-height:18px;--label-gap:8px;--display-height:66px;--dial-size:88px;gap:10px}
 .access-label{font-size:14px}
 .access-display{height:var(--display-height);padding:9px 10px}
 #portfolio-code{font-size:20px;height:28px}
 #portfolio-code::placeholder{font-size:16px}
 .access-code-row{height:28px}
 .receiver-signal{height:8px;margin-top:6px;gap:3px}
 .dial-control{width:88px;height:112px}
 .dial-scale{width:88px;height:88px}
 .dial-hardware{width:62px;height:62px;top:13px;left:13px}
 .dial-indicator{height:18px;top:5px;width:3px}
 .dial-caption{top:91px;font-size:16px;gap:4px}
 .dial-caption svg{width:15px;height:12px}
 .access-readout{margin-top:7px;min-height:0}
 /* Keep instructions available to assistive technology, without filler copy. */
 #portfolio-dialog[data-access="idle"] .access-readout{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
 .access-footer{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;font-size:14px}
 .access-footer>span{flex:none}
 #portfolio-dialog .dialog-contact{flex:1;min-width:0;min-height:48px;margin:0;padding:11px 10px;font-size:16px;gap:8px}
 #portfolio-dialog[data-compact-viewport] .access-panel{padding:12px 16px}
 #portfolio-dialog[data-compact-viewport] .access-masthead{min-height:34px}
 #portfolio-dialog[data-compact-viewport] .access-brand-lockup{width:100px}
 #portfolio-dialog[data-compact-viewport] .dialog-close{top:7px;right:12px}
 #portfolio-dialog[data-compact-viewport] h2{font-size:28px;margin:10px 0 0}
 #portfolio-dialog[data-compact-viewport] #portfolio-description{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #portfolio-dialog[data-compact-viewport] #portfolio-access{margin-top:14px}
 #portfolio-dialog[data-compact-viewport] .access-footer{margin-top:10px;padding-top:10px}
}
@media(max-width:360px){
 .access-footer{flex-direction:column;align-items:stretch;gap:6px}
 #portfolio-dialog .dialog-contact{flex:auto}
}
@media(prefers-reduced-motion:reduce){
 #portfolio-dialog[open],#portfolio-dialog::backdrop,#portfolio-dialog[open] .access-frequency-needle,#portfolio-dialog[data-access="tuning"] .access-code-row,#portfolio-dialog[data-access="tuning"] .receiver-scan,#portfolio-dialog[data-access="tuning"] .receiver-signal i{animation:none}
 #portfolio-dialog *,#portfolio-dialog *:before,#portfolio-dialog *:after{transition:none}
}