/* tethrotech.com v11 (TETHRO 10/7/2026): deep space, black / greys / white only (brand kit neutral scale).
   The sky (sky.js) is rendered in greyscale. Self-hosted fonts; no inline styles anywhere (CSP). */
@font-face{font-family:Newsreader;src:url(fonts/newsreader-normal-400-700-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-italic-400-700-latin.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-normal-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-normal-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  color-scheme:dark;
  --space:#050506; --carbon:#111214; --graphite:#26282B; --steel:#6B6E73; --silver:#A3A6AA; --mist:#D9DADB; --white:#FFFFFF;
  --line:rgba(255,255,255,.12); --glass:rgba(17,18,20,.62);
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.45,.5,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--space);color:var(--white);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--white)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--white);color:var(--space);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.page{position:relative;z-index:1}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

/* nav */
header.nav{position:sticky;top:0;z-index:10;background:linear-gradient(rgba(5,5,6,.82),rgba(5,5,6,.45));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.scrolled{border-bottom-color:var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
header.nav .brand{display:block;line-height:0}
header.nav .brand img{height:clamp(34px,4.4vw,46px);width:auto;display:block}
header.nav ul{display:flex;gap:clamp(14px,2.6vw,30px);list-style:none;margin:0;padding:0;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
header.nav ul a{color:var(--silver);text-decoration:none;transition:color .2s}
header.nav ul a:hover{color:var(--white)}
@media (max-width:640px){header.nav ul li.hide-sm{display:none}}

.kicker{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin:0 0 14px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--mist)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--silver);max-width:46ch;margin:18px 0 0}
.fine{font-size:13px;color:var(--steel);margin-top:16px}
.fine a{color:var(--mist)}

/* buttons + pills */
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;font:15px/1 var(--sans);padding:14px 22px;border-radius:999px;text-decoration:none;border:1px solid var(--white);transition:transform .35s var(--ease),background .2s,color .2s;cursor:pointer}
.btn.solid{background:var(--white);color:var(--space)}
.btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost:hover{border-color:var(--white)}
.pill{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:var(--mist);white-space:nowrap}
.pill.live{background:var(--white);color:var(--space);border-color:var(--white)}

/* hero */
.hero{padding-block:clamp(56px,10vh,120px) clamp(40px,7vh,90px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(44px,6.2vw,92px);line-height:1.02}
.hero-art{display:grid;place-items:center}
.hero-mark{width:min(100%,400px);height:auto;overflow:visible}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1}.hero-mark{width:min(56vw,260px)}}
.hero-mark .m-back,.hero-mark .m-front,.hero-mark .m-dot{transform-box:fill-box}
.js .hero-mark .m-l{transform-origin:100% 0;animation:swingL 1.1s .35s var(--spring) both}
.js .hero-mark .m-r{transform-origin:0 0;animation:swingR 1.1s .35s var(--spring) both}
.js .hero-mark .m-u{transform-origin:50% 100%;animation:rise .9s .2s var(--spring) both}
.js .hero-mark .m-front{transform-origin:50% 30%;animation:lock .9s .9s var(--spring) both}
.js .hero-mark .m-dot{transform-origin:50% 50%;animation:pop .5s 1.6s var(--spring) both}
@keyframes swingL{from{transform:rotate(-55deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes swingR{from{transform:rotate(55deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes lock{0%{transform:translateY(-22px) scale(1.06);opacity:0}100%{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(0)}to{transform:none}}
.hero-mark:hover .m-l{animation:nudgeL .7s var(--spring)}
.hero-mark:hover .m-r{animation:nudgeR .7s var(--spring)}
@keyframes nudgeL{50%{transform:rotate(-10deg)}}
@keyframes nudgeR{50%{transform:rotate(10deg)}}

/* the three boxes */
.band{padding-block:clamp(40px,8vh,100px)}
.boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.box{background:var(--glass);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .45s var(--ease),border-color .3s}
.box:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.box-tethro{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;overflow:hidden;min-height:440px;background:linear-gradient(135deg,rgba(17,18,20,.85),rgba(5,5,6,.75))}
.box-copy{padding:clamp(24px,4vw,52px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.box-copy h2{line-height:0}
.wordmark{width:min(100%,360px);height:auto;display:block}
.wordmark.big{width:min(100%,560px)}
.tag{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.25;color:var(--white);margin:4px 0 0}
.tag.big{font-size:clamp(24px,2.6vw,36px);margin-top:18px}
.box-copy p{margin:0;color:var(--silver);max-width:44ch}
.box-art{align-self:stretch;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 55%,rgba(255,255,255,.08),transparent 70%)}
.mascot{width:min(100%,420px);height:auto;display:block}
.box-soon{padding:clamp(24px,3vw,36px);min-height:220px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-style:dashed}
.box-soon h3{font-size:clamp(28px,2.6vw,38px)}
.box-soon p{margin:0;color:var(--silver)}
@media (max-width:820px){.boxes{grid-template-columns:1fr}.box-tethro{grid-template-columns:1fr}.box-art{order:-1;min-height:260px}.mascot{width:min(80%,320px)}}

/* /tethro */
.t-col{max-width:860px}
.t-col.center{text-align:center;margin-inline:auto}
.t-col.center .ctas{justify-content:center}
.t-hero h1{line-height:0;margin-top:6px}
.promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.promises{grid-template-columns:1fr}}
.promises li{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:26px}
.promises h3{font-size:24px}
.promises p{margin:8px 0 0;color:var(--silver)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split h2,.t-col h2{font-size:clamp(32px,4vw,56px);line-height:1.05}
.team{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.35)}
.team li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.team b{font-weight:400;font-family:var(--serif);font-size:20px}
.team span{color:var(--silver);font-size:14px;text-align:right}

/* contact form (v5 markup) */
.panel{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,2.4vw,28px)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact label{display:flex;flex-direction:column;gap:6px;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--silver)}
.contact .opt{text-transform:none;letter-spacing:0;color:var(--steel)}
.contact input,.contact select,.contact textarea{font:15px/1.4 var(--sans);color:var(--white);background:rgba(5,5,6,.7);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:11px 12px;width:100%}
.contact textarea{min-height:130px;resize:vertical}
.contact .full{grid-column:1/-1}
.contact .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact .status{margin:0;font-size:14px;color:var(--silver)}
.contact button{border:1px solid var(--white)}
@media (max-width:560px){.contact{grid-template-columns:1fr}}

/* legal + 404 */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,8vh,90px) clamp(16px,4vw,40px)}
.legal h1{font-size:clamp(36px,5vw,60px);margin-bottom:8px}
.legal .eff{color:var(--steel);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:30px}
.legal h2{font-size:24px;margin:34px 0 8px}
.legal p,.legal li{color:var(--silver)}
.legal a{color:var(--mist)}
.legal .card{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:20px}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:26px}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--steel)}
.foot .who{display:flex;align-items:center;gap:10px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{color:var(--silver);text-decoration:none}
.foot nav a:hover{color:var(--white)}

/* scroll reveal: always visible; below-the-fold items only start slightly lowered */
.js .reveal.pending{transform:translateY(22px)}
.reveal{transition:transform .8s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal.pending{transform:none}
}

/* ===== Uiverse elements (MIT, see UIVERSE-CREDITS.md), restyled to black, grey and white ===== */
/* Primary button: "jelly" by Shoh2008 (softened wobble on hover) plus a gummy press on :active */
.btn,.contact button{transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s,border-radius .5s cubic-bezier(.23,1,.32,1),box-shadow .5s cubic-bezier(.23,1,.32,1)}
.btn.solid:hover,.contact button:hover{transform:none;animation:jelly .6s 1 linear}
@keyframes jelly{0%{transform:scale(.94,1.06)}25%{transform:scale(1.06,.94)}50%{transform:scale(.97,1.03)}75%{transform:scale(1.02,.98)}100%{transform:scale(1,1)}}
.btn:active,.contact button:active{transform:scale(1.07,.9);animation:none;transition-duration:.08s}
/* Ghost button: "animated-button" by gharsh11032000 (pill relaxes to a rounded square, an arrow slides in) */
.btn.ghost{position:relative;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.0)}
.btn.ghost::after{content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;opacity:0;transform:translateX(-12px);transition:transform .6s cubic-bezier(.23,1,.32,1),opacity .4s;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;clip-path:polygon(0 40%,60% 40%,60% 10%,100% 50%,60% 90%,60% 60%,0 60%)}
.btn.ghost:hover{border-radius:14px;box-shadow:0 0 0 6px rgba(255,255,255,.08);padding-right:40px;transform:none}
.btn.ghost:hover::after{opacity:1;transform:none}
/* Nav link: underline and corner tick by ArturCodeCraft ("menu__link") */
header.nav ul a{position:relative;padding-right:10px}
header.nav ul a::before{content:"";position:absolute;left:100%;top:50%;width:5px;height:5px;margin-left:-8px;border-top:2px solid currentColor;border-right:2px solid currentColor;border-radius:2px;transform:translateY(-50%) rotate(45deg);opacity:0;transition:opacity .2s,transform .3s}
header.nav ul a:hover::before,header.nav ul a:focus-visible::before{opacity:1;transform:translateY(-50%) translateX(3px) rotate(45deg)}
header.nav ul a:hover{text-decoration:underline;text-underline-offset:5px}
/* Status pills: tinted badge by kamehame-ha (10% fill, 1px border, small radius) */
.pill{border-radius:6px;background:rgba(163,166,170,.1);border:1px solid var(--silver);color:var(--mist);padding:5px 9px}
.pill.live{background:rgba(255,255,255,.14);border-color:var(--white);color:var(--white)}
/* Cards: "glassmorphism card" by SteveBloX (scale and border on hover, a tilted press), blur removed */
.box-soon{transition:transform .5s cubic-bezier(.34,1.56,.64,1),border-color .3s;cursor:default}
.box-soon:hover{transform:scale(1.03);border-color:var(--white);border-style:solid}
.box-soon:active{transform:scale(.97) rotate(1.2deg)}
/* Inputs: focus treatment from saidbl1's floating input (border accent, spring ease); select arrow by Javierrocadev (turns on hover) */
.contact input,.contact select,.contact textarea{transition:border-color .4s cubic-bezier(.05,.81,0,.93),box-shadow .4s cubic-bezier(.05,.81,0,.93),background .3s}
.contact input:focus,.contact select:focus,.contact textarea:focus{outline:none;border-color:var(--white);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.contact label:focus-within{color:var(--white)}
.contact select{appearance:none;-webkit-appearance:none;background-image:none;padding-right:42px}
.contact label:has(select){position:relative}
.contact label:has(select)::after{content:"";position:absolute;right:10px;bottom:9px;width:22px;height:22px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23A3A6AA' stroke-width='6' stroke-linejoin='round' stroke-linecap='round' d='M60.7,53.6,50,64.3m0,0L39.3,53.6M50,64.3V35.7m0,46.4A32.1,32.1,0,1,1,82.1,50,32.1,32.1,0,0,1,50,82.1Z'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(-45deg);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.contact label:has(select):hover::after,.contact label:has(select):focus-within::after{transform:rotate(0)}
/* Sending: the dashed circle loader by Cybercom682, inside the submit button; sent: the same ring closes with a check */
.contact button[disabled]{position:relative;padding-right:46px}
.contact button[disabled]::after{content:"";position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;border:3px dashed currentColor;border-radius:50%;animation:uvspin 1.1s linear infinite}
@keyframes uvspin{to{transform:rotate(360deg)}}
.contact .status.ok::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid var(--white);border-radius:50%;background:linear-gradient(135deg,transparent 46%,var(--white) 46% 54%,transparent 54%) 0 0/100% 100% no-repeat;animation:uvpop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes uvpop{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.btn.solid:hover,.contact button:hover{animation:none}.btn:active,.contact button:active,.box-soon:hover,.box-soon:active{transform:none}.contact button[disabled]::after{animation:none}.contact .status.ok::before{animation:none}.contact label:has(select)::after{transition:none}}

/* v11 spacing + purpose (TETHRO 10/7; Justin: "space the site out my friend we need a purspoe and stuff") */
.hero{padding-block:clamp(80px,16vh,180px) clamp(70px,12vh,140px)}
.band{padding-block:clamp(90px,16vh,190px)}
.boxes{gap:clamp(18px,2.6vw,32px)}
.section-head{max-width:760px;margin-bottom:clamp(36px,6vh,64px)}
.section-head h2{font-size:clamp(36px,4.6vw,64px);line-height:1.04}
.purpose{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement{font-size:clamp(40px,6vw,92px);line-height:1.02;max-width:16ch}
.lede.wide{max-width:58ch;margin-top:28px}
.beliefs{list-style:none;margin:clamp(56px,9vh,100px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.beliefs li{border-top:1px solid rgba(255,255,255,.35);padding-top:22px}
.beliefs .num{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--steel)}
.beliefs h3{font-size:clamp(24px,2.2vw,30px);margin-top:14px}
.beliefs p{margin:10px 0 0;color:var(--silver)}
@media (max-width:820px){.beliefs{grid-template-columns:1fr}}
.band.purpose{padding-top:clamp(110px,18vh,200px);padding-bottom:clamp(110px,18vh,200px)}

.hero-word{margin:0}.hero-word img{display:block;width:min(100%,640px);height:auto}
/* three even boxes, one row */
.boxes{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.box-tethro{grid-column:auto;grid-template-columns:1fr;min-height:0;align-items:stretch}
.box-tethro .box-art{order:-1;min-height:0;padding-top:clamp(18px,2vw,26px)}
.box-tethro .mascot{width:min(70%,220px)}
.box-tethro .box-copy{padding:clamp(24px,3vw,36px);padding-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.box-tethro .wordmark{width:min(100%,220px);height:auto}
.box-tethro .ctas{flex-wrap:wrap;gap:10px}
.box-soon{min-height:0}
@media (max-width:980px){.boxes{grid-template-columns:1fr}}

.wm-inline{display:inline-block;height:.82em;width:auto;vertical-align:-.04em}
.nav-wm .wm-inline{height:13px;vertical-align:middle}
.btn.solid .wm-inline{filter:invert(1)}
.foot .who .wm-inline{height:11px}
.purpose .lede{max-width:60ch;margin-top:22px}
.beliefs p{color:var(--silver);margin:10px 0 0}
@media (max-width:820px){.beliefs{grid-template-columns:1fr}}
.btn .wm-inline{margin:0 .3em}.foot .who .wm-inline{margin-left:.3em}