/* Fensyx information pages 0.1.1 */
/* --space includes the entire wide-screen margin and must not pad this container. */
.info-main{--info-gutter:clamp(24px,4vw,64px);width:min(1040px,calc(100% - var(--info-gutter)*2));margin:0 auto;padding:calc(var(--header) + 82px) 0 108px;min-height:calc(100svh - 200px)}
.info-hero{display:flex;flex-wrap:wrap;align-items:center;gap:28px 64px;margin-bottom:38px;min-width:0}
.info-heading{flex:1 1 440px;min-width:0}
.info-hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.15;letter-spacing:-1.8px;font-weight:600;margin:0 0 24px;color:var(--ink)}
.info-lead{font-size:20px;line-height:1.85;color:#4d6571;margin:0;max-width:38ch;text-wrap:pretty}
.info-date{font-size:16px;color:#687f89;margin:24px 0 0;line-height:1.5}
.info-nav{display:flex;flex-wrap:wrap;gap:10px 25px;padding:0 0 28px;margin-bottom:48px;border-bottom:1px solid #e5edef;font-size:16px}
.info-nav a{min-height:36px;width:fit-content;position:relative;color:#5b707b;transition:color .22s ease}
.info-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.75,.2,1)}
.info-nav a[aria-current=page],.info-nav a:hover{color:var(--blue)}
.info-nav a[aria-current=page]::after,.info-nav a:hover::after{transform:scaleX(1)}
.info-section{scroll-margin-top:calc(var(--header) + 24px);margin:0 0 48px;max-width:780px}
.info-section:last-child{margin-bottom:0}
.info-section h2{font-size:24px;font-weight:600;line-height:1.5;letter-spacing:-.5px;margin:0 0 17px}
.info-section p,.info-section li{font-size:17px;line-height:1.95;color:#4b626e;text-wrap:pretty;overflow-wrap:anywhere}
.info-section p{margin:0 0 16px}
.info-section p:last-child{margin-bottom:0}
.info-section ul{margin:0 0 16px;padding-left:24px}
.info-section li+li{margin-top:8px}
.info-section p a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.info-contact{display:inline-flex;align-items:center;margin-top:8px;font-size:17px}
.info-contact .footer-email{font-size:17px}

/* Decorative diagrams stay outside the reading column and never capture input. */
.info-art{flex:0 0 200px;width:200px;max-width:100%;height:180px;pointer-events:none;user-select:none}
.info-art svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.info-art .info-guide{stroke:#d2e7eb;stroke-width:1}
.info-art .info-line{stroke:#4babcc;stroke-width:1.5}
.info-art .info-accent{stroke:#5abdb5;stroke-width:1.5}
.info-art .info-surface{fill:#eaf7fa;fill-opacity:.72}
.info-art .info-float-one{animation:info-float-one 9s ease-in-out infinite}
.info-art .info-float-two{animation:info-float-two 11s ease-in-out infinite}
.info-art .info-orbit{transform-origin:120px 105px;animation:info-orbit 32s linear infinite}
.info-art .info-orbit-reverse{transform-origin:120px 105px;animation:info-orbit 38s linear infinite reverse}
.info-art .info-scan{animation:info-scan 7s cubic-bezier(.45,0,.25,1) infinite}
.info-art .info-trace{stroke-dasharray:34 260;animation:info-trace 14s linear infinite}
.info-art :is(.info-float-one,.info-float-two,.info-orbit,.info-orbit-reverse,.info-scan,.info-trace){animation-play-state:paused}
.info-art.is-playing :is(.info-float-one,.info-float-two,.info-orbit,.info-orbit-reverse,.info-scan,.info-trace){animation-play-state:running}
@keyframes info-float-one{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-6px)}}
@keyframes info-float-two{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,5px)}}
@keyframes info-orbit{to{transform:rotate(360deg)}}
@keyframes info-scan{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}
@keyframes info-trace{to{stroke-dashoffset:-294}}
@media(prefers-reduced-motion:reduce){.info-nav a,.info-nav a::after{transition:none}.info-art *{animation:none!important}}
