/* Contact section (WEB-044): a black void with a hooded figure working at a desk far off (contact-scene.mjs, a WebGL canvas,
   seen from the Wide view; drag to look around) and a light interface over it in the screens' glow colour (--hud): corner
   marks, the brand and live readouts, and the message box with the contact form. All type is Laydan Mono (loaded by
   about.js); lines are hairlines and dotted rules. The heading is kept for screen readers. On phones the scene fills the whole
   section behind the panel and frames the figure in .void-frame, the space above the message box. */
.void-section{--hud:#ff2e2e;--hud-rgb:255,46,46;color-scheme:dark;position:relative;background:#000;color:#f2e6e6;min-height:clamp(640px,100svh,940px);overflow:hidden;isolation:isolate}
.void-stage{position:absolute;inset:0;z-index:0}
.void-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y pinch-zoom;opacity:0;transition:opacity .4s ease}
.void-ready .void-canvas{opacity:1}
.void-instant .void-canvas{transition:none}
.void-canvas.dragging{cursor:grabbing}
.void-grain{position:absolute;inset:-10%;pointer-events:none;opacity:.07;-webkit-mask-image:linear-gradient(#000 62%,transparent 88%);mask-image:linear-gradient(#000 62%,transparent 88%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:void-grain .9s steps(5) infinite}
.void-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 82%,#000),linear-gradient(90deg,#00000070 0,#00000033 34%,transparent 58%),radial-gradient(ellipse 80% 75% at 68% 52%,transparent 50%,#000000a0 100%)}
@keyframes void-grain{20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}}
.void-ui{position:absolute;inset:28px clamp(22px,3vw,44px);z-index:1;display:grid;grid-template-rows:auto 1fr auto;pointer-events:none;color:rgba(var(--hud-rgb),.8);font:500 10.5px/1.35 "Laydan Mono",ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 8px rgba(var(--hud-rgb),.35)}
.void-ui:before{content:"";position:absolute;inset:-12px;pointer-events:none;opacity:.42;background:
 linear-gradient(var(--hud),var(--hud)) 0 0/12px 1px no-repeat,linear-gradient(var(--hud),var(--hud)) 0 0/1px 12px no-repeat,
 linear-gradient(var(--hud),var(--hud)) 100% 0/12px 1px no-repeat,linear-gradient(var(--hud),var(--hud)) 100% 0/1px 12px no-repeat,
 linear-gradient(var(--hud),var(--hud)) 0 100%/12px 1px no-repeat,linear-gradient(var(--hud),var(--hud)) 0 100%/1px 12px no-repeat,
 linear-gradient(var(--hud),var(--hud)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--hud),var(--hud)) 100% 100%/1px 12px no-repeat}
.ui-top,.ui-bottom{display:flex;align-items:center;gap:20px}
.ui-top{padding-bottom:12px;background:linear-gradient(90deg,rgba(var(--hud-rgb),.34),rgba(var(--hud-rgb),.08) 55%,transparent) 0 100%/100% 1px no-repeat}
.ui-bottom{padding-top:12px;background:linear-gradient(90deg,rgba(var(--hud-rgb),.34),rgba(var(--hud-rgb),.08) 55%,transparent) 0 0/100% 1px no-repeat}
.ui-brand{font:500 14px/1 Inter,Arial,sans-serif;letter-spacing:-.01em;text-transform:none;color:#f6eeee;text-shadow:none}
.ui-brand b{color:var(--hud);font-weight:500}
.ui-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui-reads{margin-left:auto;display:flex;gap:18px;white-space:nowrap;color:rgba(var(--hud-rgb),.58)}
.ui-reads [data-read=fps]{color:rgba(var(--hud-rgb),.95)}
.ui-main{display:grid;grid-template-columns:minmax(0,420px);align-content:center;padding-block:18px}
.void-frame{display:none}
.ui-pages{position:relative;pointer-events:auto;padding:0 16px 8px;background:linear-gradient(180deg,rgba(var(--hud-rgb),.035),rgba(0,0,0,.05) 70%,transparent);box-shadow:inset 1px 0 0 rgba(var(--hud-rgb),.2)}
.ui-pages:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(var(--hud),var(--hud)) 100% 0/10px 1px no-repeat,linear-gradient(var(--hud),var(--hud)) 100% 0/1px 10px no-repeat}
.ui-pages.nudge{animation:ui-nudge .9s ease 3}
@keyframes ui-nudge{50%{box-shadow:inset 1px 0 0 var(--hud),0 0 30px rgba(var(--hud-rgb),.35)}}
.ui-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:12px 0 10px;border-bottom:1px dotted rgba(var(--hud-rgb),.4);color:#ffe9e9;font-size:11.5px;letter-spacing:.14em}
.ui-head span{font-size:10px;letter-spacing:.02em;text-transform:none;color:rgba(var(--hud-rgb),.6)}
.ui-row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dotted rgba(var(--hud-rgb),.2)}
.ui-row-send{border-bottom:0}
.ui-row-top{align-items:start}
.ui-label,.ui-row>label{font-size:9px;letter-spacing:.16em;color:rgba(var(--hud-rgb),.6)}
.ui-row-top>label{padding-top:8px}
.ui-form input,.ui-form select,.ui-form textarea{display:block;width:100%;padding:7px 2px 6px;border:0;border-bottom:1px solid rgba(var(--hud-rgb),.3);border-radius:0;background:transparent;color:#ffecec;font:500 12.5px/1.4 "Laydan Mono",ui-monospace,Consolas,monospace;letter-spacing:0;text-transform:none;text-shadow:inherit}
.ui-form textarea{resize:vertical;min-height:72px;padding:7px 8px;border:1px solid rgba(var(--hud-rgb),.16)}
.ui-form select option{background:#0b0303;color:#ffeded}
.ui-form ::placeholder{color:rgba(var(--hud-rgb),.38)}
.ui-form input:focus,.ui-form select:focus,.ui-form textarea:focus{outline:0;border-color:var(--hud);box-shadow:0 8px 14px -10px rgba(var(--hud-rgb),.7)}
.void-ui :focus-visible{outline:1px solid rgba(var(--hud-rgb),.8);outline-offset:2px}
.ui-send{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:10px 12px 9px;border:0;border-radius:1px;background:linear-gradient(90deg,rgba(var(--hud-rgb),.9),rgba(var(--hud-rgb),.6));color:#140303;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:inherit;text-shadow:none;box-shadow:0 0 18px rgba(var(--hud-rgb),.28);cursor:pointer;transition:box-shadow .2s}
.ui-send:hover{box-shadow:0 0 26px rgba(var(--hud-rgb),.45)}
.ui-send svg{width:13px;height:13px}
.ui-send:disabled{opacity:.6;cursor:progress}
.ui-form [aria-invalid=true]{border-color:var(--hud);box-shadow:0 8px 16px -10px var(--hud)}
.form-prompt{grid-column:2;margin:-2px 0 0;font-size:10.5px;letter-spacing:.02em;text-transform:none;color:#ffb3b3;text-shadow:0 0 8px rgba(var(--hud-rgb),.5)}
.form-prompt:before{content:"> ";color:var(--hud)}
.ui-status{margin:4px 0 6px 90px;font-size:10.5px;letter-spacing:.02em;text-transform:none;color:rgba(255,222,222,.7)}
.void-static .void-stage{background:radial-gradient(ellipse at 68% 55%,rgba(var(--hud-rgb),.14),transparent 60%)}
@media(max-width:760px){
 .void-section{min-height:0}
 .void-stage:after{background:linear-gradient(#000000c0 0,transparent 14%,transparent 88%,#000)}
 .void-frame{display:block;height:56svh;min-height:330px;max-height:500px}
 .void-grain{display:none}
 .void-ui{position:relative;inset:auto;display:block;padding:0 16px 44px}
 .void-ui:before{display:none}
 .ui-top{position:absolute;top:14px;left:16px;right:16px;gap:14px;padding-bottom:9px}
 .ui-reads{gap:12px}
 .ui-reads [data-read=fps]{display:none}
 .ui-main{display:block;margin-top:-26px;padding-block:0 14px}
 .ui-pages{padding:0 12px 4px}
 .ui-head{flex-wrap:wrap;gap:4px 12px}
 .ui-row{grid-template-columns:1fr;gap:5px;padding:10px 0}
 .ui-row-top>label{padding-top:0}
 .ui-row-send>.ui-label{display:none}
 .form-prompt{grid-column:1}
 .ui-status{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.void-grain{animation:none}.void-canvas{transition:none}.ui-pages.nudge{animation:none}}
/* Footer, in the same style: black like the void, Laydan Mono, red text and lines. It overlaps the section by 1px so the page's
   light background can't show through the seam when the section ends on a fractional pixel. */
.void-footer{--hud:#ff2e2e;--hud-rgb:255,46,46;position:relative;margin-top:-1px;background:#000;color:rgba(var(--hud-rgb),.82);font:500 12px/1.6 "Laydan Mono",ui-monospace,Consolas,monospace;text-shadow:0 0 8px rgba(var(--hud-rgb),.3);padding:46px 0 30px}
.vf-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;padding-top:34px;background:linear-gradient(90deg,rgba(var(--hud-rgb),.34),rgba(var(--hud-rgb),.08) 55%,transparent) 0 0/100% 1px no-repeat}
.void-footer .brand{color:var(--hud);font-family:Inter,Arial,sans-serif;font-size:26px;letter-spacing:-1.3px;text-shadow:0 0 16px rgba(var(--hud-rgb),.45)}
.void-footer .brand-dot{color:#ff8a8a}
.vf-line{margin:10px 0 6px;color:#ffe2e2;letter-spacing:.04em}
.vf-dim{margin:0;max-width:34ch;font-size:11px;color:rgba(var(--hud-rgb),.6)}
.vf-col{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.vf-head{margin:2px 0 6px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--hud-rgb),.55)}
.void-footer a{color:rgba(var(--hud-rgb),.9);transition:color .2s,text-shadow .2s}
.void-footer a:hover{color:#ffd0d0;text-shadow:0 0 10px rgba(var(--hud-rgb),.8)}
.void-footer a svg{width:11px;height:11px;margin-left:4px;vertical-align:-1px}
.vf-col .vf-dim{margin-top:2px;font-size:10.5px}
.vf-base{display:flex;align-items:center;gap:24px;margin-top:40px;padding-top:16px;border-top:1px dotted rgba(var(--hud-rgb),.28);font-size:10.5px;color:rgba(var(--hud-rgb),.6)}
.vf-base small{font-size:inherit}
.vf-prompt{margin-left:auto;color:rgba(var(--hud-rgb),.5)}
.vf-prompt i{display:inline-block;width:.6em;height:1em;vertical-align:-.15em;background:var(--hud);box-shadow:0 0 8px var(--hud);animation:ui-blink 1.06s steps(1) infinite}
@keyframes ui-blink{50%{opacity:0}}
.vf-top{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 5px;border:1px solid rgba(var(--hud-rgb),.25);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.vf-top:hover{border-color:rgba(var(--hud-rgb),.7)}
.void-footer :focus-visible{outline:1px solid rgba(var(--hud-rgb),.8);outline-offset:3px}
@media(max-width:760px){.void-footer{padding:30px 0 26px}.vf-grid{grid-template-columns:1fr;gap:26px;padding-top:26px}.vf-base{flex-wrap:wrap;gap:12px 16px;margin-top:30px}.vf-prompt{display:none}.vf-top{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.vf-prompt i{animation:none}}