/* Camera navigation uses the existing dialog, routes and focus lifecycle. */
.menu-toggle{position:relative;border:1px solid #aab5ad80;background:#06080736;transition:border-color .18s,box-shadow .18s,background .18s,transform .18s;touch-action:manipulation}
.menu-toggle svg{width:72%;height:72%;fill:none;stroke:#d5dcd7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.menu-toggle .camera-icon-lens{fill:#080c09;stroke:#86c394}
.menu-toggle .camera-icon-lines{stroke:#86c394;stroke-width:2.6}
.menu-toggle svg *{transition:stroke .18s}
@media(hover:hover) and (pointer:fine){.menu-toggle:hover{border-color:var(--green);background:#08150dc9;box-shadow:0 0 17px #00e65c33;transform:none}.menu-toggle:hover .camera-icon-lens,.menu-toggle:hover .camera-icon-lines{stroke:var(--green)}}
.menu-toggle:active{border-color:var(--green);box-shadow:0 0 23px #00e65c55;transform:scale(.96)}
.menu-toggle:active .camera-icon-lens,.menu-toggle:active .camera-icon-lines{stroke:var(--green)}
.menu-toggle:focus-visible{outline-offset:5px}
body.menu-open main,body.menu-open header{filter:blur(15px) brightness(.4)}
#menu.camera-navigation{background:transparent;padding:50px 18px;overflow:auto;align-items:center;justify-content:center}
#menu.camera-navigation[open]{display:flex;animation:none}
#menu.camera-navigation::backdrop{background:#0008;backdrop-filter:blur(12px)}
#menu .close{z-index:5;background:#111;color:#fff;top:18px;right:22px}
.navigation-camera{position:relative;width:min(1080px,100%,calc((100svh - 110px)*1.5));aspect-ratio:3/2;flex:none;filter:drop-shadow(0 22px 30px #000a);transform-origin:center;will-change:transform}
.camera-physical{position:absolute;inset:0}
.camera-body{position:absolute;width:100%;height:100%;inset:0;pointer-events:none;user-select:none}
.camera-lcd{position:absolute;left:15.55%;top:40%;width:49.3%;height:50.6%;background:#050707;color:#eee;display:flex;flex-direction:column;padding:2%;border:1px solid #343a36;box-shadow:inset 0 0 12px #000;overflow:hidden}
.lcd-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #45df65;gap:7px;padding:0 0 5px;font:clamp(7px,.8vw,11px)/1.4 Arial,sans-serif;letter-spacing:.06em;color:#bbb}
#menu .camera-lcd nav{display:flex;flex-direction:column;gap:0;flex:1;justify-content:space-evenly;margin:4px 0}
#menu .camera-lcd nav a{display:flex;align-items:center;gap:12px;width:100%;font:clamp(12px,1.7vw,23px)/1.2 Arial,sans-serif;color:#eee;padding:5px 8px;border:1px solid transparent;border-bottom-color:#ffffff0c;border-radius:2px;transform:none;transition:background .12s,border-color .12s}
#menu .camera-lcd nav a svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
#menu .camera-lcd nav a b{margin-left:auto;font-weight:400}
#menu .camera-lcd nav a.lcd-selected{color:white;border-color:#26ed55;background:linear-gradient(90deg,#0f792c,#07160d 18%);box-shadow:inset 4px 0 #26ed55}
#menu .camera-lcd nav a:focus-visible{outline:2px solid white;outline-offset:-4px}
.lcd-status{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;padding-top:4px;font:clamp(8px,1vw,12px)/1.3 Arial,sans-serif;color:#ddd}
.portfolio-modes{display:flex;gap:0;border:1px solid #ffffff35;border-radius:6px;width:fit-content;margin:0 0 25px;overflow:hidden}
.portfolio-modes a{font:13px/1.2 Arial,sans-serif;letter-spacing:.16em;padding:15px 26px;color:#aaa;min-height:46px;display:flex;align-items:center}
.portfolio-modes a[aria-current=page]{color:var(--green);background:#00e65c0a;box-shadow:inset 0 0 0 1px var(--green);border-radius:5px}
@media(max-width:600px){
 #menu.camera-navigation{padding:64px 5px 18px}
 .navigation-camera{width:min(100%,calc((100svh - 90px)*2/3));aspect-ratio:2/3}
 /* One landscape asset, uniformly scaled and physically rotated counterclockwise. */
 .camera-physical{inset:auto;left:50%;top:50%;width:150%;height:66.666667%;transform:translate(-50%,-50%) rotate(-90deg)}
 /* Map the same LCD opening to portrait coordinates; only its live UI stays upright. */
 .camera-lcd{left:40%;top:35.15%;width:50.6%;height:49.3%;padding:7px;border:0}
 #menu .camera-lcd nav{margin:4px 0;min-height:0;gap:2px}
 #menu .camera-lcd nav a{font-size:clamp(11px,3.2vw,16px);min-height:44px;padding:4px;gap:6px;flex:1}
 .lcd-heading{font-size:clamp(5px,1.55vw,8px);gap:3px;padding-bottom:5px;letter-spacing:0}
 .lcd-status{font-size:clamp(6px,1.8vw,9px);padding-top:5px}
 .portfolio-modes{margin-bottom:20px}.portfolio-modes a{padding:14px 24px}
}
@media(max-width:360px), (max-width:600px) and (max-height:700px){
 .camera-lcd{padding:4px}
 .lcd-heading,.lcd-status{display:none}
 #menu .camera-lcd nav{margin:0;gap:0;overflow-y:auto}
 #menu .camera-lcd nav a{min-height:40px;font-size:11px;gap:4px}
}
@media(prefers-reduced-motion:reduce){.camera-menu-wheel{transition:none}}
.menu-toggle{display:flex;align-items:center;justify-content:center;padding:0}
.menu-toggle svg{flex:none;width:72%;height:72%}
#menu.camera-navigation{overflow-x:hidden}
/* Opaque full disc covers the original dial; only this surface rotates. */
.email-popup{position:fixed;inset:0;margin:auto;width:min(410px,calc(100% - 32px));max-height:calc(100svh - 32px);padding:30px 24px 16px;background:#101617;color:white;border:1px solid #69716c;border-radius:10px;box-shadow:0 16px 60px #0009}
.email-popup::backdrop{background:#0006}.email-popup h2{font:600 23px/1.4 Arial,sans-serif;margin:0 30px 20px 0}.email-close{position:absolute;right:8px;top:6px;width:44px;height:44px;background:none;border:0;color:white;font-size:28px}.email-address{display:flex;border:1px solid #858d89;border-radius:5px;margin-bottom:12px}.email-address input{min-width:0;width:100%;background:transparent;color:white;border:0;padding:14px 10px;font:14px Arial,sans-serif}.email-copy-icon{min-width:44px;background:transparent;border:0;color:white;font-size:26px}.email-copy{width:100%;justify-content:center;cursor:pointer}.email-popup [role=status]{font-size:14px;min-height:20px;margin:10px 0 0}
.camera-rate{position:absolute;left:15.85%;top:31.6%;transform:translate(-50%,-50%);width:max(5.3%,44px);height:max(7.6%,44px);border-radius:50%;border:1px solid transparent;background:transparent}
.camera-rate:hover,.camera-rate:focus-visible{outline:2px solid #60e487;outline-offset:0;background:#50ed7312}.camera-rate:active{background:#50ed7325}
.email-popup{height:auto}.email-popup .cta{font-family:Arial,sans-serif}
.email-popup{height:fit-content;max-height:calc(100svh - 32px)}
/* All dial geometry shares source-space center (1160,709), diameter 260.
   The opaque stationary mounting disc covers the old photographic dial completely. */
.camera-dial-control{position:absolute;left:67.057291667%;top:56.54296875%;width:16.927083333%;aspect-ratio:1;isolation:isolate}
.camera-dial-face{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.camera-menu-wheel{transform-box:view-box;transform-origin:130px 130px;transition:transform .15s ease-out}
.camera-dial-ring{position:absolute;inset:0;border-radius:50%;touch-action:none;cursor:grab}
.camera-dial-ring:active{cursor:grabbing}.camera-dial-ring:focus-visible{outline:2px solid #60e487;outline-offset:2px}
.camera-set{position:absolute;left:25%;top:25%;width:50%;height:50%;border:0;border-radius:50%;padding:0;background:transparent;color:#eee;font:600 clamp(10px,1.5vw,22px)/1 Arial,sans-serif;display:grid;place-items:center}
.camera-set:active{background:#ffffff08}
.camera-shortcut{position:absolute;transform:translate(-50%,-50%);width:max(5.3%,44px);height:max(7.6%,44px);border:1px solid transparent;border-radius:50%;background:transparent}
.camera-menu-key{left:22.4%;top:31.6%}.camera-magnify{left:70.65%;top:42.2%}.camera-info{left:70.65%;top:51.8%}.camera-play{left:73.3%;top:86.8%}
.camera-shortcut:hover,.camera-shortcut:focus-visible{outline:2px solid #60e487;outline-offset:0;background:#50ed7312}.camera-shortcut:active{background:#50ed7325}
@media(prefers-reduced-motion:reduce){.camera-menu-wheel{transition:none}}