/* Signal / 01: an immersive typographic field rather than an isolated object. */
.signal-hero { position:relative; overflow:hidden; padding-bottom:48px; }
.signal-topline { display:flex; justify-content:space-between; gap:20px; padding-top:28px; position:relative; z-index:2; color:#7f808b; font:8px ui-monospace,Menlo,Consolas,monospace; letter-spacing:1.3px; }
.signal-topline p { margin:0; }.signal-topline>span { color:#5e606b; }
.signal-stage { position:relative; height:clamp(310px,calc(100svh - 410px),510px); margin-top:-24px; }
.ascii-field { position:relative; height:100%; width:100%; margin:0; }
.ascii-field::before { content:''; position:absolute; inset:5% 0 0; background:radial-gradient(ellipse at 30% 45%,#a79ad309,transparent 50%),radial-gradient(ellipse at 75% 60%,#c3a36e09,transparent 50%); pointer-events:none; }
.ascii-field canvas,.ascii-fallback { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
.ascii-field canvas { opacity:0; transition:opacity .7s; cursor:crosshair; }
.ascii-fallback { opacity:.85; }.ascii-fallback img { width:100%; height:100%; object-fit:cover; }
.ascii-field.has-ascii canvas { opacity:1; }.ascii-field.has-ascii .ascii-fallback { opacity:0; }
.ascii-field figcaption { position:absolute; z-index:2; bottom:20px; left:max(52px,calc((100vw - 1360px)/2)); right:max(52px,calc((100vw - 1360px)/2)); display:flex; align-items:center; justify-content:space-between; font:8px ui-monospace,Menlo,Consolas,monospace; color:#7d7e8b; letter-spacing:.7px; gap:18px; }
.field-identity,.field-controls { display:flex; align-items:center; gap:10px; }
.field-identity .signal-dot { width:4px; height:4px; margin:0 4px 0 0; }
.field-hint { margin-left:26px; color:#4f515c; font-size:7px; }
.field-controls { gap:18px; }.field-cycle { min-height:44px; color:#9c9ba9; background:none; padding:10px 0; font-size:8px; }
.field-cycle:hover { color:#e0d9f1; }
.field-pause { display:grid; place-items:center; width:40px; height:40px; border:1px solid #ffffff20; border-radius:50%; background:#16171a; padding:0; }
.field-pause>span { display:block; width:7px; height:8px; border-inline:2px solid #a4a5af; }
.field-pause[aria-pressed=true]>span { width:0; height:0; border:0; border-left:7px solid #c1b2e5; border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:2px; }
.field-pause[hidden],.field-cycle[hidden] { display:none; }
.signal-statement { position:relative; z-index:2; }
.signal-statement h1 { font-size:clamp(60px,7.9vw,126px); line-height:1.04; letter-spacing:-.065em; font-weight:500; margin:4px 0 31px; white-space:nowrap; }
.signal-statement h1>span { color:#85838f; }
.signal-bottom { border-top:1px solid #ffffff1c; padding-top:27px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.signal-bottom>p { color:#9696a1; font-size:13px; line-height:1.7; margin:0; }
.signal-explore { display:flex; align-items:center; gap:32px; font-size:12px; }
.explore-arrow { display:grid; place-items:center; width:47px; height:47px; border:1px solid #ffffff3b; border-radius:50%; font-size:23px; transition:background .2s,transform .2s; }
.signal-explore:hover .explore-arrow { background:#b7abec; color:#111214; transform:translateY(3px); }
.home-page .projects { padding-top:80px; }
.home-page .about { border-top:1px solid #ffffff14; margin-top:90px; padding-top:75px; }
.home-page .about-title { max-width:430px; }
.home-page .closing-line { padding-top:40px; }

@media(max-width:1100px) { .signal-statement h1 { font-size:8vw; }.field-hint { margin-left:10px; }.signal-stage { height:440px; } }
@media(max-width:760px) {
 .signal-hero { padding-bottom:28px; }
 .signal-topline { padding-top:23px; font-size:6px; letter-spacing:1px; }.signal-topline>span { display:none; }
 .signal-stage { height:390px; height:clamp(330px,49svh,440px); margin-top:-10px; }
 .ascii-field figcaption { left:20px; right:20px; bottom:12px; font-size:7px; letter-spacing:.3px; }
 .field-hint { display:none; }.field-cycle { font-size:8px; }.field-controls { gap:17px; }
 .signal-statement h1 { white-space:normal; font-size:clamp(48px,12.9vw,90px); letter-spacing:-.065em; line-height:1.05; margin:15px 0 27px; }
 .signal-statement h1>span { display:block; }
 .signal-bottom { padding-top:22px; gap:14px; align-items:flex-start; }
 .signal-bottom>p { font-size:10px; line-height:1.8; }.signal-explore { gap:13px; font-size:9px; max-width:145px; line-height:1.6; }
 .explore-arrow { width:36px; height:36px; flex-shrink:0; font-size:19px; }
 .home-page .projects { padding-top:47px; }.home-page .about { margin-top:55px; padding-top:50px; }
}
@media(prefers-reduced-motion:reduce) { .ascii-field canvas { transition:none; } }
/* Gaze: a continuous first-screen environment, with no horizontal art panel. */
.gaze-page .signal-header { position:absolute; inset:0 0 auto; z-index:4; }
.gaze-page .signal-header .header-inner { border:0; }
.gaze-page .signal-hero { min-height:100svh; display:flex; flex-direction:column; isolation:isolate; overflow:visible; padding:0 0 38px; }
.gaze-page .signal-stage { position:absolute; inset:0 0 -100px; height:auto; margin:0; z-index:-1; }
.gaze-page .ascii-field canvas,.gaze-page .ascii-fallback { mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 47%,rgba(0,0,0,.65) 55%,rgba(0,0,0,.26) 65%,rgba(0,0,0,.08) 78%,transparent 96%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 47%,rgba(0,0,0,.65) 55%,rgba(0,0,0,.26) 65%,rgba(0,0,0,.08) 78%,transparent 96%); }
.gaze-page .signal-topline { padding-top:110px; }
.gaze-page .signal-statement { margin-top:auto; padding-top:clamp(390px,56svh,660px); pointer-events:none; }
.gaze-page .signal-statement h1 { font-size:clamp(60px,7.1vw,112px); text-shadow:0 3px 30px #111214b3; }
.gaze-page .signal-statement a { pointer-events:auto; }
.gaze-page .signal-bottom { border:0; padding-top:12px; }
.gaze-page .ascii-field figcaption { top:170px; bottom:auto; }
.gaze-page .field-hint { display:none; }
.gaze-page .ascii-field figcaption .field-controls { margin-left:auto; }
@media(max-width:760px) {
 .gaze-page .signal-hero { min-height:100svh; padding-bottom:30px; }
 .gaze-page .signal-stage { inset:0 0 -110px; }
 .gaze-page .signal-topline { padding-top:96px; }
 .gaze-page .signal-statement { padding-top:clamp(350px,54svh,520px); }
 .gaze-page .signal-statement h1 { font-size:clamp(48px,12.9vw,90px); margin-bottom:21px; }
 .gaze-page .ascii-field figcaption { top:150px; font-size:6px; }
 .gaze-page .field-cycle { font-size:7px; }
 .gaze-page .ascii-field canvas,.gaze-page .ascii-fallback { mask-image:linear-gradient(180deg,transparent,#000 14%,#000 39%,rgba(0,0,0,.65) 47%,rgba(0,0,0,.26) 57%,rgba(0,0,0,.08) 71%,transparent 91%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 39%,rgba(0,0,0,.65) 47%,rgba(0,0,0,.26) 57%,rgba(0,0,0,.08) 71%,transparent 91%); }
}

.gaze-page .ascii-field canvas { image-rendering:pixelated; }