/* ==========================================================================
   Ninova Technology · components.css
   Reusable pieces used on more than one page:
   buttons, chips, brand, site header + full-screen menu, site footer,
   the page-transition veil and the pointer aura.
   Header and footer markup lives in /components (header.js, footer.js).
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;overflow:hidden;isolation:isolate;font:400 14px/1 var(--font-sans);text-decoration:none;white-space:nowrap;padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--ink-inverse);border:1px solid var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  /* --mgx/--mgy are set by the magnetic hover in main.js; --lift is the hover rise */
  transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) + var(--lift,0px)),0);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow .25s,transform .5s var(--ease-spring)}
/* a soft light that follows the pointer across the button */
.btn::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(90px circle at var(--bx,50%) var(--by,50%),rgba(var(--teal-rgb),.5),rgba(var(--teal-rgb),0) 70%);opacity:0;transition:opacity var(--t-med)}
.btn:hover{--lift:-1px;background:#fff;box-shadow:0 10px 30px -10px rgba(138,236,222,.5)}
.btn:hover::before{opacity:1}
.btn:active{--lift:1px;transition-duration:.08s}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{background:transparent;border-color:#fff}
.btn--ghost::before{background:radial-gradient(90px circle at var(--bx,50%) var(--by,50%),rgba(var(--teal-rgb),.22),rgba(var(--teal-rgb),0) 70%)}
.btn[disabled]{opacity:.6;cursor:progress}
@media (hover:none){.btn:hover{--lift:0px}}

/* ---------- Chips: small outlined pills. Colour comes from --chip ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips>li{--chip:rgb(var(--accent-rgb));font-size:12px;font-weight:300;line-height:1.3;padding:6px 12px;border-radius:999px;color:var(--ink);border:1px solid var(--line-strong);border-color:color-mix(in srgb,var(--chip) 50%,transparent);background:color-mix(in srgb,var(--chip) 7%,transparent);transition:background .3s,border-color .3s}
.chips a{color:inherit;text-decoration:none}
.chips>li:has(a):hover{background:color-mix(in srgb,var(--chip) 20%,transparent);border-color:var(--chip)}
.chips>li:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.chips a:focus-visible{outline:none}

/* Tone helpers: give a block (or a single chip) its scene colour */
.tone-ember{--tone:var(--ember)}
.tone-teal{--tone:var(--teal)}
.tone-violet{--tone:var(--violet)}
.tone-lime{--tone:var(--lime)}
.tone-rose{--tone:var(--rose)}
.tone-gold{--tone:var(--gold)}

/* ---------- Brand lockup ---------- */
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand svg{flex:none;width:28px;height:28px;fill:var(--brand);overflow:visible}
.brand b{font-weight:400;font-size:15px;letter-spacing:.14em}
.brand span{font-weight:200;font-size:15px;letter-spacing:.14em;color:var(--ink-dim)}
/* hover: the four facets of the mark ease apart, then settle back on a spring */
.brand polygon{transform-box:fill-box;transform-origin:center;transition:transform .7s var(--ease-spring)}
.brand:hover polygon:nth-child(1){transform:translate(-3px,-3px)}
.brand:hover polygon:nth-child(2){transform:translate(3px,-3px)}
.brand:hover polygon:nth-child(3){transform:translate(-3px,3px)}
.brand:hover polygon:nth-child(4){transform:translate(3px,3px)}
@media (max-width:700px){.brand span{display:none}}

/* ---------- Site header ----------
   No backdrop blur: blurring a canvas that redraws every frame causes stutter. */
site-header,site-footer{display:block}
.site-header{position:fixed;z-index:var(--z-header);top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(16px + var(--safe-top)) var(--gutter) 16px;background:linear-gradient(180deg,rgba(var(--void-rgb),.8),rgba(var(--void-rgb),0));border-bottom:1px solid transparent;transition:background .4s,border-color .4s,opacity .8s ease,transform 1s var(--ease-spring-soft)}
.site-header.is-solid{background:rgba(var(--void-rgb),.92);border-bottom-color:var(--line-soft)}
/* held back while the intro loader or a page transition is covering the page */
.is-intro .site-header{opacity:0;transform:translateY(-18px)}
.site-nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px);font-size:14px;font-weight:300}
.site-nav a{position:relative;color:var(--ink-dim);text-decoration:none;padding:6px 0;transition:color var(--t-fast)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a:not(.site-nav__cta)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgb(var(--sky-rgb));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-spring-soft)}
.site-nav a:not(.site-nav__cta):hover::after,.site-nav a[aria-current="page"]:not(.site-nav__cta)::after{transform:scaleX(1)}
.site-nav a:focus-visible{outline-offset:4px;border-radius:4px}
.site-nav a.site-nav__cta{color:var(--ink-inverse);background:var(--ember);padding:9px 18px;border-radius:999px;font-weight:400;transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) + var(--lift,0px)),0);transition:background var(--t-fast),box-shadow .25s,transform .5s var(--ease-spring)}
.site-nav a.site-nav__cta:hover{--lift:-1px;color:var(--ink-inverse);background:var(--ember-hi);box-shadow:0 10px 26px -10px rgba(255,138,90,.6)}
.site-nav a.site-nav__cta[aria-current="page"]{color:var(--ink-inverse);box-shadow:0 0 0 2px rgba(var(--ember-rgb),.35)}

/* two-line menu toggle, phones and small tablets only */
.menu-btn{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:auto;border:1px solid rgba(255,255,255,.24);border-radius:3px;background:rgba(var(--void-rgb),.55);color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .25s,background .25s}
.menu-btn i{position:absolute;right:12px;height:1.5px;border-radius:1px;background:currentColor;transition:width .5s var(--ease-spring)}
.menu-btn i:nth-child(1){top:17px;width:20px}
.menu-btn i:nth-child(2){top:25px;width:12px}
.menu-btn::before,.menu-btn::after{content:'';position:absolute;width:6px;height:6px;opacity:0;transition:opacity .25s;border:0 solid var(--ember)}
.menu-btn::before{left:-1px;top:-1px;border-width:1px 0 0 1px}
.menu-btn::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.menu-btn:hover,.menu-btn:active{border-color:rgba(255,255,255,.5)}
.menu-btn:hover i:nth-child(2),.menu-btn:active i:nth-child(2){width:20px}
.menu-btn:hover::before,.menu-btn:hover::after,.menu-btn:focus-visible::before,.menu-btn:focus-visible::after{opacity:1}
@media (max-width:768px){.site-nav{display:none}.menu-btn{display:block}}

/* ---------- Full-screen menu ("Index // Site") ---------- */
html.menu-open,html.menu-open body{overflow:hidden}
.menu{position:fixed;top:0;left:0;right:0;z-index:var(--z-menu);height:100vh;height:100dvh;overflow:hidden;color:var(--ink);background:var(--void-menu);
  /* --ox/--oy/--r and the insets are measured from the real toggle button when the menu opens */
  --bt:calc(16px + var(--safe-top));--br:var(--gutter);--bl:var(--gutter);
  visibility:hidden;clip-path:circle(0px at var(--ox,calc(100% - 42px)) var(--oy,38px));
  transition:clip-path .8s var(--ease-in-out),visibility 0s linear .8s}
.menu.is-open{visibility:visible;clip-path:circle(var(--r,150vmax) at var(--ox,calc(100% - 42px)) var(--oy,38px));transition:clip-path .8s var(--ease-in-out),visibility 0s}

/* backdrop: stars, soft nebula, drifting logo mark, one scan line */
.menu__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.menu__bg::before{content:'';position:absolute;inset:0;background-size:420px 420px;animation:menu-twinkle 6s ease-in-out infinite alternate;
  background-image:radial-gradient(1px 1px at 30px 50px,rgba(255,255,255,.8),transparent),radial-gradient(1.4px 1.4px at 160px 110px,rgba(var(--aqua-rgb),.8),transparent),radial-gradient(1px 1px at 300px 40px,rgba(255,173,140,.7),transparent),radial-gradient(1px 1px at 380px 190px,rgba(255,255,255,.5),transparent),radial-gradient(1.4px 1.4px at 80px 260px,rgba(var(--sky-rgb),.8),transparent),radial-gradient(1px 1px at 240px 330px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 120px 390px,rgba(220,150,255,.6),transparent)}
.menu__bg::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 40% at 8% 4%,rgba(var(--aqua-rgb),.07),transparent 70%),radial-gradient(70% 50% at 100% 100%,rgba(var(--brand-rgb),.22),transparent 70%)}
@keyframes menu-twinkle{from{opacity:.35}to{opacity:.8}}
.menu__mark{position:absolute;right:-16%;bottom:-5%;width:min(92vw,540px);height:auto;animation:menu-drift 16s ease-in-out infinite alternate}
@keyframes menu-drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(-14px,-18px) rotate(-2deg)}}
.menu__scan{position:absolute;left:0;right:0;top:0;height:1px;opacity:0;background:linear-gradient(90deg,transparent,rgba(var(--aqua-rgb),.85),transparent);box-shadow:0 0 22px 2px rgba(var(--aqua-rgb),.45)}
.menu.is-open .menu__scan{animation:menu-scan 1.2s .2s cubic-bezier(.4,0,.2,1)}
@keyframes menu-scan{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(100vh);opacity:0}}

/* top row: tag + close button, aligned to the header button */
.menu__tag{position:absolute;z-index:3;left:var(--bl);top:calc(var(--bt) + 16px);font:400 var(--fs-micro)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.menu__tag::after{content:'_';margin-left:3px;color:rgb(var(--sky-rgb));animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.menu__close{position:absolute;z-index:3;top:var(--bt);right:var(--br);width:44px;height:44px;border:1px solid rgba(255,255,255,.24);border-radius:3px;background:rgba(var(--void-rgb),.55);color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .25s,transform .7s var(--ease-spring)}
.menu__close i{position:absolute;left:12px;right:12px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .7s var(--ease-spring) .15s}
.menu__close i:nth-child(1){transform:translateY(-4px)}
.menu__close i:nth-child(2){transform:translateY(4px)}
.menu.is-open .menu__close i:nth-child(1){transform:rotate(45deg)}
.menu.is-open .menu__close i:nth-child(2){transform:rotate(-45deg)}
.menu__close:hover,.menu__close:active{border-color:var(--ember);transform:rotate(90deg)}

/* content */
.menu__inner{position:relative;z-index:2;height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:calc(var(--bt) + 44px + clamp(22px,5vh,48px)) var(--br) calc(22px + var(--safe-bottom)) var(--bl)}
.menu__nav li{position:relative;border-top:1px solid rgba(255,255,255,.09)}
.menu__nav li:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.menu__nav li::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,rgb(var(--sky-rgb)),rgba(var(--sky-rgb),0));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.menu__nav li:hover::after,.menu__nav li:focus-within::after,.menu__nav li.is-current::after{transform:scaleX(1)}
.menu__nav a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:clamp(13px,2.3vh,22px) 0;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.menu__label{display:inline-flex;align-items:center;gap:14px;font-weight:300;font-size:clamp(30px,min(9.6vw,6.4vh),54px);letter-spacing:-.035em;line-height:1.05;transition:transform .7s var(--ease-spring),color .3s}
.menu__path{font:400 var(--fs-micro)/1 var(--font-mono);letter-spacing:.14em;color:var(--ink-faint);transition:color .3s,transform .6s var(--ease-spring)}
.menu__nav a:hover .menu__label,.menu__nav a:focus-visible .menu__label,.menu__nav a:active .menu__label{transform:translateX(10px)}
.menu__nav a:hover .menu__path,.menu__nav a:focus-visible .menu__path,.menu__nav a:active .menu__path{color:rgb(var(--sky-rgb));transform:translateX(-4px)}
.menu__nav a[aria-current="page"] .menu__label{color:rgb(var(--sky-rgb))}
.menu__nav a[aria-current="page"] .menu__path{color:#aab0bf}
.menu__nav a[aria-current="page"] .menu__label::after{content:'';width:7px;height:7px;border-radius:50%;background:rgb(var(--sky-rgb));animation:menu-pulse 2.4s infinite}
@keyframes menu-pulse{0%{box-shadow:0 0 0 0 rgba(var(--sky-rgb),.6)}70%,100%{box-shadow:0 0 0 10px rgba(var(--sky-rgb),0)}}
.menu__cta{margin-top:clamp(18px,3.6vh,34px);display:grid;gap:10px}
.menu__cta a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-radius:3px;font:400 12px/1 var(--font-mono);letter-spacing:.1em;text-decoration:none;text-transform:uppercase;transition:transform .5s var(--ease-spring),box-shadow .3s,border-color .3s,background .3s}
.menu__call{background:var(--ember);color:var(--ink-inverse);border:1px solid var(--ember)}
.menu__call:hover,.menu__call:active{background:var(--ember-hi);transform:translateY(-1px);box-shadow:0 12px 30px -12px rgba(255,138,90,.7)}
.menu__mail{color:var(--ink);border:1px solid rgba(255,255,255,.2)}
.menu__mail span:last-child{text-transform:none;letter-spacing:.06em}
.menu__mail:hover,.menu__mail:active{border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.menu__foot{margin-top:auto;padding-top:clamp(22px,4vh,40px);font:400 var(--fs-micro)/1.95 var(--font-mono);letter-spacing:.1em;color:var(--ink-faint)}
.menu__foot .menu__hi{color:var(--ink-dim)}
.menu__foot a{color:var(--ink-dim);text-decoration:none;transition:color var(--t-fast)}
.menu__foot a:hover{color:var(--ink)}
.menu__clock{color:rgb(var(--sky-rgb));font-variant-numeric:tabular-nums}

/* staggered entrance: each block rises on a spring, one beat after the last */
.menu__nav li:nth-child(1){--i:0}.menu__nav li:nth-child(2){--i:1}.menu__nav li:nth-child(3){--i:2}.menu__nav li:nth-child(4){--i:3}.menu__nav li:nth-child(5){--i:4}.menu__nav li:nth-child(6){--i:5}
.menu__cta{--i:4}.menu__foot{--i:5}
.menu__item{opacity:0;transform:translateY(26px);transition:opacity .25s,transform .25s}
.menu.is-open .menu__item{opacity:1;transform:none;transition:opacity .7s ease calc(.32s + var(--i,0) * 75ms),transform 1.1s var(--ease-spring) calc(.32s + var(--i,0) * 75ms)}

@media (max-height:520px){.menu__label{font-size:clamp(24px,8vh,36px)}.menu__nav a{padding:9px 0}.menu__cta{grid-template-columns:1fr 1fr}.menu__mark{opacity:.6}}
@media (prefers-reduced-motion:reduce){
  .menu{clip-path:none!important;opacity:0;transition:opacity .2s,visibility 0s linear .2s!important}
  .menu.is-open{opacity:1;transition:opacity .2s,visibility 0s!important}
  .menu__item,.menu.is-open .menu__item{opacity:1;transform:none}
}

/* ---------- Site footer ---------- */
.site-footer{position:relative;z-index:var(--z-footer);margin-top:clamp(56px,10vh,120px);background:linear-gradient(180deg,var(--void-raised) 0%,var(--void) 100%);border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--ink-dim);overflow:hidden}
/* The seam, with the signal travelling along it. Same two brand colours and
   the same order as before; the gradient is simply twice as wide as the
   footer and slides, so the light moves through the hairline instead of
   sitting still. No text is over a 1px line, so this cannot touch reading. */
.site-footer::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.9) 15%,rgba(var(--teal-rgb),.7) 35%,transparent 50%,transparent 65%,rgba(var(--brand-rgb),.9) 85%,transparent);background-size:200% 100%;animation:footer-signal 14s linear infinite}
@keyframes footer-signal{from{background-position:200% 0}to{background-position:0 0}}

/* BEHIND THE TEXT, AND KEPT FAINT ENOUGH TO STAY THERE.
   This is the backdrop the menu panel already uses -- .menu__bg's star layer
   and its two soft nebulae -- at roughly HALF its strength, because a footer
   is dense text where that panel is six large links. It drifts and breathes
   on the menu's own two keyframes rather than new ones, so the site has one
   motion vocabulary. It starts 1px down so the seam above stays clean, takes
   no pointer, and sits under .site-footer__inner (z-index 1).
   Measured at every footer text element, 1440 and 390: the worst contrast is
   13.6:1 against a 4.5:1 bar, and identical to the ratio before it existed --
   the layer is too faint to move a sampled background byte. */
.site-footer::after{content:'';position:absolute;inset:1px 0 0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 30px 50px,rgba(255,255,255,.8),transparent),
    radial-gradient(1.4px 1.4px at 160px 110px,rgba(var(--aqua-rgb),.8),transparent),
    radial-gradient(1px 1px at 300px 40px,rgba(255,173,140,.7),transparent),
    radial-gradient(1px 1px at 380px 190px,rgba(255,255,255,.5),transparent),
    radial-gradient(1.4px 1.4px at 80px 260px,rgba(var(--sky-rgb),.8),transparent),
    radial-gradient(1px 1px at 240px 330px,rgba(255,255,255,.6),transparent),
    radial-gradient(60% 70% at 100% 100%,rgba(var(--brand-rgb),.11),transparent 70%),
    radial-gradient(50% 60% at 4% 0,rgba(var(--aqua-rgb),.035),transparent 70%);
  background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,auto,auto;
  opacity:.3;animation:footer-twinkle 7s ease-in-out infinite alternate,footer-drift 24s ease-in-out infinite alternate}
@keyframes footer-twinkle{from{opacity:.18}to{opacity:.42}}
@keyframes footer-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-16px,-10px,0)}}

/* Reduced motion keeps the look and drops the movement: the seam holds its
   light and the backdrop holds one frame. Nothing disappears. */
@media (prefers-reduced-motion:reduce){
  .site-footer::before{animation:none;background-position:50% 0}
  .site-footer::after{animation:none;opacity:.26}
}
.site-footer__inner{position:relative;z-index:1;width:100%;padding:0 var(--gutter)}

.subscribe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding:28px 0 24px;border-bottom:1px solid var(--line)}
.subscribe__title{font-size:var(--fs-title);letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.subscribe p{margin-top:6px;max-width:46ch;line-height:1.5}
.subscribe__form{flex:1 1 360px;min-width:0;max-width:min(480px,100%)}
.subscribe__field{display:flex;gap:6px;min-width:0;max-width:100%;padding:5px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(255,255,255,.04);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.subscribe__field:focus-within{border-color:rgba(var(--teal-rgb),.7);box-shadow:0 0 0 4px rgba(var(--teal-rgb),.12)}
.subscribe__field input{flex:1;width:100%;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:300 14px var(--font-sans);padding:0 8px 0 16px}
.subscribe__field input::placeholder{color:var(--ink-dim)}
.subscribe__field .btn{flex:none;padding:11px 20px}
.subscribe .subscribe__msg{min-height:0;margin:0 0 0 16px;font-size:12px;letter-spacing:.02em}
.subscribe .subscribe__msg:not(:empty){margin-top:8px}
.subscribe__msg.is-ok{color:var(--ok)}
.subscribe__msg.is-err{color:var(--err)}

.site-footer__main{display:grid;grid-template-columns:1.5fr .8fr 1.2fr 1.5fr;gap:24px 40px;padding:28px 0 26px}
.site-footer__brand p{margin-top:12px;max-width:34ch;line-height:1.55}
.social{display:flex;gap:8px;margin-top:16px}
.social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;color:var(--ink);background:rgba(255,255,255,.03);transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast),transform .5s var(--ease-spring)}
.social a:hover{border-color:rgba(var(--teal-rgb),.7);background:rgba(var(--teal-rgb),.08);color:#fff;transform:translateY(-2px)}
.social svg{width:15px;height:15px;fill:currentColor}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col__title{font-size:var(--fs-micro);font-weight:400;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px}
.footer-col a,.footer-col span{line-height:1.5}
.footer-col a{display:block;width:max-content;max-width:100%;color:var(--ink);opacity:.86;text-decoration:none;transition:opacity var(--t-fast),transform .5s var(--ease-spring)}
.footer-col a:hover{opacity:1;transform:translateX(3px)}
.footer-col--visit{max-width:30ch}

.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 0 calc(16px + var(--safe-bottom));border-top:1px solid var(--line);font-size:12px}
.member{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.member img{height:34px;width:auto;max-width:90px;object-fit:contain}
.member::before{content:'';order:1;width:1px;height:26px;background:linear-gradient(transparent,var(--line-strong),transparent)}
.member__type{order:2;display:inline-grid;font-size:var(--fs-micro);font-weight:300;letter-spacing:var(--track-caps);text-transform:uppercase;line-height:1.4}
.member__type>*{grid-area:1/1;white-space:nowrap}
.member__sizer{visibility:hidden}
.member__text::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--teal);box-shadow:0 0 8px rgba(var(--teal-rgb),.8);animation:blink 1s steps(1) infinite}
.member:hover .member__text{color:#fff}

@media (max-width:1000px){.site-footer__main{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px}.site-footer__brand{grid-column:1/-1}.site-footer__brand p{max-width:60ch}}
@media (max-width:700px){
  .site-footer__main{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;padding:24px 0 22px}
  .footer-col{gap:0}.footer-col__title{margin-bottom:6px}
  .footer-col a{width:auto;padding:7px 0;overflow-wrap:anywhere}
  .footer-col--visit{grid-column:1/-1;max-width:none}
  .subscribe{padding:24px 0 20px}.subscribe__field input{font-size:16px}
  .social a{width:40px;height:40px}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
  /* The mark and its typed line stay on ONE line on phones, at the owner's
     request. It was stacked here; measured before changing it, inline needs
     262.9px of the 280px a 320px screen gives (logo 49.1 + label 205.8 + an
     8px gap), so it fits at every phone width with room to spare. The hairline
     divider stays hidden, which is what buys that room. */
  .member{align-items:center;gap:8px;padding:2px 0}.member::before{display:none}
  .member__type{font-size:10px;letter-spacing:.1em}
}
@media (max-width:420px){.subscribe__field .btn{padding:11px 16px}.subscribe__field input{padding-left:12px}}
@media (max-width:340px){
  .site-footer__main{grid-template-columns:minmax(0,1fr)}
  .subscribe__field{flex-direction:column;border-radius:18px}.subscribe__field input{padding:11px 14px}.subscribe__field .btn{width:100%}
  .subscribe .subscribe__msg{margin-left:6px}.member__type{font-size:9.5px;letter-spacing:.08em}
}
@media (min-width:1600px){.site-footer{font-size:14px}.subscribe__title{font-size:30px}.site-footer__main{gap:24px 56px}}
@media (hover:none){.footer-col a:hover,.social a:hover{transform:none}}

/* ---------- Page transition veil ----------
   Leaving: a disc of night grows from the point you clicked (same gesture as the menu).
   Arriving: the veil lifts. Both are pure CSS once the class is set, so a script error cannot trap the page. */
.veil{position:fixed;z-index:var(--z-veil);left:var(--vx,50%);top:var(--vy,50%);width:calc(var(--vr,150vmax) * 2);height:calc(var(--vr,150vmax) * 2);margin:calc(var(--vr,150vmax) * -1) 0 0 calc(var(--vr,150vmax) * -1);border-radius:50%;background:var(--void);box-shadow:0 0 0 1px rgba(var(--aqua-rgb),.55),0 0 60px 6px rgba(var(--aqua-rgb),.22);pointer-events:none;visibility:hidden;transform:scale(0)}
.is-leaving .veil{visibility:visible;transform:scale(1);transition:transform .6s var(--ease-in-out)}
.is-entering::after{content:'';position:fixed;inset:0;z-index:var(--z-veil);background:var(--void);pointer-events:none;animation:veil-lift .75s .08s var(--ease-in-out) both}
@keyframes veil-lift{to{opacity:0;visibility:hidden}}

/* ---------- Pointer aura (fine pointers only; the native cursor stays) ---------- */
.aura{position:fixed;left:0;top:0;z-index:var(--z-cursor);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1px solid rgba(var(--aqua-rgb),.5);background:radial-gradient(circle,rgba(var(--aqua-rgb),.1),rgba(var(--aqua-rgb),0) 70%);pointer-events:none;opacity:0;will-change:transform;transition:opacity .4s,border-color .3s,background-color .3s}
.aura.is-on{opacity:1}
.aura.is-link{border-color:rgba(var(--ember-rgb),.75);background-color:rgba(var(--ember-rgb),.06)}
.aura.is-down{border-color:#fff}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.aura{display:none}}